PDA

View Full Version : How to display data returned by the server in a radar chart?



cahello
2 Oct 2012, 10:22 AM
I have a radar chart. When I load static/inline data or data from a json file, the radar chart displays perfectly. When I provide a URL, which retrieves json data, the radar chart does not display the data. I have tried various methods. They all work for static data, not server data returned by a rest call. Could anyone guide me as to what I am missing here? This is the code:


Ext.define('User1', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
}, {
name: 'data1',
}, {
name: 'data2',
},{
name: 'data3',
}]
});
var radarchart1 = Ext.create('Ext.data.Store', {
storeId: 'radarchart1',
model: 'User1',
proxy:{
type: 'ajax',
url:'/proxy/proxy.jsp',
extraParams: {
'mtId': some value
'userId': some value
'uri': some uri
},
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true,


listeners : {
load : function(store) {


chartPanelNew = Ext.create('Ext.panel.Panel', {


title: 'New Chart',
width: 1100,
height: 800,
layout: 'border',
renderTo: 'viewchart',
items:[{region: 'center',
xtype: 'panel',
items:[{xtype: 'chart',
width: 800,
height: 600,
animate: true,
maximum: 10,
insetPadding: 70,
theme:'Category2',
store: radarchart1,
legend: {
position: "right"
},
axes: [{
type: 'Radial',
position: 'radial',
label: {
display: true
}
}],
series: [{
type: 'radar',
xField: 'name',
yField: 'data1',
showInLegend: true,
style: {
opacity: 0.4,
}
},{
type: 'radar',
xField: 'name',
yField: 'data2',
showInLegend: true,
style: {
opacity: 0.4,
}
},{
type: 'radar',
xField: 'name',
yField: 'data3',
showInLegend: true,
style: {
opacity: 0.4,
}
}]
}]
}]
});
}
}
});

scottmartin
2 Oct 2012, 10:28 AM
What is the difference between the static json file and the return json?

Scott.

cahello
2 Oct 2012, 10:56 AM
The static json data: the data to be displayed in the chart is specified in the store along with the model.

The data read from a json file: the data to be displayed is in a .json file. This file is read by the store proxy and the model is updated with the data.

The json data returned by a rest call: The 'url' and 'extraparams' form the rest request, which returns the data that is to be displayed in the radar chart.

The first two cases work fine. The third case, however, does not. The data is returned (I have checked that using the 'alert' function) but the radar chart does not display it.

Thanks.

scottmartin
2 Oct 2012, 11:20 AM
Right .. but if you physically compare the three instance, do you see a difference.

Does the data from the server match. If you were to make a file of it, would it work.

Scott.

cahello
2 Oct 2012, 11:34 AM
I have tried the following cases:

1. Displaying the rest-call-returned-data in a mixed chart instead of radar chart. The mixed chart displayed the data correctly.

2. Sometimes the radar chart does not display data if the store is not loaded completely, so I dumped the rest-call-returned-data in another model-store. As in, I created a second store-model where I was storing the returned value as and when the data was being returned. Next, I tried reading from the second store but even this did not work.

3. Currently, I am trying to dump the rest-call-returned-data in a .json file, so that I can read from the file directly. However, I am not sure how to go about this. Till now, I have looked at 'ext.data.writer.json' and 'ext.data.proxy.localstorage'. Can this be achieved through these implementations? If so, can you give an idea? If not, how can I write to a .json file n the client side?

Finally, is there a straightforward way of displaying the rest-call-returned-data in a radar chart (since it worked for mixed chart perfectly)?

scottmartin
2 Oct 2012, 11:48 AM
You should be able to look at the response in debugger and paste to file.

Scott

cahello
2 Oct 2012, 12:10 PM
I have checked the response. It is returning the values (like I mentioned in case of the alert function) alright. Only thing is it is not displaying them in the radar chart.

I cant think of any reason since the mixed chart displays the values :(

scottmartin
2 Oct 2012, 12:21 PM
Please send use your JSON from the file, and from your response from server.

Scott.

cahello
2 Oct 2012, 12:44 PM
The following is the json string returned by the rest call:


{ "size": 1,
"total": 1,
"start": 0,
"data": [
{
"name": 0,
"data10": 3,
"data11": 0,
"data12": 0,
"data13": 0,
"data2": 0,
"data3": 3,
"data1": 0,
"data15": 37,
"data16": 0,
"data17": 0,
"data18": 0,
"data19": 0,
"data6": 0,
"data7": 37,
"data8": 0,
"data9": 0,
"data21": 0,
"data22": 0,
"data23": 0,
"data24": 0
}
],
"sort": "id",
"order": "asc"
}

The following is the data read from the .json file:



{ "data": [ { "name": 6, "data1": 4, "data2": 3, "data3": 2},
{ "name": 7, "data1": 3, "data2": 6, "data3": 1},
{ "name": 8, "data1": 8, "data2": 5, "data3": 4},

]
}

cahello
2 Oct 2012, 12:47 PM
Here is the json string returened by the server:

{
"size": 1,
"total": 1,
"start": 0,
"data": [
{ "name": 0,
"data1": 3,
"data2": 0,
"data3": 0,
"data4": 0,
"data5": 0,
"data6": 3,
"data7": 0,
"data8": 37,
"data9": 0,
"data10": 0,
"data11": 0,
"data12": 0,
"data13": 0,
"data14": 37,
"data15": 0,
"data16": 0,
"data17": 0,
"data18": 0,
"data19": 0,
"data20": 0
}
],
"sort": "id",
"order": "asc"
}

Here is the data from the .json file:

{ "data":
[ { "name": 6, "data1": 4, "data2": 3, "data3": 2},
{ "name": 7, "data1": 3, "data2": 6, "data3": 1},
{ "name": 8, "data1": 8, "data2": 5, "data3": 4},

]
}

vietits
2 Oct 2012, 5:01 PM
Your json data returned from server contains only one record while your static json data contains three records. With one or two records the radar chart only draws a line, so it's difficult to see the chart. So, try to return json data with 3 records or more.

cahello
3 Oct 2012, 8:14 AM
So, when I return more data, it reflects in the chart. I have a question with respect to the display now:

I ask this because I cannot guarantee the maximum value of the data returned - it maybe 10 or 5 or 20 after executing the rest call. The chart does not modify the "concentric circles" correctly with respect to the maximum data. The result is erroneous in that case. Is there a way to ensure the "concentric circles" displayed are according to the maximum data returned?

vietits
3 Oct 2012, 4:21 PM
The maximum value will be calculated automatically basing on the supplied data by the framework. Let have a try and you will see.

cahello
4 Oct 2012, 6:40 AM
Thanks for answering all my doubts up till now. Its been really helpful.

The last question, however, was a bit different. I think I could not put it correctly. Does the radar chart have the inbuilt property of displaying 10 "concentric circles", regardless of the maximum or minimum value to be displayed?

Every example I have tried or looked up showed 10 such "concentric circles", no matter what the values were. The range of values across the "concentric circles" are distributed accordingly. In such a scenario, if the values range from 1 to 9, a value is repeated in two "concentric circles".

Is that the way radar chart is designed or is it possible to dictate the number of "concentric circles" as per our requirements/data values? :-/

vietits
4 Oct 2012, 3:27 PM
The number of "concentric circles" in radial chart is statically determined by steps config which is default set to 10.


axes: [{
type: 'Radial',
position: 'radial',
label: {
display: true
},
minimum: 1,
maximum: 5,
steps: 5
}],

The chart engine will roundup value to show on each circle, so if your maximum value is less than 10, there will be some circle value duplicated. You can refer to this thread (post #2) for my solution to resolve this problem: http://www.sencha.com/forum/showthread.php?244353-Trying-to-change-the-pulse-size-on-a-radar-chart