Google Charts - Google Charts tutorial - Basic Line Chart with Customizable line color - 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 with Customizable line color

Configuration

  • Here the code which is given below shows us the configuration for basic line chart with customizable line color and we have added colors configuration to change the default line colors.

Sample Code:

// Set chart options
var options = {
   colors: ['#a52714', '#0000ff', '#ff0000', '#00ff00']
};
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 with customizable line color which is used.

Example

 Tryit<html>
<head>
<title>Wikitechy Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart','line']});  
   </script>
</head>
<body>
<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');
   data.addRows([
      ['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'
      },   
      'width':550,
      'height':400,
      colors: ['#a52714', '#0000ff', '#ff0000', '#00ff00']
   };

   // Instantiate and draw the chart.
   var chart = new google.visualization.LineChart(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output:


Related Searches to Google Charts - Basic Line Chart with Customizable line color