PDA

View Full Version : Variable multi-series chart



paulharv
5 May 2010, 4:44 PM
Hi,

I'm following along with the steps for creating a multi-series chart from "ExtJS In Action", and am trying to apply that to chart blood glucose readings for my daughter, who has diabetes.

The X-axis would be the time that blood sugars were taken, the Y-Axis would be the blood glucose readings.

The for the X-axis varies in the following ways:
- readings are taken at varying times each day
- the number of readings varies each day

So my data could look like this...

{records: [
{monday: [{:time : '07:12', bg : 105},{:time : '10:45', bg : 178},{:time : '17:12', bg : 156},{:time : '21:03', bg : 134}]},
{tuesday: [{:time : '06:45', bg : 137},{:time : '11:23', bg : 201},{:time : '18:58', bg : 189}]},
{wednsday: [{:time : '07:06', bg : 256},{:time : '12:04', bg : 178},{:time : '17:22', bg : 129},{:time : '18:22', bg : 156},{:time : '23:12', bg : 126}]}
]}

Can this example (or some other JSON with equivalent data) be plotted as 3 series on a single chart? If so anyone give me a couple of pointers?

Thanks so much,

Paul

6 May 2010, 5:35 AM
Listing 10.4 of Chapter 10 explains how to do that:

http://extjsinaction.com/examples/chapter10/10.4_LineChart_3_series_custom_styles.html

paulharv
6 May 2010, 9:21 AM
Thanks - I saw that one.
The thing is that the example has consistent data each series - that is every series has data for a year, but in my case my series are variable - different times each day and different number of values each day. I haven't been able to work from the example code to the more complicated case I'm working with.

6 May 2010, 9:23 AM
what happens when you plug in your data? does it bomb?

can you post a public example of your code w/ the data?

paulharv
6 May 2010, 9:52 AM
I haven't actually tried it with the data as shown above - that was me trying to think through the problem.
Everything I have tried has certainly bombed - I don't know how to format the JSON for this problem - everything I try is stabs in the dark at this point. (I do get, in principle, how to do multi-series in the simple case).

6 May 2010, 10:00 AM
You can have data missing, but the chart will equate it as "zero"


var data = [
{"newHires":112,"year":2000,"total":136,"prevHired":1},
{"newHires":103,"year":2001,"total":136,"prevHired":1},
{"year":2002,"total":136,"prevHired":1},
{"newHires":95,"year":2003,"total":136,"prevHired":1}

];
var remoteStore = {
xtype : 'jsonstore',
autoLoad : true,
storeId : 'employeeDv',
data : data,
fields : [
{ name : "year", mapping : "year" },
{ name : "total", mapping : "total" },
{ name : "newHires", mapping : "newHires" },
{ name : "prevHired", mapping : "prevHired" }
]
};

var series = [
{
yField : 'prevHired',
displayName : 'Previously Hired',
style : {
fillColor : 0xFFAAAA,
borderColor : 0xAA3333,
lineColor : 0xAA3333
}
},
{
yField : 'total',
displayName : 'Total',
style : {
fillColor : 0xAAAAFF,
borderColor : 0x3333FF,
lineColor : 0x3333FF
}
},
{
yField : 'newHires',
displayName : 'New Hires',
style : {
fillColor : 0xAAFFAA,
borderColor : 0x33AA33,
lineColor : 0x33AA33
}
}
];

var tipRenderer = function(chart, record, index, series){
var yearInfo = "Year: " + record.get('year');
var empInfo = series.displayName + ': '+ record.get(series.yField);
return yearInfo + '\n' + empInfo ;
};

var extraStyle = {
xAxis : {
majorGridLines : {color: 0x999999, size : 1}
},
yAxis: {
titleRotation : -90
},
legend : {
display : "bottom",
padding : 5,
spacing : 2,
font : { color : 0x000000, family : "Arial", size : 12 },
border : { size : 1, color : 0x999999 }
}

};

var chart = {
xtype : 'linechart',
store : remoteStore,
xField : 'year',
// yField : 'total',
tipRenderer : tipRenderer,
extraStyle : extraStyle,
series : series,
xAxis : new Ext.chart.CategoryAxis({
title : 'Year Hired'
}),
yAxis : new Ext.chart.NumericAxis({
title : 'Number of employees'
})
};

new Ext.Window({
width : 450,
height : 250,
items : chart
}).show();

paulharv
6 May 2010, 10:33 AM
Hey thanks for that, that helps - I figured I'd get zeros.
I think what I'll have to do is massage the data on the server so that I send averaged blood glucose reading for every hour of the day or something. Either that or look into using Google Vizualizations or something.

6 May 2010, 12:07 PM
Paul,

check out this project:

http://code.google.com/p/extflot/

paulharv
6 May 2010, 12:55 PM
Will do - thanks so much.
By the way - this week has been a week of self-study training, and I've used your book as the basis of the ExtJS parts of this. It's been a huge help, so thanks.

eatinker
17 Mar 2011, 11:02 PM
Is there a solution for this yet in Ext 4.0??
I have multiple series that I'd like to chart all with the same x-axis and y-axis, however they have variable x-axis data points. ie:
{
series1:[{'x': 1, 'y':10}, {'x': 5, 'y': 12}, {'x': 6, 'y':22}, {'x': 8, 'y': 10}],
series2:[{'x': 3, 'y':15}, {'x': 4, 'y': 23}, {'x': 7, 'y':33}, {'x': 8, 'y': 16}]
}

each series is has data points at irregular x intervals. plotting one alone is no problem, but when I combine the data sets to plot together, I'm forced to either put '0' values or interpolated values for all x intervals. Is there a better solution for this now without needed to fudge values?

Thanks

scatman
8 Jun 2011, 5:20 AM
I need to plot variable x-axis time values for each series as well. Does anyone know how to do this?