Skip to content

Instantly share code, notes, and snippets.

@davidjpfeiffer

davidjpfeiffer/chart-js-line-example.html

Last active July 25, 2016 22:10
Show Gist options
  • Save davidjpfeiffer/d7d1bedbc8084d14f00a18f23f7b1e4b to your computer and use it in GitHub Desktop.
Save davidjpfeiffer/d7d1bedbc8084d14f00a18f23f7b1e4b to your computer and use it in GitHub Desktop.
Download ZIP
This HTML file can be used with Chart JS to create a fully-functional example of the chart.
Raw
chart-js-line-example.html
<!doctype html>
<html>
<head>
<title>Chart Example</title>
<script src="chart.js"></script>
</head>
<body>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<script>
var getRandomDataArray = function () {
var dataArray = [];
for (var i = 0; i < 7; i++) dataArray.push(Math.round(Math.random() * 100));
return dataArray;
}
var chartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : getRandomDataArray()
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : getRandomDataArray()
}
]
}
window.onload = function(){
var chartOptions = { responsive : true };
var chart = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(chart).Line(chartData, chartOptions);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment