CODEWITHSUNDEEP
htmlgoogle-visualization
Manoj
Manoj

Reputation: 5612

google chart stacking not working

Here is my HTML

<html>
<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var jsonDataObj = {
"rows":[
{"c":[{"v":"2001"},{"v":"43"},{"v":"43"}]},
{"c":[{"v":"2002"},{"v":"43"},{"v":"43"}]},
{"c":[{"v":"2003"},{"v":"43"},{"v":"43"}]},
{"c":[{"v":"2004"},{"v":"43"},{"v":"43"}]}
],
"cols":[
{"id":"","label":"Year","type":"string"},
{"id":"","label":"profits","type":"number"}, 
{"id":"","label":"expenses","type":"number"}
]
};
function drawChart() {
var jsonData = jsonDataObj;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 800, height: 480,
//isStacked:true,
title: 'Company Performance'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

If I enable isStacked option the pictuer shown is completely wrong enter image description here

if I disable it the chart is fine enter image description here

Let me know how to get the stacking to work.

Upvotes: 0

Views: 2797

Answers (3)

Yevgeniy Afanasyev
Yevgeniy Afanasyev

Reputation: 41350

Another option would be using Google Image Charts.

And it is good because

1) it will work in all browsers including old ones, as it is a picture.

2) You can do Bullet Charts with it, when there is no option to do "Bullet Charts" in new Google Charts, and even the plain Diff Charts styled as "Bar and Column" does not work in latest versions of Firefox (I tried version 39).

Here is great example:

enter image description here

Read more about Google Image Charts here:

https://developers.google.com/chart/image/?hl=en

Upvotes: 0

Yevgeniy Afanasyev
Yevgeniy Afanasyev

Reputation: 41350

Please, have a look at this example https://jsfiddle.net/912jggdw/

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawStacked);

function drawStacked() {
        var data = new google.visualization.arrayToDataTable([
          ["Category",    "A", "Total"    ],
          ["Planned",  500,        500       ],
          ["Achieved",  400,       600       ]
        ]);

      var options = {
        width: 300,
        height: 400,
        legend: {position: "none"},
        bar: { groupWidth: '75%' },
        isStacked: true,
      };


      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div"></div>

Upvotes: 0

Serg
Serg

Reputation: 606

after some testings I found the reason of the bug: you defined a strings in data instead of numbers, fixed page below:

<html>
<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var jsonDataObj = {
"rows":[
{"c":[{"v":"2001"},{"v":65},{"v":40}]},
{"c":[{"v":"2002"},{"v":67},{"v":43}]},
{"c":[{"v":"2003"},{"v":80},{"v":35}]},
{"c":[{"v":"2004"},{"v":97},{"v":47}]}
],
"cols":[
{"id":"","label":"Year","type":"string"},
{"id":"","label":"profits","type":"number"}, 
{"id":"","label":"expenses","type":"number"}
]
};


function drawChart() {
var jsonData = jsonDataObj;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 800,
height: 480,
isStacked: true,
title: 'Company Performance'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

Upvotes: 1

Related Questions