Line Chart Example

An example of a Google Line Chart.

by seemly

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="visualization" style="width: 900px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
          // Create and populate the data table.
          var data = google.visualization.arrayToDataTable([
              ['x', 'Data 1', 'Data 2', 'Data 3'],
              ['A', 1, 1, 0.5],
              ['B', 2, 0.5, 1],
              ['C', 4, 1, 0.5],
              ['D', 8, 0.5, 1],
              ['E', 7, 1, 0.5],
              ['F', 7, 0.5, 1],
              ['G', 8, 1, 0.5],
              ['H', 4, 0.5, 1],
              ['I', 2, 1, 0.5],
              ['J', 3.5, 0.5, 1],
              ['K', 3, 1, 0.5],
              ['L', 3.5, 0.5, 1],
              ['M', 1, 1, 0.5],
              ['N', 1, 0.5, 1]
          ]);

          // Create and draw the visualization.
          new google.visualization.LineChart(document.getElementById('visualization')).
          draw(data, {
              vAxes: [{
                  title: 'Title 1',
                  titleTextStyle: {
                      color: '#FF0000'
                  },
                  maxValue: 10
              }, // Left axis
              {
                  title: 'Title 2',
                  titleTextStyle: {
                      color: '#FF0000'
                  },
                  maxValue: 20
              } // Right axis
              ],
              series: [{
                  targetAxisIndex: 1
              }, {
                  targetAxisIndex: 0
              }],
          });

      }