Google Charts - Google Charts tutorial - Basic Line Chart with Customizable line style - chart js - google graphs - google charts examples
What is Customizable line style ?
- Custom Line Styles. Revu comes preloaded with several default line styles and a line style editor allowing users to create their own line styles. Line styles are collected in sets for easy organization and can contain multiple lines, text and vector content.
Learn google charts - google charts tutorial - customizable line style - google charts examples - google charts programs
Basic Line Chart with Customizable line style
Configuration
- Here the code which is given below shows us the configuration for basic line chart with Customizable line style and we have added lineWidth and lineDashStyle configurations to customizable line style.
Sample Code:
// Set chart options
var options ={
series:{
0:{
lineWidth:10,
lineDashStyle:[5,1,5]
},
1:{
lineWidth:5,
lineDashStyle:[7,2,4,3]
}
}
};
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 style which is given below
Sample code:
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">
functiondrawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
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],
]);
// Set chart options
var options = {'title' : 'Average Temperatures of Cities',
hAxis: {
title: 'Month'
},
vAxis: {
title: 'Temperature'
},
'width':550,
'height':400,
series: {
0: {
lineWidth: 10,
lineDashStyle: [5, 1, 5]
},
1: {
lineWidth: 5,
lineDashStyle: [7, 2, 4, 3]
}
}
};
// 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>