How to create series for chart dynamically

**kislay.kishore** · 3 Jan 2012 3:42 AM

I am trying to genrate the series of a line chart dynamically.
The requirement is to generate the line on Y-axis, dependending upon the number of series user asks for.
I do some processing in a java script function and it genrates a JSON string for the series.
Now, when I copy paste the same string and try to generate the chart it works. The same doesn't work if I directly try to use the string which is formed by the JS function.
I get the error : "series.type is undefined" on Mozilla firefox error console.
Please suggest, what's worong I am doing?
Is there any other way of doing what generateSeries() does here. Please avise.

----------------------------
Code:
-----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Line Chart</title>
<script type="text/javascript" src="ext.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<link rel="stylesheet" type="text/css" href="example.css" />
<script type="text/javascript" src="bootstrap.js"></script>

<script type="text/javascript">
Ext.require(['Ext.data.*']);
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
Ext.onReady(function () {

function generateSeries( seriesCount, xAxisString, yAxisStringArray ) {

alert('Inside generateSeries ' + seriesCount );
alert('xAxisString='+ xAxisString + " "+ 'yAxisStringArray'+ yAxisStringArray[0] );

for (var i=0; i < yAxisStringArray.length; i++) {
var chartSeries = yAxisStringArray[i];
// var cylon = (i + 1) % 2 == 0; //every second man is a toaster
alert('chartSeries ' + i+'=' +chartSeries);
}

//start of series
var series = '[' ;

for (var i=0; i < yAxisStringArray.length; i++) {

var newSeries= "{" +
"type: 'line', "+
"highlight: { size: 7, radius: 7 }," +
"axis: 'left'," +
"xField:'" + xAxisString + "'," +
"yField:'"+ yAxisStringArray[i]+"',"+
"markerConfig: { type: 'cross', size: 4,radius: 4,'stroke-width': 0 }"+
"}";
series = series + newSeries;

if (i!=yAxisStringArray.length-1){
series = series +',' ;
}

}
series = series + ']';
//end of series

alert ("series=" + series);
// The below the copy paste of the output of the alert msg and it works fine
/*series = [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'month',
yField:'Defects Raised',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'month',
yField:'Defects Fixed',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]; */

return series;
}

var yAxisSrings = ['Defects Raised', 'Defects Fixed'];
var series1= generateSeries( 2,"month", yAxisSrings );
var myStore= Ext.create('Ext.data.JsonStore', {
fields: ['month', 'Defects Raised','Defects Fixed'],
data : [
{
"month": "Jan",
"Defects Raised": 10,
"Defects Fixed": 8
},
{
"month": "Feb",
"Defects Raised": 14,
"Defects Fixed": 10
},
{
"month": "Mar",
"Defects Raised": 20,
"Defects Fixed": 17
},
{
"month": "Apr",
"Defects Raised": 8,
"Defects Fixed": 12
},

{
"month": "May",
"Defects Raised": 15,
"Defects Fixed": 15
},

{
"month": "Jun",
"Defects Raised": 25,
"Defects Fixed": 20
},
]
}); //close of Ext.create
// mystore contains the JSON data
var panelone = Ext.create('Ext.Panel', {
width: 500,
height: 400,
hidden: false,
// maximizable: true,
title: 'Testing Report over Months',
// renderTo: Ext.getBody(),
renderTo: 'renderGraph0',
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
myStore.loadData(myStore);
}
}],
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: myStore,
shadow: true,
theme: 'Category1',
//theme: 'Red',
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Defects Raised','Defects Fixed'],
title: 'No of Defects',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Months'
}],
series: series1

}
});

});
</script>

</head>
<body id="docbody">
<h1>Line Chart Example</h1>
<div style="margin: 10px;">
<p>
Display 2 sets of random data in a line series. Reload data will randomly generate a new set of data in the store. Click on the legend items to remove them from the chart. <a href="Line.js">View Source</a>

<div id="renderGraph0" style="margin-bottom:15px"></div>
<div id="renderGraph1" style="margin-bottom:15px"></div>
</p>
</div>
</body>
</html>

kislay.kishore

I resolved the problem by converting the json string for series into json object, using below line of code just before returning from generateSeries( ):

series= eval('(' + series + ')');

Still, any other suggestion or solution is welcome!

Regards-Kislay

**kislay.kishore** · 3 Jan 2012 4:16 AM

I resolved the problem by converting the json string for series into json object, using below line of code just before returning from generateSeries( ):

series= eval('(' + series + ')');

Still, any other suggestion or solution is welcome!

Regards-Kislay

**ncooley527** · 23 Aug 2012 5:49 AM

Why not use Ext.JSON.decode and EXT.JSON.encode? Less chances for abuse there...

**kislay.kishore** · 23 Aug 2012 5:52 AM

Thanks for your response. Agreed!

This solution I used quite a few months back...and i just marked it resolved so that it doesnt remain unanswered.

How to create series for chart dynamically

Thread Tools

Search Thread

Display

Answered: How to create series for chart dynamically

Answered: How to create series for chart dynamically

Tags for this Thread