An Example of a Google Bar Chart
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><div id="chart_div"></div>
CSS
#chart_div svg g circle {
stroke: #4184F3 !important;
fill-opacity: 1;
r:5;
fill: #4184F3 !important;
filter: none !important;
}
#chart_div svg g circle:hover {
r:8
}
#chart_div svg g path {
stroke-width: 4 !important;
stroke: #4184F3 !important;
stroke-linejoin: bevel;
stroke-width: 1;
stroke-linecap: round;
filter: none !important;
}
JavaScript
google.charts.load('current', {packages: [ 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[new Date(2015,9,28), 6],
[new Date(2015,9,29), 10],
[new Date(2015,9,30), 19],
[new Date(2015,10,0), 1],
[new Date(2015,10,1), 16],
]);
var options = {
focusTarget: 'category',
colors: ["#4184F3"],
lineWidth: 3,
hAxis: {
pointSize: 2,
format: 'MMM d',
title: '',
titlePosition: 'none'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.charts.Line(document.getElementById('chart_div'));
//chart.draw(data, options);
chart.draw(data, google.charts.Line.convertOptions(options));
}