Skip to content

Instantly share code, notes, and snippets.

@theredstapler

theredstapler/chart.js tutorial

Created March 15, 2016 14:04
Show Gist options
  • Save theredstapler/3157dab67e41e62248e0 to your computer and use it in GitHub Desktop.
Save theredstapler/3157dab67e41e62248e0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chart.js tutorial
<html>
<head>
<script src="chart.js"></script>
</head>
<body>
<canvas id="mycanvas" width="400" height="400"></canvas>
<script>
var chrt = document.getElementById("mycanvas").getContext("2d");
var myarr = [65, 59, 80, 81, 56, 55, 40];
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"], //x-axis
datasets: [
{
label: "My First dataset", //optional
fillColor: "rgba(220,220,220,0.8)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40] // y-axis
},
{
label: "My Second dataset", //optional
fillColor: "rgba(220,120,220,0.8)",
strokeColor: "rgba(220,120,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: myarr
}
]
};
var myFirstChart = new Chart(chrt).Bar(data);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment