<div class="chart-container" id="line-chart"></div>
<script>
(function() {
// Cache the container element
var containerElem = document.getElementById('line-chart');
// Stop if it’s not there
if (!containerElem) return;
// Set a callback to run when the API is loaded
google.charts.setOnLoadCallback(drawChart);
// Config & draw chart
function drawChart() {
// Data
var data = google.visualization.arrayToDataTable([
['Month', 'Bottles sold'],
['Jan', 454],
['Feb', 116],
['Mar', 559],
['Apr', 540],
['May', 460],
['Jun', 977],
['Jul', 874],
['Aug', 747],
['Sep', 236],
['Oct', 445],
]);
// Options
var options = {
legend: {
position: 'none'
},
};
// Draw
var chart = new google.charts.Line(containerElem);
chart.draw(data, options);
}
// Redraw chart on window resize
window.addEventListener('resize', function() {
drawChart();
});
})();
</script>
{{> @chart-container id="line-chart"}}
<script>
(function () {
// Cache the container element
var containerElem = document.getElementById('line-chart');
// Stop if it’s not there
if (!containerElem) return;
// Set a callback to run when the API is loaded
google.charts.setOnLoadCallback(drawChart);
// Config & draw chart
function drawChart() {
// Data
var data = google.visualization.arrayToDataTable([
['Month' ,'Bottles sold'],
['Jan' ,454],
['Feb' ,116],
['Mar' ,559],
['Apr' ,540],
['May' ,460],
['Jun' ,977],
['Jul' ,874],
['Aug' ,747],
['Sep' ,236],
['Oct' ,445],
]);
// Options
var options = {
legend: { position: 'none' },
};
// Draw
var chart = new google.charts.Line(containerElem);
chart.draw(data, options);
}
// Redraw chart on window resize
window.addEventListener('resize', function() {
drawChart();
});
})();
</script>
/* No context defined. */
Please https://developers.google.com/chart/interactive/docs/gallery/linechart for usage.