line chart with ChartJS
HTML
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="server-usage" style="background-color: #565a60;"></canvas>
JavaScript
Chart.defaults.global = {
// Boolean - Whether to animate the chart
animation: false,
// Number - Number of animation steps
animationSteps: 60,
// String - Animation easing effect
// Possible effects are:
// [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
// easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
// easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
// easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
// easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
// easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
// easeOutElastic, easeInCubic]
animationEasing: "easeInOutQuart",
// Boolean - If we should show the scale at all
showScale: true,
// String - Colour of the scale line
scaleLineColor: "#565a60",
// Number - Pixel width of the scale line
scaleLineWidth: 0.1,
// Boolean - Whether to show labels on the scale
scaleShowLabels: true,
// Interpolated JS string - can access value
scaleLabel: function (d) {
if (d.value < 0)
return '';
else
return d.value + ' ';
},
// Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
scaleIntegersOnly: true,
// Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero: false,
// String - Scale label font declaration for the scale label
scaleFontFamily: "'Open Sans', sans-serif",
// Number - Scale label font size in pixels
scaleFontSize: 13,
// String - Scale label font weight style
scaleFontStyle: "500",
// String - Scale label font colour
scaleFontColor: "#7c8189",
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean -...