Google Charts tutorial - Google Chart Basic Line Chart with curved lines - chart js - google graphs - google charts examples




What is curved lines in line chart?

  • To use a straight line or a curved line between data points because you have no data to tell you what the shape of the line should be.
  • While a curved line suggests, a straight line suggests that the value between the two measurements increased linearly

Sample Code

// Set chart options
var options = {
   curveType: 'function'
};
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 curved lines which is used.

Program:

googlecharts-line-curve.html

 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,
      curveType: 'function'
   };

   // 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 Chart - Basic Line Chart with curved lines

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 wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×