Stacked area chart legend reversed
67 views
Skip to first unread message
JerJones
Feb 13, 2009, 9:31:28 AM2/13/09
to Google Visualization API
Hi,
I have noticed that when I create a stacked area chart, the display of
the values on the graph appears the opposite of the order on the
legend. I think I can see why this is but I'm wondering if I can
change this condition with an option or of it's a bug etc?
For example, a simple stacked area chart like this:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("visualization", "1", {packages:["areachart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date range');
data.addColumn('number', 'site1');
data.addColumn('number', 'site2');
data.addColumn('number', 'site3');
data.addRows(5);
for (var e = 1; e <= 5; ++e) {
data.setValue(e - 1, 0, "Day " + e);
data.setValue(e - 1, 1, e * 100);
data.setValue(e - 1, 2, e * 200);
data.setValue(e - 1, 3, e * 300);
}
var chart = new google.visualization.AreaChart
(document.getElementById('chartdiv'));
var options = {width: 1000, height: 500, legend: 'right',
isStacked: true};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
When this is viewed in the browser 'site 1' appears at the bottom of
the data area, along the x axis, but it's listed first in the list on
the legend. Similarly 'site 3' is at the top of the data area but the
bottom of the legend. The ordering problem quickly becomes more
difficult to decipher when you add more and more lines to the graph.
It would presumably act this way because it's drawn from bottom to top
in the order on the legend. However the stacked area graph might be
more intuitive and useful if the legend order roughly matched the
stack order on the graph.
I'd be grateful if there's an option or other setting/feature that
would allow me to make the legend order be displayed the same as the
'stack' order.
Thanks!
---
www.jeremyjones.com
I have noticed that when I create a stacked area chart, the display of
the values on the graph appears the opposite of the order on the
legend. I think I can see why this is but I'm wondering if I can
change this condition with an option or of it's a bug etc?
For example, a simple stacked area chart like this:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("visualization", "1", {packages:["areachart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date range');
data.addColumn('number', 'site1');
data.addColumn('number', 'site2');
data.addColumn('number', 'site3');
data.addRows(5);
for (var e = 1; e <= 5; ++e) {
data.setValue(e - 1, 0, "Day " + e);
data.setValue(e - 1, 1, e * 100);
data.setValue(e - 1, 2, e * 200);
data.setValue(e - 1, 3, e * 300);
}
var chart = new google.visualization.AreaChart
(document.getElementById('chartdiv'));
var options = {width: 1000, height: 500, legend: 'right',
isStacked: true};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
When this is viewed in the browser 'site 1' appears at the bottom of
the data area, along the x axis, but it's listed first in the list on
the legend. Similarly 'site 3' is at the top of the data area but the
bottom of the legend. The ordering problem quickly becomes more
difficult to decipher when you add more and more lines to the graph.
It would presumably act this way because it's drawn from bottom to top
in the order on the legend. However the stacked area graph might be
more intuitive and useful if the legend order roughly matched the
stack order on the graph.
I'd be grateful if there's an option or other setting/feature that
would allow me to make the legend order be displayed the same as the
'stack' order.
Thanks!
---
www.jeremyjones.com
VizGuy
Feb 15, 2009, 12:05:16 PM2/15/09
to google-visua...@googlegroups.com
Hi,
Added to our feature request list.
Added to our feature request list.
Lucero del Alba
Jan 10, 2013, 1:51:07 PM1/10/13
to google-visua...@googlegroups.com
Just for the record, the isStacked flag is still reversing the order of the legend http://jsfiddle.net/asgallant/QpMRJ/
Reply all
Reply to author
Forward
0 new messages