<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
If you want to have the Chart.js files on your server, download the ZIP from https://github.com/nnnick/<script src="/relative/path/to/Chart.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
So now your page should look like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first Chart</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
</head>
<body>
</body>
</html>
Nothing flash yet… so what's next?
<canvas id="myChart" width="400" height="400"></canvas>
We've now got something to work with so let's turn to the JavaScript
function getChart() {
var ctx = $("#myChart")[0].getContext("2d");
return new Chart(ctx);
}
Then to create a Line chart it's as easy as:
getChart().Line(data, options);
And it's the same for the other charts:
getChart().Bar(data, options);
getChart().Radar(data, options);
getChart().PolarArea(data, options);
getChart().Pie(data, options);
getChart().Doughnut(data, options);
NOTE: It's important that these functions cannot be called unless the page has completely loaded first so either put these either in a [script] tag at the bottom of the page (just before the close []/body] element) OR in jQuery's initialization routine $(function() {...}); and include that in another [script] tag either last in the [head] (after the other [script] tags) or just before the []/body] tag. Now our page looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first Chart</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script>
function getChart() {
var ctx = $("#myChart")[0].getContext("2d");
return new Chart(ctx);
}
</script>
<script>
$(function() {
getChart().Line(data, options);
}
</script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
NOTE: This will NOT work until we define the two variables data and options! These variables are JavaScript objects (JSON) that give meaning to your chart. The next two sections describe these in more detail.
var data = {
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: [65, 59, 80, 81, 56, 55, 40]
},
{
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: [28, 48, 40, 19, 86, 27, 90]
}
]
};
For Polar Area, Pie and Doughnut, the data structure is simply an array. Each element in this array is a JavaScript object (JSON) with properties value, color, highlight, label that describe each value.
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
var tmp1 = "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>";
var tmp2 = "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>";
// for Bar, Line and Radar charts
var options = { legendTemplate: tmp1 };
var mychart = getChart().Line(data, );
---------------------------------------
// for Polar Area, Pie and Doughnut charts
var options = { legendTemplate: tmp2 };
var mychart = getChart().Pie(data, options);
Then to make the template show, add a [div] element to your page where you'd like it to appear:
<div id="chartLegend"></div>
Then when you create the chart, you also set the legend like this:
$("#chartLegend").html(mychart.generateLegend());
How you style the legend is up to you. In the examples, it creates an unordered list so the following style is useful for making a basic, user-friendly legend:
#chartLegend ul {
list-style: none;
}
#chartLegend li {
float: left;
margin-right: 10px;
min-height: 35px;
}
#chartLegend li > span {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first Chart</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<style>
#chartLegend ul {
list-style: none;
}
#chartLegend li {
float: left;
margin-right: 10px;
min-height: 35px;
}
#chartLegend li > span {
padding: 5px;
}
</style>
<script>
function getChart() {
var ctx = $("#myChart")[0].getContext("2d");
return new Chart(ctx);
}
</script>
<script>
$(function() {
// Set some Chart defaults
Chart.defaults.global.animation = false;
// define the data for the Line Chart
var data = {
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: [65, 59, 80, 81, 56, 55, 40]
},
{
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: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var tmp1 = "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>";
// define some options to have sharp straight lines (not curve at the data points)
var options = {
bezierCurve:false,
legendTemplate: tmp1
};
// Create the Line Chart
var mychart = getChart().Line(data, options);
$("#chartLegend").html(mychart.generateLegend());
});
</script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<div id="chartLegend"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first Chart</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<style>
#chartLegend ul {
list-style: none;
}
#chartLegend li {
float: left;
margin-right: 10px;
min-height: 35px;
}
#chartLegend li > span {
padding: 5px;
}
</style>
<script>
function getChart() {
var ctx = $("#myChart")[0].getContext("2d");
return new Chart(ctx);
}
</script>
<script>
$(function() {
// Set some Chart defaults
Chart.defaults.global.animation = false;
// define the data for the Pie Chart
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
var tmp2 = "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>";
// define some options to have sharp straight lines (not curve at the data points)
var options = {
legendTemplate: tmp2
};
// Create the Line Chart
var mychart = getChart().Pie(data, options);
$("#chartLegend").html(mychart.generateLegend());
});
</script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<div id="chartLegend"></div>
</body>
</html>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)