Google charts to have max and min on horizontal axis - Javascript Google Chart

Javascript examples for Google Chart:Axis

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

Description

Google charts to have max and min on horizontal axis

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  w  w w  .j  a va2 s  .c  om*/
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Ugenr.');
  data.addColumn('number', 'Anbefalet pris');
  data.addColumn('number', 'Nuv?rende pris');
  var dataset = [
    [1,  37.8, 41.8],
    [2,  6.6, 32.4],
    [3,  25.4, 25.7],
    [4,  11.7, 10.5],
    [5,  11.9, 6.6],
    [6,   8.8, 7.7],
    [7,   7.6, 9.6],
    [8,  12.3, 10.6],
    [9,  6.6, 14.8],
    [10, 12.8, 11.6],
    [11,  5.3, 4.7],
    [12,  6.6, 5.2],
    [13,  4.8, 3.6],
    [14,  4.2, 3.4],
    [15,  8.8, 31.8],
    [16,  30.9, 6.6],
    [17,  25.4, 25.7],
    [18,  11.7, 10.5],
    [19,  11.9, 10.4],
    [20,   6.6, 7.7],
    [21,   7.6, 9.6],
    [22,  12.3, 10.6],
    [23,  16.9, 14.8],
    [24, 12.8, 11.6],
    [25,  5.3, 4.7],
    [26,  6.6, 5.2],
    [27,  4.8, 3.6],
    [28,  4.2, 6.6],
    [29,  37.8, 41.8],
    [30,  30.9, 32.4],
    [31,  25.4, 25.7],
    [32,  11.7, 10.5],
    [33,  11.9, 10.4],
    [34,   8.8, 7.7],
    [35,   7.6, 9.6],
    [36,  12.3, 10.6],
    [37,  16.9, 14.8],
    [38, 12.8, 11.6],
    [39,  5.3, 4.7],
    [40,  6.6, 5.2],
    [41,  6.6, 3.6],
    [42,  4.2, 6.6],
    [43,  4.2, 3.4],
    [44,  37.8, 41.8],
    [45,  30.9, 32.4],
    [46,  25.4, 25.7],
    [47,  11.7, 10.5],
    [48,  11.9, 6.6],
    [49,   8.8, 7.7],
    [50,   7.6, 9.6],
    [51,  6.6, 10.6],
    [52,  16.9, 14.8]
  ];
  dataset = dataset.map(function(r) {
    return [!((r[0] - 1) % 5) ? r[0] + '' : '', r[1], r[2]];
  });
  data.addRows(dataset);
  var options = {
    chart: {
      title: 'Anbefalede og nuv?rende ugepriser',
      subtitle: 'anbefalede priser = bl?, nuv?rende priser = r?d',
    },
    legend: { position:'none' },
    height: 500,
    explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
  };
  var chart = new google.charts.Line(document.getElementById('linechart_material'));
  chart.draw(data, options);
}
$(window).resize(function(){
  drawChart();
});
    }

      </script> 
   </head> 
   <body> 
      <div id="linechart_material"></div>  
   </body>
</html>

Related Tutorials