Fix overlap issue in Google Visualization with Materials Line - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Fix overlap issue in Google Visualization with Materials Line

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <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> 
      <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {//from   w  w  w .  j a v a  2s . c o  m
      var userArray = [
        'x',
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
        'g',
        'h',
        'i',
        'k'
      ];
      var data = new google.visualization.DataTable();
      for (var i = 0; i < userArray.length ; i++) {
          data.addColumn('number', userArray[i]);
      }
      data.addRows([
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [1, 0, 1, 0, 0, 1, 2, 0, 1, 0, 0],
            [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          ]);
      var options = {
        focusTarget: 'category',
        width: 1000,
        height: 563,
        hAxis: {
          title: 'Date'
        },
        vAxis: {
          title: 'item'
        },
        series: {
          1: {
            curveType: 'function'
          }
        }
      };
      var chart = new google.visualization.LineChart(document.getElementById('ex2'));
      chart.draw(data, options);
    }
  
      </script> 
      <div id="ex2"></div>  
   </body>
</html>

Related Tutorials