Hugo shortcode for Chart.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.9/jquery.csv.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js"></script> | |
<canvas id="{{ .Get "id"}}" width="{{ .Get "width" }}" height="{{ .Get "height" }}"></canvas> | |
<script> | |
var rawCSV = '{{ (.Get "data") }}' | |
var data, labels, dataPoints; | |
var config; | |
function drawCanvas() { | |
config = { | |
type: 'line', | |
scaleFontColor: 'red', | |
data: { | |
labels: labels, | |
datasets: [{ | |
label: 'Recorded HR Value', | |
pointStyle: "circle", | |
data: dataPoints, | |
backgroundColor: "rgba(255, 99, 132, 0.5)", | |
borderColor: "rgba(255, 99, 132, 0.5)", | |
showLine: false, | |
lineTension: 0, | |
borderWidth: 0, | |
pointRadius: 7, | |
pointHoverRadius: 13, | |
}], | |
borderWidth: 1 | |
}, | |
options: { | |
responsive: true, | |
legend: { | |
display: true, | |
labels: { | |
fontColor: 'rgb(255, 99, 132)' | |
}, | |
position: "bottom" | |
}, | |
hover: { | |
mode: 'index' | |
}, | |
scales: { | |
xAxes: [{ | |
type: 'time', | |
time: { | |
displayFormats: { | |
second: 'HH:mm:ss', | |
minute: 'HH:mm:ss', | |
hour: 'HH:mm' | |
} | |
}, | |
display: true, | |
gridLines: { | |
display: false | |
}, | |
ticks: | |
{ | |
fontColor: "#c6cddb" | |
} | |
}], | |
yAxes: [{ | |
display: true, | |
gridLines: { | |
color: '#c6cddb5d' | |
}, | |
ticks: | |
{ | |
fontColor: "#c6cddb" | |
} | |
}] | |
}, | |
title: { | |
display: true, | |
text: 'First Day of Data From the Apple Watch', | |
fontColor: "#c6cddb" | |
} | |
} | |
}; | |
var ctx = document.getElementById('{{ .Get "id" }}').getContext('2d'); | |
window.myLine = new Chart(ctx, config); | |
}; | |
function obtainData() { | |
$.ajax({ | |
type: "GET", | |
url: rawCSV, | |
dataType: "text", | |
success: function (response) { | |
data = $.csv.toObjects(response); | |
labels = _.map(data, 'endDate'); | |
dataPoints = _.map(data, 'value'); | |
drawCanvas(); | |
} | |
}); | |
}; | |
$(document).ready(function () { | |
obtainData(); | |
}); | |
window.onload = function () { | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment