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>