PDA

View Full Version : How to display multidimensional data as Extjs 4 line chart?



pyrliu
3 Jun 2012, 11:36 PM
A problem that I hope community can help with.

I have the following table data:


Country
1997
1998
1999
2000
2001
2002


USA
66
81
83
61
67
68


Canada
53
67
46
45
53
43






I would like to display this data like this:
35894


My problem is that I can only achieve this by modifying to original 2 dimensional data to single dimension format. Example of the store data:


Ext.create("Ext.data.ArrayStore", {
storeId: "chartData",
fields: [
{ name: "year", type: "integer" },
"country1",
{ name: "value1", type: "integer" },
"country2",
{ name: "value2", type: "integer" }
],
data: [
[1997,"USA",66,"Canada",53],
[1998,"USA",81,"Canada",67],
[1999,"USA",83,"Canada",46],
[2000,"USA",61,"Canada",45],
[2001,"USA",67,"Canada",53],
[2002,"USA",68,"Canada",43]
]
});


Link to JSFiddle example: http://jsfiddle.net/pyrliu/JPEEv/2/

Can anybody give any hints or suggestions how I could achieve this chart without converting the data? I would like the store data to be in following format:


Ext.create("Ext.data.ArrayStore", {
storeId: "chartData",
fields: [
"country",
{ name: "1997", type: "integer" },
{ name: "1998", type: "integer" },
{ name: "1999", type: "integer" },
{ name: "2000", type: "integer" },
{ name: "2001", type: "integer" },
{ name: "2002", type: "integer" }
],
data: [
["USA",66,81,83,61,67,68],
["Canada",53,67,46,45,53,43]
]
});


But with my incomplete understanding, I can't get the axis/columns to present this data like in the first diagram example.

Any help in how I could make this store to be displayed as working line chart?

I'm hoping to build a service for our municipals to upload their statistic data as csv-files and the service would then display them as ExtJS charts. But I would not like to modify this data from 2-dimension to 1-dimension just to display it in a chart.

mitchellsimoens
7 Jun 2012, 1:20 PM
Currently you need to have each record be a horizontal item so each line is it's own field in each record.

pyrliu
7 Jun 2012, 10:52 PM
Thanks for the clarification.

I realized that I have to offer a pivot tool for users uploading this sort of data if the data is to be displayed as a chart.

mandak
6 Dec 2012, 7:51 AM
Hi,
I have a similar problem where i do need to display the count of products sold on each date (limited to 1 week, x-axis shown as date) and the product should be shown as legend. I am a newbie to extjs and charts and finding it difficult. Can you please provide a code sample on how to achieve this. Appreciate your help.
Thanks,
Kiran.