mmann1123
mmann1123

Reputation: 5295

Google Charts - Combo Chart Example Issue

This is probably a simple fix, but I can't see what is going wrong. I am trying to use a bit of code from Candlesticks is always on top of lines in combo chart google chart and https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart. I have tried placing it in my html code (this works for other examples) but its not working in this case. Just wondering if you can help me debug it.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);



function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Day');
  data.addColumn('number', 'Dummy');
  data.addColumn('number', 'Range');
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn('number', 'Trend');
  data.addRows([
    ['Mon', 28, 10, -8, 17, 42.8],
    ['Tue', 38, 17, -7, 28, 47.5],
    ['Wed', 55, 22, -5, 25, 52.2],
    ['Thu', 66, 11, -16, 11, 56.9],
    ['Fri', 22, 44, -7, 44, 61.6],
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Monthly Coffee Production by Country',
    width: 600,
    height: 400,
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    isStacked: true,
    seriesType: "bars",
    series: {0: {color: 'transparent'}, 2: {type: "line"}}
  });
}



    </script>
  </head>
  <body>
  </body>
</html>

Upvotes: 2

Views: 2780

Answers (1)

OrionMelt
OrionMelt

Reputation: 2601

Your HTML body doesn't contain an element called visualization - this is where the chart is inserted in the below line:

var ac = new google.visualization.ComboChart(document.getElementById('visualization'));

Here's a fiddle: http://jsfiddle.net/s2nya2Lv/

Does this solve your problem, or is there another problem? Your question doesn't clearly explain what exactly the problem is.

Upvotes: 4

Related Questions