Skip to content

Instantly share code, notes, and snippets.

@romant
Last active January 1, 2019 23:32
Show Gist options
  • Save romant/e7262a5b9e2f3b9e2bc0ac8c46a1282e to your computer and use it in GitHub Desktop.
Save romant/e7262a5b9e2f3b9e2bc0ac8c46a1282e to your computer and use it in GitHub Desktop.
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