Google line Charts with dotted line - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Google line Charts with dotted line

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Line Chart Example</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','packages':['corechart']}]}"></script> 
      <div id="ex8"></div> 
      <script type="text/javascript">
            google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {//  w w w.  j av  a  2 s . c  o m
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Dogs');
      data.addColumn({type: 'string', role: 'style'});
      data.addColumn('number', 'Cats');
      data.addRows([
          [0, 0, '', 80],
          [1, 10,'', 75],
          [2, 23, 'stroke-color:transparent',72],
          [3, 44, '', 37]
      ]);
      var options = {
        width: 1000,
        height: 563,
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Popularity'
        },
        colors: ['#a52714', '#097138'],
          pointSize: 9,
        series: {
          0: {
            lineWidth: 5,
            lineDashStyle: [5, 1, 5]
          },
          1: {
            lineWidth: 3,
            lineDashStyle: [7, 2, 4, 3]
          }
        }
      };
      var chart = new google.visualization.LineChart(document.getElementById('ex8'));
      chart.draw(data, options);
    }

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

Related Tutorials