Google Chart - google chart tutorial - Basic Line Chart - chart js - google graphs - google charts examples

What is Basic Line Chart?

  • Basic line chart is based on the area chart and the line between axis and area is filled with colors to indicate volume
  • Basic Line charts are used for drawing line and spline based charts which are done in Basic Line Charts.
  • Basic Line charts are used to compare changes over time between two groups
  • Basic Line Chart have system changes when the measure shows a complete shift to a different level
  • Basic Line Chart have variations in both the normal range in which data is expected to fluctuate over time and outlying data points that merit investigating the data points.
 Basic Line Chart

Learn Google Charts - Google Charts tutorial - Basic Line Chart - Google Charts examples - Google Charts programs


  • Here the code which is given below shows us the configuration for basic line chart


//Line chart
var chart = new google.visualization.LineChart(document.getElementById('container'));
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
  • The program which is given below shows us the full program of basic line chart which is used.




<title>Google Charts Tutorial</title>
   <script type="text/javascript" src=""></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart','line']});  
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('string', 'Month');
   data.addColumn('number', 'Tokyo');
   data.addColumn('number', 'New York');
   data.addColumn('number', 'Berlin');
   data.addColumn('number', 'London');
      ['Jan',  7.0, -0.2, -0.9, 3.9],
      ['Feb',  6.9, 0.8, 0.6, 4.2],
      ['Mar',  9.5,  5.7, 3.5, 5.7],
      ['Apr',  14.5, 11.3, 8.4, 8.5],
      ['May',  18.2, 17.0, 13.5, 11.9],
      ['Jun',  21.5, 22.0, 17.0, 15.2],
      ['Jul',  25.2, 24.8, 18.6, 17.0],
      ['Aug',  26.5, 24.1, 17.9, 16.6],
      ['Sep',  23.3, 20.1, 14.3, 14.2],
      ['Oct',  18.3, 14.1, 9.0, 10.3],
      ['Nov',  13.9,  8.6, 3.9, 6.6],
      ['Dec',  9.6,  2.5,  1.0, 4.8]
   // Set chart options
   var options = {'title' : 'Average Temperatures of Cities',
      hAxis: {
         title: 'Month'
      vAxis: {
         title: 'Temperature'

   // Instantiate and draw the chart.
   var chart = new google.visualization.LineChart(document.getElementById('container'));
   chart.draw(data, options);
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team


Related Searches to Google Chart - Basic Line Chart

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add to your ad blocking whitelist or disable your adblocking software.