43 lines
1.7 KiB
JSON
Executable File
43 lines
1.7 KiB
JSON
Executable File
<!-- required files -->
|
|
<script src="../assets/plugins/chart.js/dist/chart.umd.js"></script>
|
|
|
|
<!-- html -->
|
|
<canvas id="line-chart"></canvas>
|
|
|
|
<!-- script -->
|
|
<script>
|
|
Chart.defaults.color = 'rgba('+ app.color.componentColorRgb + ', .65)';
|
|
Chart.defaults.font.family = app.font.family;
|
|
Chart.defaults.font.weight = 500;
|
|
Chart.defaults.scale.grid.color = 'rgba('+ app.color.componentColorRgb + ', .15)';
|
|
Chart.defaults.scale.ticks.backdropColor = 'rgba('+ app.color.componentColorRgb + ', 0)';
|
|
|
|
var randomScalingFactor = function() {
|
|
return Math.round(Math.random()*100)
|
|
};
|
|
|
|
var ctx = document.getElementById('line-chart').getContext('2d');
|
|
var lineChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [{
|
|
label: 'Dataset 1',
|
|
borderColor: app.color.blue,
|
|
pointBackgroundColor: app.color.componentBg,
|
|
pointRadius: 4,
|
|
borderWidth: 2,
|
|
backgroundColor: 'rgba('+ app.color.blueRgb + ', .3)',
|
|
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
|
}, {
|
|
label: 'Dataset 2',
|
|
borderColor: 'rgba('+ app.color.componentColorRgb + ', .75)',
|
|
pointBackgroundColor: app.color.componentBg,
|
|
pointRadius: 4,
|
|
borderWidth: 2,
|
|
backgroundColor: 'rgba('+ app.color.componentColorRgb + ', .5)',
|
|
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
|
}]
|
|
}
|
|
});
|
|
</script> |