WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

GRAPHS

  1. Home
  2. Shortcodes
  3. Graphs

Line Chart

Show Code 

<!-- HTML -->

<canvas class="chartjs" id="lineChartCanvas" width="547" height="300"></canvas>





<!-- PAGE LEVEL SCRIPTS -->

jQuery(window).load( 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);

});

Bar Chart

Show Code 

<!-- HTML -->

<canvas class="chartjs" id="barChartCanvas" width="547" height="300"></canvas>





<!-- PAGE LEVEL SCRIPTS -->

jQuery(window).load( 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);

});

Polar Area Chart

Show Code 

<!-- HTML -->

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





<!-- PAGE LEVEL SCRIPTS -->

jQuery(window).load( 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);

});

Pie Chart

Show Code 

<!-- HTML -->

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





<!-- PAGE LEVEL SCRIPTS -->

jQuery(window).load( 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);

});

Doughnut Chart

Show Code 

<!-- HTML -->

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





<!-- PAGE LEVEL SCRIPTS -->

jQuery(window).load( 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);

});

Radar Chart

Show Code 

<!-- HTML -->

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





<!-- PAGE LEVEL SCRIPTS -->

jQuery(window).load( 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);

});