ScatterChart or...??

7 views
Skip to first unread message

Shark986

unread,
Apr 26, 2012, 6:44:06 AM4/26/12
to Google Visualization API
Hi All!!

I need to show a chart with theese informations:
- On the y-axis a 0-50 scale
- On the x-axis a list of combination of customer-year
- For every customer-year, more values of the 0-50 scale
- (if possible) A label for every 0-50 value

Example of data (without labels):
CustomerA-2010: 9, 10, 8, 15
CustomerA-2011: 10, 15, 12, 11, 14
CustomerB-2010: 12, 20, 15, 18, 19, 17
CustomerB-2011: 26, 21, 15, 16, 18, 17, 20
CustomerC-2011: 17

At this moment I'm using a ScatterChart, but i can't use the customer-
year combination for the x-axis (I have to use numbers), so I use a
legend to show that the columnX is a specific customer-year
combination.

This is the code I'm using:

var tab = new google.visualization.DataTable();
tab.addColumn('number', 'CustomerA-2010');
tab.addColumn('number', 'CustomerA-2011');
tab.addColumn('number', 'CustomerB-2010');
tab.addColumn('number', '0-50 Value');

var rows = "1,22°1,45°2,47°2,38°2,44°3,23".split("°");
var row;
for (var i in rows) {
row = rows[i].trim().split(",");

switch (row[0]) {
case '1':
tab.addRow(new Array(parseInt(row[0]),
parseFloat(row[1]), null, null));
break;
case '2':
tab.addRow(new Array(parseInt(row[0]), null,
parseFloat(row[1]), null));
break;
case '3':
tab.addRow(new Array(parseInt(row[0]), null,
null, parseFloat(row[1])));
break;
}
}

var opzioni = {
height: 450,
vAxis: { minValue: 0, maxValue: 50 },
hAxis: { minValue: 1, maxValue: 3 },
legend: 'bottom'
};

var chart = new
google.visualization.ScatterChart(document.getElementById('div_popup_content'));
chart.draw(tab, opzioni);

Is there a better solution?
I will appreciate any suggest!

PS: Excuse for my English!!

asgallant

unread,
Apr 26, 2012, 11:44:02 AM4/26/12
to google-visua...@googlegroups.com
Sorry, but since the Scatter charts only support numeric axes, you can't change the labels to something text-based.  You also cannot label individual data points.

Shark986

unread,
Apr 27, 2012, 3:36:00 AM4/27/12
to Google Visualization API
Thank you asgallant :)
On your experience, may be there is a better chart solution for me or
the ScatterChart is the right way?
Thanks again!

asgallant

unread,
Apr 27, 2012, 9:36:30 AM4/27/12
to google-visua...@googlegroups.com
Is the customer-year combo a requirement for your axis values?  What if you made the axis years only, and used different data series for each customer?  Like this: http://jsfiddle.net/Cy75q/1/ 
Reply all
Reply to author
Forward
0 new messages