PDA

View Full Version : how tu create a chart whit json file



equivoco
4 Aug 2013, 9:02 AM
hi,sorry for my bad english i'm italian,
I'm not able to create a chart with a json file:
i've this json file:


var meteor = {
"Wavelength": [0.350000,0.352500,0.355000],"OLIVINE C1SC68": [0.275400,0.280350,0.285300], "TROILITE CAEA01": [0.038200,0.038200,0.038200],};


this is a little part of the file but is enough to understand how run all.
wavelength is in the axis of abscissae, the other 2 are on the axis of ordinates, do not know if the translation is correct, I mean the x and y of the Cartesian system.
for too much difficulty, at first, I just need an example that works only with wavelenght and OLIVINE C1SC68
I've been able to read the file without create a chart, and i've also created the chart with others data added by me manually, but I'm not able to create the chart with json's data. json's files are external, but at first i can try with an internal json's string.
This is that i've done:





// first lets create a window that opens when you click on "Click me" tag above
Ext.onReady(function(){


/*Ext.define('library2',{
extend:'Ext.data.Model',
fields:['library_id','library']
});*/

Ext.define('Sample', {
extend: 'Ext.data.Model',
fields: ['id', 'value']
});

/*store2= new Ext.data.Store({
model:'Sample',
});

var meteor = {
"Wavelength": [0.350000,0.352500,0.355000],"OLIVINE C1SC68": [0.275400,0.280350,0.285300], "TROILITE CAEA01": [0.038200,0.038200,0.038200],};


//store2.loadData(meteor);


//create a chart object whit a casual data
var store = Ext.create('Ext.data.JsonStore', {

fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [{
'name': 'metric one',
'data1': 10,
'data2': 12,
'data3': 14,
'data4': 8,
'data5': 13
}, {
'name': 'metric two',
'data1': 7,
'data2': 8,
'data3': 16,
'data4': 10,
'data5': 3
}, {
'name': 'metric three',
'data1': 5,
'data2': 2,
'data3': 14,
'data4': 12,
'data5': 7
}, {
'name': 'metric four',
'data1': 2,
'data2': 14,
'data3': 6,
'data4': 1,
'data5': 23
}, {
'name': 'metric five',
'data1': 4,
'data2': 4,
'data3': 36,
'data4': 13,
'data5': 33
}]
});


var chart = Ext.create('Ext.chart.Chart', {
//renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
fill: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
});
// end chart object


end than inside a tab :


{
title: 'Main Content',
id:'main',
region:'center',
frame:true,
collapsible:false,
items: chart
}]





you have to replace the data entered manually by me, with those json.
Thank you for you read.

Gary Schlosberg
9 Aug 2013, 4:44 PM
It's a bit difficult to understand exactly what you need here, but it seems you would need to prepare your data a bit to ready it for the chart. You probably want to update variable names, but in keeping consistent with your code sample, something like this:



var data = [];
for (var i = 0; i < meteor["Wavelength"].length; i++) {
data.push({
'name': meteor["Wavelength"][i],
'data1': meteor["OLIVINE C1SC68"][i],
'data2': meteor["TROILITE CAEA01"][i],
});
}


Then you could update the 'data' option on the store to use the 'data' you readied.