End to end series in google charts - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

End to end series in google charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Google Chart line annot</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
      <div id="chart_div" style="width: 900px; height: 500px;"></div> 
      <div id="img"></div> 
      <script type="text/javascript">
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {/*from  w w w  .  ja  v  a  2s. c o  m*/
  var data = google.visualization.arrayToDataTable([
    ['Machine', '', {
      role: 'style'
    }, '', {
      role: 'style'
    }, '', {
      role: 'style'
    }, '', {
      role: 'style'
    }, 'target1', 'target2', 'target3'],
    [0.5, null, null, null, null, null, null, null, null, 0.067, 0.15, 0.25],
    [1.0, 0.05, "#808080", 0.0775, "#C71585", 0.069, "#FFC0CB", 0.05, "Blue", 0.067, 0.15, 0.25],
    [2.0, 0.05, "Yellow", 0.0775, "Pink", 0.069, "#808080", 0.05, "Green", 0.067, 0.15, 0.25],
    [2.5, null, null, null, null, null, null, null, null, 0.067, 0.15, 0.25]
  ]);
   var min = data.getColumnRange(0).min;
  var max = data.getColumnRange(0).max;
   console.log(min, max)
  var options = {
    width: 500,
    height: 500,
    legend: {
      position: 'none',
      maxLines: 6,
      textStyle: {
        color: 'black',
        fontSize: 10
      }
    },
    isStacked: true,
    seriesType: 'bars',
    series: {
      4: {
        type: "line",
        color: '#FF0000',
        visibleInLegend: false,
        lineDashStyle: [4, 4]
      },
      5: {
        type: "line",
        color: '#FF0000',
        visibleInLegend: false,
        lineDashStyle: [4, 4]
      },
      6: {
        type: "line",
        color: '#FF0000',
        visibleInLegend: false,
        lineDashStyle: [4, 4]
      }
    },
    hAxis: {
      format: 'Machine #',
      ticks: [1, 2],
      viewWindow: {
        min: min,
        max: max
      }
    },
  };
  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

Related Tutorials