Create combo bar chart and line chart - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Create combo bar chart and line chart

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"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="chart_div" style="width: 900px; height: 500px;"></div> 
      <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
  function drawChart() {// w w  w  .j a  v a  2s.  co m
    var data = google.visualization.arrayToDataTable([
      ['Mon', 20, -28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, -77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, -66, 22, 15]
    ], true);
    var options = {
      legend:'none'
      , vAxis: { ticks: [-80,-40,0,40,80] }
    };
    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

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

Related Tutorials