1. Import the required js library
<head></head>in<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={ 'modules':[{ 'name':'visualization', 'version':'1', 'packages':['corechart'] }] }"></script>
2. Simple line drawing
<html>
<body>
<div id="chart" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
....
</script>
</body>
</html>Act on a div element:
var chart = new google.visualization.LineChart($('chart')[0]);Form options:
var options = { title: 'Temperature', curveType: 'function', animation: { duration: 1000, easing: 'in' }, legend: { position: 'bottom' } }A DataTable that stores a two-dimensional array
var data = google.visualization.arrayToDataTable([ ['Time', 'Temperature'], [new Date().toLocaleTimeString(), 0] ]);draw:
chart.draw(data, options)