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

google line chart optionsgoogle line chart multiple seriesgoogle charts color palettegoogle chart color based on valuegoogle column chart different colorsgoogle chart colorsgoogle pie chart colorsgoogle sheets dashed linegoogle pie chart makergoogle pie chart legend with valuespie chart htmlgoogle charts colorsgoogle line chart optionsgoogle charts background colorgoogle chart options examplegoogle charts options list

Summer Offline Internship

Summer Online Internship

Internship in Chennai

Programming / Technology Internship in Chennai

Wikitechy Rated 5 / 5 based on 378284 reviews.
Wikitechy-logo

World's No 1 Animated self learning Website with Informative tutorials explaining the code and the choices behind it all.

Wikitechy

About Us
Terms of Use
Privacy Policy
Contact Us

Workshop

Webinar

Join our Community

Advertise

Other Languages

English
Chinese
Deutsch
Russian

© 2016 - 2024 KaaShiv InfoTech, All rights reserved. Powered by Inplant Training in chennai | Internship in chennai