Google Charts - Combo Chart Creation - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

  1. HOME
  2. Javascript
  3. Google Chart
  4. Chart Configuration

Description

Google Charts - Combo Chart Creation

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Candlestick Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
   </head> 
   <body> 
      <div id="visualization" style="width: 900px; height: 500px;"></div> 
      <script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {// w w  w .  j  a va 2 s .c  o  m
  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],
  ]);
  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>  
   </body>
</html>

Related Tutorials