Chart JS

<!-- HTML -->
<canvas class="chartjs fullwidth height-300" id="lineChartCanvas" width="547" height="300"></canvas>


<!-- PAGE LEVEL SCRIPTS -->
loadScript(plugin_path + 'chart.chartjs/Chart.min.js', function() {
	var lineChartCanvas = {
		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,90,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,96,27,100]
			}
		]
	};

	var ctx = document.getElementById("lineChartCanvas").getContext("2d");
	new Chart(ctx).Line(lineChartCanvas);
});

<!-- HTML -->
<canvas class="chartjs fullwidth height-300" id="barChartCanvas" width="547" height="300"></canvas>


<!-- PAGE LEVEL SCRIPTS -->
loadScript(plugin_path + 'chart.chartjs/Chart.min.js', function() {
	var barChartCanvas = {
		labels:["January","February","March","April","May","June","July"],
		datasets:[
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,0.8)",
				highlightFill: "rgba(220,220,220,0.75)",
				highlightStroke: "rgba(220,220,220,1)",
				data : [65,59,90,81,56,55,50]
			}
		]
	};

	var ctx = document.getElementById("barChartCanvas").getContext("2d");
	new Chart(ctx).Bar(barChartCanvas);
});

<!-- HTML -->
<canvas class="chartjs height-300" id="polarAreaChartCanvas" width="547" height="300"></canvas>


<!-- PAGE LEVEL SCRIPTS -->
loadScript(plugin_path + 'chart.chartjs/Chart.min.js', function() {
	var polarAreaChartCanvas = [
		{
			value : 62,
			color: "#D97041"
		},
		{
			value : 70,
			color: "#C7604C"
		},
		{
			value : 41,
			color: "#21323D"
		},
		{
			value : 24,
			color: "#9D9B7F"
		},
		{
			value : 55,
			color: "#7D4F6D"
		},
		{
			value : 18,
			color: "#584A5E"
		}
	];

	var ctx = document.getElementById("polarAreaChartCanvas").getContext("2d");
	new Chart(ctx).PolarArea(polarAreaChartCanvas);
});

<!-- HTML -->
<canvas class="chartjs height-300" id="pieChartCanvas" width="547" height="300"></canvas>


<!-- PAGE LEVEL SCRIPTS -->
loadScript(plugin_path + 'chart.chartjs/Chart.min.js', function() {
	var pieChartCanvas = [
		{
			value: 30,
			color:"#F38630"
		},
		{
			value : 50,
			color : "#E0E4CC"
		},
		{
			value : 100,
			color : "#69D2E7"
		},
		{
			value : 45,
			color : "#1E73BE"
		}
	];

	var ctx = document.getElementById("pieChartCanvas").getContext("2d");
	new Chart(ctx).Pie(pieChartCanvas);
});

<!-- HTML -->
<canvas class="chartjs height-300" id="doughnutChartCanvas" width="547" height="300"></canvas>


<!-- PAGE LEVEL SCRIPTS [after scripts.js] -->
loadScript(plugin_path + 'chart.chartjs/Chart.min.js', function() {
	var doughnutChartCanvas = [
		{
			value: 30,
			color:"#F7464A"
		},
		{
			value : 50,
			color : "#46BFBD"
		},
		{
			value : 100,
			color : "#FDB45C"
		},
		{
			value : 40,
			color : "#949FB1"
		},
		{
			value : 120,
			color : "#4D5360"
		}
	];

	var ctx = document.getElementById("doughnutChartCanvas").getContext("2d");
	new Chart(ctx).Doughnut(doughnutChartCanvas);
});

<!-- HTML -->
<canvas class="chartjs height-300" id="radarChartCanvas" width="547" height="300"></canvas>


<!-- PAGE LEVEL SCRIPTS -->
loadScript(plugin_path + 'chart.chartjs/Chart.min.js', function() {
	var radarChartCanvas = {
		labels:["A","B","C","D","E","F","G"],
		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,90,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,96,27,100]
			}
		]
	};

	var ctx = document.getElementById("radarChartCanvas").getContext("2d");
	new Chart(ctx).Radar(radarChartCanvas);
});