57 lines
1.5 KiB
HTML
57 lines
1.5 KiB
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
|
<div id="chart_div" style="width: 1600px; height: 1000px;"></div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
google.charts.load('current', {
|
|
packages: ['corechart']
|
|
}).then(function () {
|
|
// create chart
|
|
var container = $('#chart_div').get(0);
|
|
var chart = new google.visualization.ColumnChart(container);
|
|
var options = {
|
|
legend: {
|
|
position: 'top'
|
|
}
|
|
};
|
|
|
|
// create data table
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Player');
|
|
data.addColumn('number', 'MotM');
|
|
data.addColumn('number', 'DotD');
|
|
|
|
// get data
|
|
$.ajax({
|
|
url: 'poty-results',
|
|
dataType: 'json'
|
|
}).done(function (jsonData) {
|
|
loadData(jsonData);
|
|
}).fail(function (jqXHR, textStatus, errorThrown) {
|
|
var jsonData = [{"motm_{{ _matchDate }}": 1, "playerName": "ERVINE Jonathan Desmond", "dotd_{{ _matchDate }}": 0}, {"motm_{{ _matchDate }}": 0, "playerName": "MCDONAGH Jerome Michael", "dotd_{{ _matchDate }}": 1}];
|
|
loadData(jsonData);
|
|
});
|
|
|
|
// load json data
|
|
function loadData(jsonData) {
|
|
$.each(jsonData, function(index, row) {
|
|
data.addRow([
|
|
row.playerName,
|
|
row.motmTotal,
|
|
row.dotdTotal
|
|
]);
|
|
});
|
|
drawChart();
|
|
}
|
|
|
|
// draw chart
|
|
$(window).resize(drawChart);
|
|
function drawChart() {
|
|
chart.draw(data, options);
|
|
}
|
|
});
|
|
|
|
</script>
|