Google Charts - Google Charts tutorial - Top X Line Chart - chart js - google graphs - google charts examples




What is x line chart?

  • Top X Line chart is based on the area chart and the line between x axis and y axis which is filled with colors to indicate the volume
  • Top X Line Chart is used to drawing line between x axis and y axis which are done in Basic Line Charts.
  • The Columns in Top X Line Chart specifies the column or hierarchy to be displayed on the X-axis.
  • Top X Line Chart selects the check box to specify a maximum number of scale labels to be shown.
  • Top X line chart shows a zoom slider that we can manually manipulate to view the parts of the line chart

Configuration

  • Here the code which is given below shows us the configuration for Top X line chart andwe have used axes.x configuration here to have x-axis on top of the chart.

Sample code

// Set chart options
var options ={
axes:{
x:{
0:{side:'top'}
}
}
};
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
  • The program which is given below shows us the program of Top X line chart which is given below.

Sample code

googlecharts_line_topx.html

 Tryit
<html>
<head>
<title>wikitecgy 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">
functiondrawChart() {
   // 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 = {
chart: {
title: 'Average Temperatures of Cities',
subtitle: 'Source: worldclimate.com'
      },   
hAxis: {
title: 'Month',         
      },
vAxis: {
title: 'Temperature',        
      }, 
      'width':550,
      'height':400,
axes: {
x: {
            0: {side: 'top'}
         }      
      }      
   };

   // Instantiate and draw the chart.
var chart = new google.charts.Line(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 - Top X 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 wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×