PDA

View Full Version : Radar Chart does render when read from json file



cahello
12 Jul 2012, 10:37 AM
Hi......
I have the following code in a js file, say, 'main.js'. I call this file from a .jsp file via
Ext.onReady(function(){ radarcharting(); }). The radar chart displays fine when the data is inline but not when the data is read from a json file. The code in the main.js file is:

function radarcharting(){
//defining the model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
}, {
name: 'OK',
}, {
name: 'Delayed',
},{
name: 'Error',
}]
});
//defining the store
var radarchart = Ext.create('Ext.data.Store', {
storeId: 'radarchart',
model: 'User',
autoload: 'true',
proxy: {
type: 'ajax',
url: 'path/to/the/file/dummy.json', //path does not have an error because the same path renders the
//data when the data is displayed in columns in grid
reader: {
type: 'json',
root: 'blah'
}
},
});


//defining the chart
var chart = new Ext.create('Ext.chart.Chart', {
width: 800,
height: 600,
animate: true,
maximum: 10,
insetPadding: 70,
theme:'Category2',
store: radarchart,
legend: {
position: "right"
},
axes: [{
type: 'Radial',
position: 'radial',
label: {
display: true
}
}],
series: [{
type: 'radar',
xField: 'name',
yField: 'Error',
showInLegend: true,
style: {
opacity: 0.4,
}
},{
type: 'radar',
xField: 'name',
yField: 'Delayed',
showInLegend: true,
style: {
opacity: 0.4,
}
},{
type: 'radar',
xField: 'name',
yField: 'OK',
showInLegend: true,
style: {
opacity: 0.4,
}
}]
});


//defining the panel where the 'chart' is displayed
new Ext.panel.Panel({
title: 'Radar Chart',
items: [chart],
align: 'stretch',
height: 900,
renderTo: 'viewradarchart', //this is a div in the .jsp file
});

}


The dummy.json file is:

{ "blah":
[
{
"name": "Hour six",
"OK": 4,
"Delayed": 3,
"Error": 2
},
{
"name": "Hour seven",
"OK": 3,
"Delayed": 6,
"Error": 1
},
{
"name": "Hour eight",
"OK": 8,
"Delayed": 5,
"Error": 4
},
{
"name": "Hour nine",
"OK": 10,
"Delayed": 2,
"Error": 7
},
{
"name": "Hour ten",
"OK": 7,
"Delayed": 8,
"Error": 5
},
]
}


Can someone suggest what is wrong/missing??

cahello
12 Jul 2012, 10:49 AM
Sorry for the misleading Title of the thread. Its acyually:
"Radar Chart does not render when read from json file" :">

cahello
12 Jul 2012, 11:17 AM
I have got this working. Got it from the thread

http://www.sencha.com/forum/showthread.php?154400-Radar-chart-not-rendering-axis-when-data-from-json-file

:) (http://www.sencha.com/forum/showthread.php?154400-Radar-chart-not-rendering-axis-when-data-from-json-file)

scottmartin
12 Jul 2012, 11:26 AM
Thank you for the update.

Scott.

cahello
12 Jul 2012, 11:41 AM
It seems to be working now. I referred to the thread

http://www.sencha.com/forum/showthread.php?154400-Radar-chart-not-rendering-axis-when-data-from-json-file

:) (http://www.sencha.com/forum/showthread.php?154400-Radar-chart-not-rendering-axis-when-data-from-json-file)