Folder reorganize 1
This commit is contained in:
Rucus
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Line Chart"
|
||||
},
|
||||
axisX: {
|
||||
interval: 10
|
||||
},
|
||||
data: [{
|
||||
type: "line",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 45 },
|
||||
{ x: 20, y: 14 },
|
||||
{ x: 30, y: 20 },
|
||||
{ x: 40, y: 60 },
|
||||
{ x: 50, y: 50 },
|
||||
{ x: 60, y: 80 },
|
||||
{ x: 70, y: 40 },
|
||||
{ x: 80, y: 60 },
|
||||
{ x: 90, y: 10 },
|
||||
{ x: 100, y: 50 },
|
||||
{ x: 110, y: 40 },
|
||||
{ x: 120, y: 14 },
|
||||
{ x: 130, y: 70 },
|
||||
{ x: 140, y: 40 },
|
||||
{ x: 150, y: 90 },
|
||||
]
|
||||
}]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
|
||||
title:{
|
||||
text: "Earthquakes - per month"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "line",
|
||||
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 450 },
|
||||
{ x: new Date(2012, 01, 1), y: 414 },
|
||||
{ x: new Date(2012, 02, 1), y: 520 },
|
||||
{ x: new Date(2012, 03, 1), y: 460 },
|
||||
{ x: new Date(2012, 04, 1), y: 450 },
|
||||
{ x: new Date(2012, 05, 1), y: 500 },
|
||||
{ x: new Date(2012, 06, 1), y: 480 },
|
||||
{ x: new Date(2012, 07, 1), y: 480 },
|
||||
{ x: new Date(2012, 08, 1), y: 410 },
|
||||
{ x: new Date(2012, 09, 1), y: 500 },
|
||||
{ x: new Date(2012, 10, 1), y: 480 },
|
||||
{ x: new Date(2012, 11, 1), y: 510 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Line Chart with Different Color in a Section"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "line",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 71 },
|
||||
{ x: 20, y: 55 },
|
||||
{ x: 30, y: 50 },
|
||||
{ x: 40, y: 65, lineColor:"red" }, //**Change the lineColor here
|
||||
{ x: 50, y: 68 },
|
||||
{ x: 60, y: 28 },
|
||||
{ x: 70, y: 34 },
|
||||
{ x: 80, y: 14 },
|
||||
{ x: 90, y: 23},
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Line Chart with Null Data Point" //**Change the title here
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "line",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 71 },
|
||||
{ x: 20, y: 55 },
|
||||
{ x: 30, y: 50 },
|
||||
{ x: 40, y: 65 },
|
||||
{ x: 50, y: null }, //** null data point
|
||||
{ x: 60, y: 68 },
|
||||
{ x: 70, y: 28 },
|
||||
{ x: 80, y: 34 },
|
||||
{ x: 90, y: 14 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Stripline on Axis X"
|
||||
},
|
||||
axisX:{
|
||||
stripLines:[
|
||||
{
|
||||
value:1940,
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "line",
|
||||
dataPoints: [
|
||||
{ x: 1910, y: 5 },
|
||||
{ x: 1920, y: 9 },
|
||||
{ x: 1930, y: 17},
|
||||
{ x: 1940, y: 32},
|
||||
{ x: 1950, y: 22},
|
||||
{ x: 1960, y: 14},
|
||||
{ x: 1970, y: 25},
|
||||
{ x: 1980, y: 18},
|
||||
{ x: 1990, y: 20}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
|
||||
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
zoomEnabled: true,
|
||||
zoomType: "xy",
|
||||
title:{
|
||||
text: "Enable Zooming on X & Y Axis"
|
||||
},
|
||||
legend: {
|
||||
horizontalAlign: "right",
|
||||
verticalAlign: "center"
|
||||
},
|
||||
axisY:{
|
||||
includeZero: false
|
||||
},
|
||||
data: data, // random generator below
|
||||
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var limit = 1000; //increase number of dataPoints by increasing this
|
||||
|
||||
var y = 0;
|
||||
var data = []; var dataSeries = { type: "line" };
|
||||
var dataPoints = [];
|
||||
for (var i = 0; i < limit; i += 1) {
|
||||
y += (Math.random() * 10 - 5);
|
||||
dataPoints.push({
|
||||
x: i - limit / 2,
|
||||
y: y
|
||||
});
|
||||
}
|
||||
dataSeries.dataPoints = dataPoints;
|
||||
data.push(dataSeries);
|
||||
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
zoomEnabled: true,
|
||||
title:{
|
||||
text: "Try Zooming And Panning"
|
||||
},
|
||||
axisY:{
|
||||
includeZero: false
|
||||
},
|
||||
data: data, // random generator below
|
||||
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var limit = 1000; //increase number of dataPoints by increasing this
|
||||
|
||||
var y = 0;
|
||||
var data = []; var dataSeries = { type: "line" };
|
||||
var dataPoints = [];
|
||||
for (var i = 0; i < limit; i += 1) {
|
||||
y += (Math.random() * 10 - 5);
|
||||
dataPoints.push({
|
||||
x: i - limit / 2,
|
||||
y: y
|
||||
});
|
||||
}
|
||||
dataSeries.dataPoints = dataPoints;
|
||||
data.push(dataSeries);
|
||||
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Site Traffic",
|
||||
fontSize: 30
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisX: {
|
||||
gridColor: "Silver",
|
||||
tickColor: "silver",
|
||||
valueFormatString: "DD/MMM"
|
||||
},
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
theme: "theme2",
|
||||
axisY: {
|
||||
gridColor: "Silver",
|
||||
tickColor: "silver"
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: "center",
|
||||
horizontalAlign: "right"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "line",
|
||||
showInLegend: true,
|
||||
lineThickness: 2,
|
||||
name: "Visits",
|
||||
markerType: "square",
|
||||
color: "#F08080",
|
||||
dataPoints: [
|
||||
{ x: new Date(2010, 0, 3), y: 650 },
|
||||
{ x: new Date(2010, 0, 5), y: 700 },
|
||||
{ x: new Date(2010, 0, 7), y: 710 },
|
||||
{ x: new Date(2010, 0, 9), y: 658 },
|
||||
{ x: new Date(2010, 0, 11), y: 734 },
|
||||
{ x: new Date(2010, 0, 13), y: 963 },
|
||||
{ x: new Date(2010, 0, 15), y: 847 },
|
||||
{ x: new Date(2010, 0, 17), y: 853 },
|
||||
{ x: new Date(2010, 0, 19), y: 869 },
|
||||
{ x: new Date(2010, 0, 21), y: 943 },
|
||||
{ x: new Date(2010, 0, 23), y: 970 }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
showInLegend: true,
|
||||
name: "Unique Visits",
|
||||
color: "#20B2AA",
|
||||
lineThickness: 2,
|
||||
|
||||
dataPoints: [
|
||||
{ x: new Date(2010, 0, 3), y: 510 },
|
||||
{ x: new Date(2010, 0, 5), y: 560 },
|
||||
{ x: new Date(2010, 0, 7), y: 540 },
|
||||
{ x: new Date(2010, 0, 9), y: 558 },
|
||||
{ x: new Date(2010, 0, 11), y: 544 },
|
||||
{ x: new Date(2010, 0, 13), y: 693 },
|
||||
{ x: new Date(2010, 0, 15), y: 657 },
|
||||
{ x: new Date(2010, 0, 17), y: 663 },
|
||||
{ x: new Date(2010, 0, 19), y: 639 },
|
||||
{ x: new Date(2010, 0, 21), y: 673 },
|
||||
{ x: new Date(2010, 0, 23), y: 660 }
|
||||
]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
cursor: "pointer",
|
||||
itemclick: function (e) {
|
||||
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
|
||||
e.dataSeries.visible = false;
|
||||
}
|
||||
else {
|
||||
e.dataSeries.visible = true;
|
||||
}
|
||||
chart.render();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,266 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer1", {
|
||||
theme: "theme2",
|
||||
title: {
|
||||
text: "Earthquakes - per month"
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisX: {
|
||||
valueFormatString: "MMM",
|
||||
interval: 1,
|
||||
intervalType: "month"
|
||||
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false
|
||||
|
||||
},
|
||||
data: [{
|
||||
type: "line",
|
||||
//lineThickness: 3,
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 450 },
|
||||
{ x: new Date(2012, 01, 1), y: 414 },
|
||||
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest", markerColor: "red", markerType: "triangle" },
|
||||
{ x: new Date(2012, 03, 1), y: 460 },
|
||||
{ x: new Date(2012, 04, 1), y: 450 },
|
||||
{ x: new Date(2012, 05, 1), y: 500 },
|
||||
{ x: new Date(2012, 06, 1), y: 480 },
|
||||
{ x: new Date(2012, 07, 1), y: 480 },
|
||||
{ x: new Date(2012, 08, 1), y: 410, indexLabel: "lowest", markerColor: "DarkSlateGrey", markerType: "cross" },
|
||||
{ x: new Date(2012, 09, 1), y: 500 },
|
||||
{ x: new Date(2012, 10, 1), y: 480 },
|
||||
{ x: new Date(2012, 11, 1), y: 510 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
|
||||
var chart = new CanvasJS.Chart("chartContainer2", {
|
||||
title: {
|
||||
text: "Share Value over a Year"
|
||||
},
|
||||
theme: "theme2",
|
||||
animationEnabled: true,
|
||||
axisX: {
|
||||
valueFormatString: "MMM"
|
||||
},
|
||||
axisY: {
|
||||
valueFormatString: "#0$"
|
||||
},
|
||||
data: [{
|
||||
type: "line",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 01, 1), y: 71, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
|
||||
{ x: new Date(2012, 02, 1), y: 55, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
|
||||
{ x: new Date(2012, 03, 1), y: 50, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
|
||||
{ x: new Date(2012, 04, 1), y: 65, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
|
||||
{ x: new Date(2012, 05, 1), y: 85, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
|
||||
{ x: new Date(2012, 06, 1), y: 68, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
|
||||
{ x: new Date(2012, 07, 1), y: 28, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
|
||||
{ x: new Date(2012, 08, 1), y: 34, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
|
||||
{ x: new Date(2012, 09, 1), y: 24, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
|
||||
var chart = new CanvasJS.Chart("chartContainer3", {
|
||||
title: {
|
||||
text: "Site Traffic",
|
||||
fontSize: 30
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisX: {
|
||||
|
||||
gridColor: "Silver",
|
||||
tickColor: "silver",
|
||||
valueFormatString: "DD/MMM"
|
||||
|
||||
},
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
theme: "theme2",
|
||||
axisY: {
|
||||
gridColor: "Silver",
|
||||
tickColor: "silver"
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "center"
|
||||
},
|
||||
data: [{
|
||||
type: "line",
|
||||
showInLegend: true,
|
||||
lineThickness: 2,
|
||||
name: "Visits",
|
||||
markerType: "square",
|
||||
color: "#F08080",
|
||||
dataPoints: [
|
||||
{ x: new Date(2010, 0, 3), y: 650 },
|
||||
{ x: new Date(2010, 0, 5), y: 700 },
|
||||
{ x: new Date(2010, 0, 7), y: 710 },
|
||||
{ x: new Date(2010, 0, 9), y: 658 },
|
||||
{ x: new Date(2010, 0, 11), y: 734 },
|
||||
{ x: new Date(2010, 0, 13), y: 963 },
|
||||
{ x: new Date(2010, 0, 15), y: 847 },
|
||||
{ x: new Date(2010, 0, 17), y: 853 },
|
||||
{ x: new Date(2010, 0, 19), y: 869 },
|
||||
{ x: new Date(2010, 0, 21), y: 943 },
|
||||
{ x: new Date(2010, 0, 23), y: 970 }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
showInLegend: true,
|
||||
name: "Unique Visits",
|
||||
color: "#20B2AA",
|
||||
lineThickness: 2,
|
||||
|
||||
dataPoints: [
|
||||
{ x: new Date(2010, 0, 3), y: 510 },
|
||||
{ x: new Date(2010, 0, 5), y: 560 },
|
||||
{ x: new Date(2010, 0, 7), y: 540 },
|
||||
{ x: new Date(2010, 0, 9), y: 558 },
|
||||
{ x: new Date(2010, 0, 11), y: 544 },
|
||||
{ x: new Date(2010, 0, 13), y: 693 },
|
||||
{ x: new Date(2010, 0, 15), y: 657 },
|
||||
{ x: new Date(2010, 0, 17), y: 663 },
|
||||
{ x: new Date(2010, 0, 19), y: 639 },
|
||||
{ x: new Date(2010, 0, 21), y: 673 },
|
||||
{ x: new Date(2010, 0, 23), y: 660 }
|
||||
]
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
chart.render();
|
||||
|
||||
var chart = new CanvasJS.Chart("chartContainer4", {
|
||||
zoomEnabled: false,
|
||||
animationEnabled: true,
|
||||
title: {
|
||||
text: "Mobile Phone Subscriptions"
|
||||
},
|
||||
axisY2: {
|
||||
valueFormatString: "0.0 bn",
|
||||
|
||||
maximum: 1.2,
|
||||
interval: .2,
|
||||
interlacedColor: "#F5F5F5",
|
||||
gridColor: "#D7D7D7",
|
||||
tickColor: "#D7D7D7"
|
||||
},
|
||||
theme: "theme2",
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "center",
|
||||
fontSize: 15,
|
||||
fontFamily: "Lucida Sans Unicode"
|
||||
},
|
||||
data: [{
|
||||
type: "line",
|
||||
lineThickness: 3,
|
||||
axisYType: "secondary",
|
||||
showInLegend: true,
|
||||
name: "India",
|
||||
dataPoints: [
|
||||
{ x: new Date(2001, 0), y: 0 },
|
||||
{ x: new Date(2002, 0), y: 0.001 },
|
||||
{ x: new Date(2003, 0), y: 0.01 },
|
||||
{ x: new Date(2004, 0), y: 0.05 },
|
||||
{ x: new Date(2005, 0), y: 0.1 },
|
||||
{ x: new Date(2006, 0), y: 0.15 },
|
||||
{ x: new Date(2007, 0), y: 0.22 },
|
||||
{ x: new Date(2008, 0), y: 0.38 },
|
||||
{ x: new Date(2009, 0), y: 0.56 },
|
||||
{ x: new Date(2010, 0), y: 0.77 },
|
||||
{ x: new Date(2011, 0), y: 0.91 },
|
||||
{ x: new Date(2012, 0), y: 0.94 }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
lineThickness: 3,
|
||||
showInLegend: true,
|
||||
name: "China",
|
||||
axisYType: "secondary",
|
||||
dataPoints: [
|
||||
{ x: new Date(2001, 00), y: 0.18 },
|
||||
{ x: new Date(2002, 00), y: 0.2 },
|
||||
{ x: new Date(2003, 0), y: 0.25 },
|
||||
{ x: new Date(2004, 0), y: 0.35 },
|
||||
{ x: new Date(2005, 0), y: 0.42 },
|
||||
{ x: new Date(2006, 0), y: 0.5 },
|
||||
{ x: new Date(2007, 0), y: 0.58 },
|
||||
{ x: new Date(2008, 0), y: 0.67 },
|
||||
{ x: new Date(2009, 0), y: 0.78 },
|
||||
{ x: new Date(2010, 0), y: 0.88 },
|
||||
{ x: new Date(2011, 0), y: 0.98 },
|
||||
{ x: new Date(2012, 0), y: 1.04 }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
lineThickness: 3,
|
||||
showInLegend: true,
|
||||
name: "USA",
|
||||
axisYType: "secondary",
|
||||
dataPoints: [
|
||||
{ x: new Date(2001, 00), y: 0.16 },
|
||||
{ x: new Date(2002, 0), y: 0.17 },
|
||||
{ x: new Date(2003, 0), y: 0.18 },
|
||||
{ x: new Date(2004, 0), y: 0.19 },
|
||||
{ x: new Date(2005, 0), y: 0.20 },
|
||||
{ x: new Date(2006, 0), y: 0.23 },
|
||||
{ x: new Date(2007, 0), y: 0.261 },
|
||||
{ x: new Date(2008, 0), y: 0.289 },
|
||||
{ x: new Date(2009, 0), y: 0.3 },
|
||||
{ x: new Date(2010, 0), y: 0.31 },
|
||||
{ x: new Date(2011, 0), y: 0.32 },
|
||||
{ x: new Date(2012, 0), y: 0.33 }
|
||||
]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
cursor: "pointer",
|
||||
itemclick: function (e) {
|
||||
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
|
||||
e.dataSeries.visible = false;
|
||||
}
|
||||
else {
|
||||
e.dataSeries.visible = true;
|
||||
}
|
||||
chart.render();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer1" style="width: 45%; height: 300px;display: inline-block;"></div>
|
||||
<div id="chartContainer2" style="width: 45%; height: 300px;display: inline-block;"></div>
|
||||
<br />
|
||||
<div id="chartContainer3" style="width: 45%; height: 300px;display: inline-block;"></div>
|
||||
<div id="chartContainer4" style="width: 45%; height: 300px;display: inline-block;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Basic Column Chart"
|
||||
},
|
||||
data: [{
|
||||
type: "column",
|
||||
dataPoints: [
|
||||
{ y: 45, label: "Apple" },
|
||||
{ y: 31, label: "Mango" },
|
||||
{ y: 52, label: "Pineapple" },
|
||||
{ y: 10, label: "Grapes" },
|
||||
{ y: 46, label: "Lemon" },
|
||||
{ y: 30, label: "Banana" },
|
||||
{ y: 50, label: "Watermelon" },
|
||||
{ y: 28, label: "Coconut" },
|
||||
{ y: 45, label: "Lychee" },
|
||||
{ y: 15, label: "Palm" },
|
||||
{ y: 48, label: "Orange" },
|
||||
{ y: 38, label: "Muskmelon" },
|
||||
{ y: 41, label: "Strawberry" },
|
||||
{ y: 25, label: "Kiwi" },
|
||||
{ y: 50, label: "Guava" },
|
||||
]
|
||||
}]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Column Chart with Index Label and Data Point Width"
|
||||
},
|
||||
axisX: {
|
||||
interval: 10
|
||||
},
|
||||
dataPointWidth: 60,
|
||||
data: [{
|
||||
type: "column",
|
||||
indexLabelLineThickness: 2,
|
||||
dataPoints: [
|
||||
{ x: 10, y: 230, indexLabel: "Lowest" },
|
||||
{ x: 20, y: 710, indexLabel: "Highest" },
|
||||
{ x: 30, y: 380 },
|
||||
{ x: 40, y: 567 },
|
||||
{ x: 50, y: 280 },
|
||||
{ x: 60, y: 507 },
|
||||
{ x: 70, y: 680 },
|
||||
{ x: 80, y: 287 },
|
||||
{ x: 90, y: 460 },
|
||||
{ x: 100, y: 509 }
|
||||
]
|
||||
}]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Multi-Series Column Chart"
|
||||
},
|
||||
data: [{
|
||||
type: "column",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 750 },
|
||||
{ x: 20, y: 714 },
|
||||
{ x: 30, y: 320 },
|
||||
{ x: 40, y: 560 },
|
||||
{ x: 50, y: 430 },
|
||||
{ x: 60, y: 500 },
|
||||
{ x: 70, y: 480 },
|
||||
{ x: 80, y: 280 },
|
||||
{ x: 90, y: 410 },
|
||||
{ x: 100, y: 500 },
|
||||
]
|
||||
}, {
|
||||
type: "column",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 250 },
|
||||
{ x: 20, y: 414 },
|
||||
{ x: 30, y: 919 },
|
||||
{ x: 40, y: 967 },
|
||||
{ x: 50, y: 678 },
|
||||
{ x: 60, y: 878 },
|
||||
{ x: 70, y: 787 },
|
||||
{ x: 80, y: 780 },
|
||||
{ x: 90, y: 803 },
|
||||
{ x: 100, y: 330 },
|
||||
]
|
||||
}, {
|
||||
type: "column",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 400 },
|
||||
{ x: 20, y: 917 },
|
||||
{ x: 30, y: 520 },
|
||||
{ x: 40, y: 804 },
|
||||
{ x: 50, y: 450 },
|
||||
{ x: 60, y: 969 },
|
||||
{ x: 70, y: 380 },
|
||||
{ x: 80, y: 839 },
|
||||
{ x: 90, y: 610 },
|
||||
{ x: 100, y: 850 },
|
||||
]
|
||||
}]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Monthly Downloads"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "area",
|
||||
dataPoints: [//array
|
||||
|
||||
{ x: new Date(2012, 00, 1), y: 2600 },
|
||||
{ x: new Date(2012, 01, 1), y: 3800 },
|
||||
{ x: new Date(2012, 02, 1), y: 4300 },
|
||||
{ x: new Date(2012, 03, 1), y: 2900 },
|
||||
{ x: new Date(2012, 04, 1), y: 4100 },
|
||||
{ x: new Date(2012, 05, 1), y: 4500 },
|
||||
{ x: new Date(2012, 06, 1), y: 8600 },
|
||||
{ x: new Date(2012, 07, 1), y: 6400 },
|
||||
{ x: new Date(2012, 08, 1), y: 5300 },
|
||||
{ x: new Date(2012, 09, 1), y: 6000 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Combination chart using line thickness"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "area",
|
||||
lineThickness: 7, //**Try various lineThickness values **//
|
||||
dataPoints: [
|
||||
{ x: 10, y: 71 },
|
||||
{ x: 20, y: 55},
|
||||
{ x: 30, y: 50 },
|
||||
{ x: 40, y: 65 },
|
||||
{ x: 50, y: 95 },
|
||||
{ x: 60, y: 68 },
|
||||
{ x: 70, y: 28 },
|
||||
{ x: 80, y: 34 },
|
||||
{ x: 90, y: 14}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Chart With Different Fill Opacity"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "area",
|
||||
fillOpacity: 0.3, //**Try various Opacity values **//
|
||||
dataPoints: [
|
||||
{ x: 10, y: 71 },
|
||||
{ x: 20, y: 55},
|
||||
{ x: 30, y: 50 },
|
||||
{ x: 40, y: 65 },
|
||||
{ x: 50, y: 95 },
|
||||
{ x: 60, y: 68 },
|
||||
{ x: 70, y: 28 },
|
||||
{ x: 80, y: 34 },
|
||||
{ x: 90, y: 14}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
|
||||
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
zoomEnabled: true,
|
||||
zoomType: "xy",
|
||||
title:{
|
||||
text: "Enable Zooming on X & Y Axis"
|
||||
},
|
||||
legend: {
|
||||
horizontalAlign: "right",
|
||||
verticalAlign: "center"
|
||||
},
|
||||
axisY:{
|
||||
includeZero: false
|
||||
},
|
||||
data: data, // random generator below
|
||||
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var limit = 1000; //increase number of dataPoints by increasing this
|
||||
|
||||
var y = 0;
|
||||
var data = []; var dataSeries = { type: "area" };
|
||||
var dataPoints = [];
|
||||
for (var i = 0; i < limit; i += 1) {
|
||||
y += (Math.random() * 10 - 5);
|
||||
dataPoints.push({
|
||||
x: i - limit / 2,
|
||||
y: y
|
||||
});
|
||||
}
|
||||
dataSeries.dataPoints = dataPoints;
|
||||
data.push(dataSeries);
|
||||
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Area Chart"
|
||||
},
|
||||
axisX: {
|
||||
interval: 10
|
||||
},
|
||||
data: [{
|
||||
type: "area",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 45 },
|
||||
{ x: 20, y: 90 },
|
||||
{ x: 30, y: 70 },
|
||||
{ x: 40, y: 60 },
|
||||
{ x: 50, y: 50 },
|
||||
{ x: 60, y: 80 },
|
||||
{ x: 70, y: 90 },
|
||||
{ x: 80, y: 60 },
|
||||
{ x: 90, y: 80 },
|
||||
{ x: 100, y: 50 },
|
||||
{ x: 110, y: 40 },
|
||||
{ x: 120, y: 14 },
|
||||
{ x: 130, y: 70 },
|
||||
{ x: 140, y: 40 },
|
||||
{ x: 150, y: 90 },
|
||||
]
|
||||
}]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Pie Chart"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "pie",
|
||||
dataPoints: [
|
||||
{ y: 4181563},
|
||||
{ y: 2175498},
|
||||
{ y: 3125844},
|
||||
{ y: 1176121},
|
||||
{ y: 1727161},
|
||||
{ y: 4303364},
|
||||
{ y: 1717786}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
theme: "theme2",
|
||||
title:{
|
||||
text: "Gaming Consoles Sold in 2012"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "pie",
|
||||
showInLegend: true,
|
||||
toolTipContent: "{y} - #percent %",
|
||||
yValueFormatString: "#0.#,,. Million",
|
||||
legendText: "{indexLabel}",
|
||||
dataPoints: [
|
||||
{ y: 4181563, indexLabel: "PlayStation 3" },
|
||||
{ y: 2175498, indexLabel: "Wii" },
|
||||
{ y: 3125844, indexLabel: "Xbox 360" },
|
||||
{ y: 1176121, indexLabel: "Nintendo DS"},
|
||||
{ y: 1727161, indexLabel: "PSP" },
|
||||
{ y: 4303364, indexLabel: "Nintendo 3DS"},
|
||||
{ y: 1717786, indexLabel: "PS Vita"}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Oil Reserves and Production "
|
||||
},
|
||||
axisY: {
|
||||
stripLines: [{
|
||||
value: 143650,
|
||||
label: "Average",
|
||||
showOnTop: true
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
type: "bar",
|
||||
|
||||
dataPoints: [
|
||||
{ x: 10, y: 267017, label: "Saudi Arabia" },
|
||||
{ x: 20, y: 116000, label: "Russia" },
|
||||
{ x: 30, y: 20682, label: "US" },
|
||||
{ x: 40, y: 154580, label: "Iran" },
|
||||
{ x: 50, y: 20350, label: "China" },
|
||||
{ x: 60, y: 175200, label: "Canda" },
|
||||
{ x: 70, y: 97800, label: "UAE" },
|
||||
{ x: 80, y: 297571, label: "Venezuela" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Bar chart"
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
type: "bar",
|
||||
|
||||
dataPoints: [
|
||||
{ x: 10, y: 90, label:"Apple" },
|
||||
{ x: 20, y: 70, label:"Mango" },
|
||||
{ x: 30, y: 50, label:"Orange" },
|
||||
{ x: 40, y: 60, label:"Banana" },
|
||||
{ x: 50, y: 20, label:"Pineapple" },
|
||||
{ x: 60, y: 30, label:"Pears" },
|
||||
{ x: 70, y: 35, label:"Grapes" },
|
||||
{ x: 80, y: 40, label:"Lychee" },
|
||||
{ x: 90, y: 30, label:"Jackfruit" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Pie Chart"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "doughnut",
|
||||
dataPoints: [
|
||||
{ y: 4181563},
|
||||
{ y: 2175498},
|
||||
{ y: 3125844},
|
||||
{ y: 1176121},
|
||||
{ y: 1727161},
|
||||
{ y: 4303364},
|
||||
{ y: 1717786}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Presidential Election Results"
|
||||
},
|
||||
animationEnabled: true,
|
||||
data: [
|
||||
{
|
||||
type: "doughnut",
|
||||
startAngle: 60,
|
||||
toolTipContent: "{legendText}: {y} - <strong>#percent% </strong>",
|
||||
showInLegend: true,
|
||||
explodeOnClick: false, //**Change it to true
|
||||
dataPoints: [
|
||||
{y: 65899660, indexLabel: "Barack Obama #percent%", legendText: "Barack Obama" },
|
||||
{y: 60929152, indexLabel: "Mitt Romney #percent%", legendText: "Mitt Romney" },
|
||||
{y: 2175850, indexLabel: "Others #percent%", legendText: "Others" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Mobile / Tablet OS Market Share, Jun 2015"
|
||||
},
|
||||
animationEnabled: true,
|
||||
theme: "theme2",
|
||||
data: [
|
||||
{
|
||||
type: "doughnut",
|
||||
indexLabelFontFamily: "Garamond",
|
||||
indexLabelFontSize: 20,
|
||||
startAngle: 0,
|
||||
indexLabelFontColor: "dimgrey",
|
||||
indexLabelLineColor: "darkgrey",
|
||||
toolTipContent: "{y} %",
|
||||
|
||||
dataPoints: [
|
||||
{ y: 51.04, indexLabel: "Android {y}%" },
|
||||
{ y: 40.83, indexLabel: "iOS {y}%" },
|
||||
{ y: 3.20, indexLabel: "Java ME {y}%" },
|
||||
{ y: 1.11, indexLabel: "BlackBerry {y}%" },
|
||||
{ y: 2.29, indexLabel: "Windows {y}%" },
|
||||
{ y: 1.53, indexLabel: "Others {y}%" }
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Basic Spline Chart"
|
||||
},
|
||||
data: [{
|
||||
type: "spline",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 230 },
|
||||
{ x: 20, y: 710 },
|
||||
{ x: 30, y: 380 },
|
||||
{ x: 40, y: 567 },
|
||||
{ x: 50, y: 280 },
|
||||
{ x: 60, y: 507 },
|
||||
{ x: 70, y: 680 },
|
||||
{ x: 80, y: 287 },
|
||||
{ x: 90, y: 460 },
|
||||
{ x: 100, y: 509 }
|
||||
]
|
||||
}]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Spline Chart with Marker Customization"
|
||||
},
|
||||
data: [{
|
||||
type: "spline",
|
||||
markerSize: 10,
|
||||
dataPoints: [
|
||||
{ x: 10, y: 230 },
|
||||
{ x: 20, y: 710, markerType: "triangle" },
|
||||
{ x: 30, y: 380 },
|
||||
{ x: 40, y: 567, markerColor: "red" },
|
||||
{ x: 50, y: 280 },
|
||||
{ x: 60, y: 507 },
|
||||
{ x: 70, y: 680 },
|
||||
{ x: 80, y: 287 },
|
||||
{ x: 90, y: 460 },
|
||||
{ x: 100, y: 509 }
|
||||
]
|
||||
}]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Comparison among Countries on Fertility Rate Vs Life Expectancy in 2009"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "bubble",
|
||||
dataPoints: [
|
||||
{ x: 78.1, y: 2.00, z: 306.77, name: "US" },
|
||||
{ x: 68.5, y: 2.15, z: 237.414, name: "Indonesia" },
|
||||
{ x: 72.5, y: 1.86, z: 193.24, name: "Brazil" },
|
||||
{ x: 76.5, y: 2.36, z: 112.24, name: "Mexico" },
|
||||
{ x: 50.9, y: 5.56, z: 154.48, name: "Nigeria" },
|
||||
{ x: 68.6, y: 1.54, z: 141.91, name: "Russia" },
|
||||
{ x: 82.9, y: 1.37, z: 127.55, name: "Japan" },
|
||||
{ x: 79.8, y: 1.36, z: 81.90, name: "Australia" },
|
||||
{ x: 72.7, y: 2.78, z: 79.71, name: "Egypt" },
|
||||
{ x: 80.1, y: 1.94, z: 61.81, name: "UK" },
|
||||
{ x: 55.8, y: 4.76, z: 39.24, name: "Kenya" },
|
||||
{ x: 81.5, y: 1.93, z: 21.95, name: "Australia" },
|
||||
{ x: 68.1, y: 4.77, z: 31.09, name: "Iraq" },
|
||||
{ x: 47.9, y: 6.42, z: 33.42, name: "Afganistan" },
|
||||
{ x: 50.3, y: 5.58, z: 18.55, name: "Angola" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Comparison among Countries on Fertility Rate Vs Life Expectancy in 2009"
|
||||
},
|
||||
axisX: {
|
||||
title: "Life Expectancy",
|
||||
maximum: 85
|
||||
},
|
||||
axisY: {
|
||||
title: "Fertility Rate"
|
||||
},
|
||||
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "left"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "bubble",
|
||||
legendText: "Size of Bubble Represents Population",
|
||||
showInLegend: true,
|
||||
legendMarkerType: "circle",
|
||||
toolTipContent: "<strong>{name}</strong> <br/> Fetility Rate: {y}<br/> Life Expectancy: {x} yrs<br/> Population: {z} mn",
|
||||
dataPoints: [
|
||||
{ x: 78.1, y: 2.00, z: 306.77, name: "US" },
|
||||
{ x: 68.5, y: 2.15, z: 237.414, name: "Indonesia" },
|
||||
{ x: 72.5, y: 1.86, z: 193.24, name: "Brazil" },
|
||||
{ x: 76.5, y: 2.36, z: 112.24, name: "Mexico" },
|
||||
{ x: 50.9, y: 5.56, z: 154.48, name: "Nigeria" },
|
||||
{ x: 68.6, y: 1.54, z: 141.91, name: "Russia" },
|
||||
{ x: 82.9, y: 1.37, z: 127.55, name: "Japan" },
|
||||
{ x: 79.8, y: 1.36, z: 81.90, name: "Australia" },
|
||||
{ x: 72.7, y: 2.78, z: 79.71, name: "Egypt" },
|
||||
{ x: 80.1, y: 1.94, z: 61.81, name: "UK" },
|
||||
{ x: 55.8, y: 4.76, z: 39.24, name: "Kenya" },
|
||||
{ x: 81.5, y: 1.93, z: 21.95, name: "Australia" },
|
||||
{ x: 68.1, y: 4.77, z: 31.09, name: "Iraq" },
|
||||
{ x: 47.9, y: 6.42, z: 33.42, name: "Afganistan" },
|
||||
{ x: 50.3, y: 5.58, z: 18.55, name: "Angola" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Stacked Column Chart"
|
||||
},
|
||||
axisX: {
|
||||
interval: 10
|
||||
},
|
||||
data: [{
|
||||
type: "stackedColumn",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 750 },
|
||||
{ x: 20, y: 714 },
|
||||
{ x: 30, y: 320 },
|
||||
{ x: 40, y: 560 },
|
||||
{ x: 50, y: 430 },
|
||||
{ x: 60, y: 500 },
|
||||
{ x: 70, y: 480 },
|
||||
{ x: 80, y: 280 },
|
||||
{ x: 90, y: 410 },
|
||||
{ x: 100, y: 500 }
|
||||
]
|
||||
}, {
|
||||
type: "stackedColumn",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 250 },
|
||||
{ x: 20, y: 414 },
|
||||
{ x: 30, y: 919 },
|
||||
{ x: 40, y: 967 },
|
||||
{ x: 50, y: 678 },
|
||||
{ x: 60, y: 878 },
|
||||
{ x: 70, y: 787 },
|
||||
{ x: 80, y: 780 },
|
||||
{ x: 90, y: 803 },
|
||||
{ x: 100, y: 330 }
|
||||
]
|
||||
}, {
|
||||
type: "stackedColumn",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 400 },
|
||||
{ x: 20, y: 917 },
|
||||
{ x: 30, y: 520 },
|
||||
{ x: 40, y: 804 },
|
||||
{ x: 50, y: 450 },
|
||||
{ x: 60, y: 969 },
|
||||
{ x: 70, y: 380 },
|
||||
{ x: 80, y: 839 },
|
||||
{ x: 90, y: 610 },
|
||||
{ x: 100, y: 850 }
|
||||
]
|
||||
}]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Coal Reserves of Countries"
|
||||
},
|
||||
axisY: {
|
||||
title: "Coal (bn tonnes)",
|
||||
valueFormatString: "#0.#,.",
|
||||
},
|
||||
data: [{
|
||||
type: "stackedColumn",
|
||||
legendText: "Anthracite & Bituminous",
|
||||
showInLegend: "true",
|
||||
dataPoints: [
|
||||
{ y: 111338, label: "USA" },
|
||||
{ y: 49088, label: "Russia" },
|
||||
{ y: 62200, label: "China" },
|
||||
{ y: 90085, label: "India" },
|
||||
{ y: 38600, label: "Australia" },
|
||||
{ y: 25400, label: "Germany" },
|
||||
{ y: 33873, label: "Ukraine" },
|
||||
{ y: 6746, label: "Colombia" },
|
||||
{ y: 6582, label: "Canada" }
|
||||
]
|
||||
}, {
|
||||
type: "stackedColumn",
|
||||
legendText: "SubBituminous & Lignite",
|
||||
showInLegend: "true",
|
||||
indexLabel: "#total bn",
|
||||
yValueFormatString: "#0.#,.",
|
||||
indexLabelPlacement: "outside",
|
||||
dataPoints: [
|
||||
{ y: 135305, label: "USA" },
|
||||
{ y: 107922, label: "Russia" },
|
||||
{ y: 52300, label: "China" },
|
||||
{ y: 3360, label: "India" },
|
||||
{ y: 39900, label: "Australia" },
|
||||
{ y: 3680, label: "Germany" },
|
||||
{ y: 3200, label: "Ukraine" },
|
||||
{ y: 0, label: "Colombia" },
|
||||
{ y: 6582, label: "Canada" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Evening Sales of a Restaurant"
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
type: "stackedBar",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 01, 1), y: 71 },
|
||||
{ x: new Date(2012, 02, 1), y: 55},
|
||||
{ x: new Date(2012, 03, 1), y: 50 },
|
||||
{ x: new Date(2012, 04, 1), y: 65 },
|
||||
{ x: new Date(2012, 05, 1), y: 95 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedBar",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 01, 1), y: 71 },
|
||||
{ x: new Date(2012, 02, 1), y: 55},
|
||||
{ x: new Date(2012, 03, 1), y: 50 },
|
||||
{ x: new Date(2012, 04, 1), y: 65 },
|
||||
{ x: new Date(2012, 05, 1), y: 95 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedBar",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 01, 1), y: 71 },
|
||||
{ x: new Date(2012, 02, 1), y: 55},
|
||||
{ x: new Date(2012, 03, 1), y: 50 },
|
||||
{ x: new Date(2012, 04, 1), y: 65 },
|
||||
{ x: new Date(2012, 05, 1), y: 95 }
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "stackedBar",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 01, 1), y: 61 },
|
||||
{ x: new Date(2012, 02, 1), y: 75},
|
||||
{ x: new Date(2012, 03, 1), y: 80 },
|
||||
{ x: new Date(2012, 04, 1), y: 85 },
|
||||
{ x: new Date(2012, 05, 1), y: 105 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedBar",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 01, 1), y: 20 },
|
||||
{ x: new Date(2012, 02, 1), y: 35},
|
||||
{ x: new Date(2012, 03, 1), y: 30 },
|
||||
{ x: new Date(2012, 04, 1), y: 45 },
|
||||
{ x: new Date(2012, 05, 1), y: 25 }
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Cost Of Pancake Ingredients, 2011"
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisX: {
|
||||
interval: 1,
|
||||
labelFontSize: 10,
|
||||
lineThickness: 0
|
||||
},
|
||||
axisY2: {
|
||||
valueFormatString: "$ 0",
|
||||
lineThickness: 0
|
||||
},
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: "top",
|
||||
horizontalAlign: "center"
|
||||
},
|
||||
|
||||
data: [{
|
||||
type: "stackedBar",
|
||||
showInLegend: true,
|
||||
name: "Butter (500gms)",
|
||||
axisYType: "secondary",
|
||||
color: "#7E8F74",
|
||||
dataPoints: [
|
||||
{ y: 3, label: "India" },
|
||||
{ y: 5, label: "US" },
|
||||
{ y: 3, label: "Germany" },
|
||||
{ y: 6, label: "Brazil" },
|
||||
{ y: 7, label: "China" },
|
||||
{ y: 5, label: "Australia" },
|
||||
{ y: 5, label: "France" },
|
||||
{ y: 7, label: "Italy" },
|
||||
{ y: 9, label: "Singapore" },
|
||||
{ y: 8, label: "Switzerland" },
|
||||
{ y: 12, label: "Japan" }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedBar",
|
||||
showInLegend: true,
|
||||
name: "Flour (1kg)",
|
||||
axisYType: "secondary",
|
||||
color: "#F0E6A7",
|
||||
dataPoints: [
|
||||
{ y: .5, label: "India" },
|
||||
{ y: 1.5, label: "US" },
|
||||
{ y: 1, label: "Germany" },
|
||||
{ y: 2, label: "Brazil" },
|
||||
{ y: 2, label: "China" },
|
||||
{ y: 2.5, label: "Australia" },
|
||||
{ y: 1.5, label: "France" },
|
||||
{ y: 1, label: "Italy" },
|
||||
{ y: 2, label: "Singapore" },
|
||||
{ y: 2, label: "Switzerland" },
|
||||
{ y: 3, label: "Japan" }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedBar",
|
||||
showInLegend: true,
|
||||
name: "Milk (2l)",
|
||||
axisYType: "secondary",
|
||||
color: "#EBB88A",
|
||||
dataPoints: [
|
||||
{ y: 2, label: "India" },
|
||||
{ y: 3, label: "US" },
|
||||
{ y: 3, label: "Germany" },
|
||||
{ y: 3, label: "Brazil" },
|
||||
{ y: 4, label: "China" },
|
||||
{ y: 3, label: "Australia" },
|
||||
{ y: 4.5, label: "France" },
|
||||
{ y: 4.5, label: "Italy" },
|
||||
{ y: 6, label: "Singapore" },
|
||||
{ y: 3, label: "Switzerland" },
|
||||
{ y: 6, label: "Japan" }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedBar",
|
||||
showInLegend: true,
|
||||
name: "Eggs (20)",
|
||||
axisYType: "secondary",
|
||||
color: "#DB9079",
|
||||
indexLabel: "$#total",
|
||||
indexLabelPlacement: "outside",
|
||||
dataPoints: [
|
||||
{ y: 2, label: "India" },
|
||||
{ y: 3, label: "US" },
|
||||
{ y: 6, label: "Germany" },
|
||||
{ y: 4, label: "Brazil" },
|
||||
{ y: 4, label: "China" },
|
||||
{ y: 8, label: "Australia" },
|
||||
{ y: 8, label: "France" },
|
||||
{ y: 8, label: "Italy" },
|
||||
{ y: 4, label: "Singapore" },
|
||||
{ y: 11, label: "Switzerland" },
|
||||
{ y: 6, label: "Japan" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Number of Persons involved in Traffic Accidents by Mode of Transport"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "stackedArea",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 1100 },
|
||||
{ x: new Date(2012, 01, 1), y: 1200 },
|
||||
{ x: new Date(2012, 02, 1), y: 1000},
|
||||
{ x: new Date(2012, 03, 1), y: 1200 },
|
||||
{ x: new Date(2012, 04, 1), y: 1600 },
|
||||
{ x: new Date(2012, 05, 1), y: 1800 },
|
||||
{ x: new Date(2012, 06, 1), y: 1400 },
|
||||
{ x: new Date(2012, 07, 1), y: 1500 },
|
||||
{ x: new Date(2012, 08, 1), y: 1600 },
|
||||
{ x: new Date(2012, 09, 1), y: 1800 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedArea",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 150 },
|
||||
{ x: new Date(2012, 01, 1), y: 171 },
|
||||
{ x: new Date(2012, 02, 1), y: 155},
|
||||
{ x: new Date(2012, 03, 1), y: 150 },
|
||||
{ x: new Date(2012, 04, 1), y: 165 },
|
||||
{ x: new Date(2012, 05, 1), y: 195 },
|
||||
{ x: new Date(2012, 06, 1), y: 155 },
|
||||
{ x: new Date(2012, 07, 1), y: 145 },
|
||||
{ x: new Date(2012, 08, 1), y: 140 },
|
||||
{ x: new Date(2012, 09, 1), y: 151 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedArea",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 71 },
|
||||
{ x: new Date(2012, 01, 1), y: 41 },
|
||||
{ x: new Date(2012, 02, 1), y: 55},
|
||||
{ x: new Date(2012, 03, 1), y: 50 },
|
||||
{ x: new Date(2012, 04, 1), y: 65 },
|
||||
{ x: new Date(2012, 05, 1), y: 95 },
|
||||
{ x: new Date(2012, 06, 1), y: 45 },
|
||||
{ x: new Date(2012, 07, 1), y: 95 },
|
||||
{ x: new Date(2012, 08, 1), y: 60 },
|
||||
{ x: new Date(2012, 09, 1), y: 40 }
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "stackedArea",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 861 },
|
||||
{ x: new Date(2012, 01, 1), y: 761 },
|
||||
{ x: new Date(2012, 02, 1), y: 775},
|
||||
{ x: new Date(2012, 03, 1), y: 680 },
|
||||
{ x: new Date(2012, 04, 1), y: 785 },
|
||||
{ x: new Date(2012, 05, 1), y: 374 },
|
||||
{ x: new Date(2012, 06, 1), y: 365 },
|
||||
{ x: new Date(2012, 07, 1), y: 455 },
|
||||
{ x: new Date(2012, 08, 1), y: 657 },
|
||||
{ x: new Date(2012, 09, 1), y: 659 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedArea",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 220 },
|
||||
{ x: new Date(2012, 01, 1), y: 240 },
|
||||
{ x: new Date(2012, 02, 1), y: 295},
|
||||
{ x: new Date(2012, 03, 1), y: 300 },
|
||||
{ x: new Date(2012, 04, 1), y: 265 },
|
||||
{ x: new Date(2012, 05, 1), y: 235 },
|
||||
{ x: new Date(2012, 06, 1), y: 245 },
|
||||
{ x: new Date(2012, 07, 1), y: 255 },
|
||||
{ x: new Date(2012, 08, 1), y: 275 },
|
||||
{ x: new Date(2012, 09, 1), y: 290 }
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Number of Persons involved in Traffic Accidents by Mode of Transport",
|
||||
margin: 15
|
||||
},
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
axisX: {
|
||||
valueFormatString: "MMM",
|
||||
interval: 1,
|
||||
intervalType: "month"
|
||||
},
|
||||
axisY: {
|
||||
maximum: 3100,
|
||||
interval: 1000
|
||||
},
|
||||
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "center"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "stackedArea",
|
||||
name: "cars",
|
||||
showInLegend: "true",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 1100 },
|
||||
{ x: new Date(2012, 01, 1), y: 1200 },
|
||||
{ x: new Date(2012, 02, 1), y: 1000 },
|
||||
{ x: new Date(2012, 03, 1), y: 1200 },
|
||||
{ x: new Date(2012, 04, 1), y: 1600 },
|
||||
{ x: new Date(2012, 05, 1), y: 1800 },
|
||||
{ x: new Date(2012, 06, 1), y: 1400 },
|
||||
{ x: new Date(2012, 07, 1), y: 1500 },
|
||||
{ x: new Date(2012, 08, 1), y: 1600 },
|
||||
{ x: new Date(2012, 09, 1), y: 1800 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedArea",
|
||||
name: "trucks",
|
||||
showInLegend: "true",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 150 },
|
||||
{ x: new Date(2012, 01, 1), y: 171 },
|
||||
{ x: new Date(2012, 02, 1), y: 155 },
|
||||
{ x: new Date(2012, 03, 1), y: 150 },
|
||||
{ x: new Date(2012, 04, 1), y: 165 },
|
||||
{ x: new Date(2012, 05, 1), y: 195 },
|
||||
{ x: new Date(2012, 06, 1), y: 155 },
|
||||
{ x: new Date(2012, 07, 1), y: 145 },
|
||||
{ x: new Date(2012, 08, 1), y: 140 },
|
||||
{ x: new Date(2012, 09, 1), y: 151 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedArea",
|
||||
name: "bicycles",
|
||||
showInLegend: "true",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 71 },
|
||||
{ x: new Date(2012, 01, 1), y: 41 },
|
||||
{ x: new Date(2012, 02, 1), y: 55 },
|
||||
{ x: new Date(2012, 03, 1), y: 50 },
|
||||
{ x: new Date(2012, 04, 1), y: 65 },
|
||||
{ x: new Date(2012, 05, 1), y: 95 },
|
||||
{ x: new Date(2012, 06, 1), y: 45 },
|
||||
{ x: new Date(2012, 07, 1), y: 95 },
|
||||
{ x: new Date(2012, 08, 1), y: 60 },
|
||||
{ x: new Date(2012, 09, 1), y: 40 }
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "stackedArea",
|
||||
name: "motorcycles",
|
||||
showInLegend: "true",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 861 },
|
||||
{ x: new Date(2012, 01, 1), y: 761 },
|
||||
{ x: new Date(2012, 02, 1), y: 775 },
|
||||
{ x: new Date(2012, 03, 1), y: 680 },
|
||||
{ x: new Date(2012, 04, 1), y: 785 },
|
||||
{ x: new Date(2012, 05, 1), y: 374 },
|
||||
{ x: new Date(2012, 06, 1), y: 365 },
|
||||
{ x: new Date(2012, 07, 1), y: 455 },
|
||||
{ x: new Date(2012, 08, 1), y: 657 },
|
||||
{ x: new Date(2012, 09, 1), y: 659 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedArea",
|
||||
name: "pedistrians",
|
||||
showInLegend: "true",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 220 },
|
||||
{ x: new Date(2012, 01, 1), y: 240 },
|
||||
{ x: new Date(2012, 02, 1), y: 295 },
|
||||
{ x: new Date(2012, 03, 1), y: 300 },
|
||||
{ x: new Date(2012, 04, 1), y: 265 },
|
||||
{ x: new Date(2012, 05, 1), y: 235 },
|
||||
{ x: new Date(2012, 06, 1), y: 245 },
|
||||
{ x: new Date(2012, 07, 1), y: 255 },
|
||||
{ x: new Date(2012, 08, 1), y: 275 },
|
||||
{ x: new Date(2012, 09, 1), y: 290 }
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Basic Scatter Chart"
|
||||
},
|
||||
data: [{
|
||||
type: "scatter",
|
||||
dataPoints: [
|
||||
{ x: 100, y: 110 },
|
||||
{ x: 110, y: 120 },
|
||||
{ x: 130, y: 125 },
|
||||
{ x: 150, y: 128 },
|
||||
{ x: 180, y: 160 },
|
||||
{ x: 200, y: 220 },
|
||||
{ x: 207, y: 220 },
|
||||
{ x: 210, y: 220 },
|
||||
{ x: 245, y: 220 },
|
||||
{ x: 265, y: 253 },
|
||||
{ x: 285, y: 304 },
|
||||
{ x: 300, y: 403 },
|
||||
{ x: 304, y: 304 },
|
||||
{ x: 306, y: 406 },
|
||||
{ x: 310, y: 404 },
|
||||
{ x: 315, y: 510 },
|
||||
{ x: 319, y: 420 },
|
||||
{ x: 344, y: 303 },
|
||||
{ x: 374, y: 302 },
|
||||
{ x: 400, y: 821 },
|
||||
{ x: 405, y: 804 },
|
||||
{ x: 405, y: 906 },
|
||||
{ x: 423, y: 830 },
|
||||
{ x: 441, y: 930 },
|
||||
{ x: 452, y: 630 },
|
||||
{ x: 454, y: 990 },
|
||||
{ x: 466, y: 420 },
|
||||
{ x: 485, y: 820 },
|
||||
{ x: 500, y: 904 },
|
||||
{ x: 503, y: 920 },
|
||||
{ x: 507, y: 702 },
|
||||
{ x: 530, y: 904 },
|
||||
{ x: 533, y: 903 },
|
||||
{ x: 567, y: 1010 },
|
||||
{ x: 587, y: 402 },
|
||||
{ x: 600, y: 1020 },
|
||||
{ x: 604, y: 1010 },
|
||||
{ x: 604, y: 1040 },
|
||||
{ x: 609, y: 940 },
|
||||
{ x: 610, y: 940 },
|
||||
{ x: 640, y: 900 },
|
||||
{ x: 641, y: 1060 },
|
||||
{ x: 644, y: 1040 },
|
||||
{ x: 660, y: 1240 },
|
||||
{ x: 664, y: 1340 },
|
||||
{ x: 704, y: 1040 },
|
||||
{ x: 732, y: 1060 },
|
||||
{ x: 763, y: 1100 },
|
||||
{ x: 781, y: 1200 },
|
||||
{ x: 785, y: 1300 },
|
||||
{ x: 809, y: 1040 },
|
||||
{ x: 905, y: 1340 }
|
||||
]
|
||||
}]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Server Performance",
|
||||
fontSize: 20
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisX: {
|
||||
title: "Server Load (TPS)",
|
||||
titleFontSize: 18
|
||||
|
||||
},
|
||||
axisY: {
|
||||
title: "Response Time (sec)",
|
||||
titleFontSize: 16
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: 'bottom',
|
||||
horizontalAlign: "center"
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
type: "scatter",
|
||||
markerType: "square",
|
||||
toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong> Load</strong> {x} <br/><strong> Response</strong></span> {y}sec",
|
||||
|
||||
name: "Server Pluto",
|
||||
showInLegend: true,
|
||||
dataPoints: [
|
||||
|
||||
{ x: 23, y: 4 },
|
||||
{ x: 28, y: 5 },
|
||||
{ x: 39, y: 9 },
|
||||
{ x: 34, y: 8 },
|
||||
{ x: 24, y: 3 },
|
||||
{ x: 29, y: 7 },
|
||||
{ x: 29, y: 5 },
|
||||
{ x: 23, y: 6 },
|
||||
{ x: 27, y: 7 },
|
||||
{ x: 34, y: 11 },
|
||||
{ x: 36, y: 9 },
|
||||
{ x: 33, y: 5 },
|
||||
{ x: 32, y: 8 },
|
||||
{ x: 21, y: 2 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "scatter",
|
||||
name: "Server Mars",
|
||||
markerType: "triangle",
|
||||
showInLegend: true,
|
||||
toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong> Load</strong> {x} <br/><strong> Response</strong></span> {y}sec",
|
||||
|
||||
dataPoints: [
|
||||
|
||||
{ x: 24, y: 2 },
|
||||
{ x: 27, y: 3 },
|
||||
{ x: 35, y: 7 },
|
||||
{ x: 32, y: 6 },
|
||||
{ x: 29, y: 4 },
|
||||
{ x: 23, y: 5 },
|
||||
{ x: 24, y: 3 },
|
||||
{ x: 26, y: 4 },
|
||||
{ x: 24, y: 5 },
|
||||
{ x: 33, y: 7 },
|
||||
{ x: 34, y: 6 },
|
||||
{ x: 30, y: 4 },
|
||||
{ x: 37, y: 8 },
|
||||
{ x: 24, y: 2 }
|
||||
|
||||
]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
cursor: "pointer",
|
||||
itemclick: function (e) {
|
||||
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
|
||||
e.dataSeries.visible = false;
|
||||
}
|
||||
else {
|
||||
e.dataSeries.visible = true;
|
||||
}
|
||||
chart.render();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Basic Candle Stick Chart"
|
||||
},
|
||||
zoomEnabled: true,
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
title: "Prices",
|
||||
prefix: "$ "
|
||||
},
|
||||
axisX: {
|
||||
interval: 2,
|
||||
intervalType: "month",
|
||||
valueFormatString: "MMM-YY",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "candlestick",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 01, 01), y: [5198, 5629, 5159, 5385] },
|
||||
{ x: new Date(2012, 02, 01), y: [5366, 5499, 5135, 5295] },
|
||||
{ x: new Date(2012, 03, 01), y: [5296, 5378, 5154, 5248] },
|
||||
{ x: new Date(2012, 04, 01), y: [5254, 5279, 4788, 4924] },
|
||||
{ x: new Date(2012, 05, 01), y: [4910, 5286, 4770, 5278] },
|
||||
{ x: new Date(2012, 06, 01), y: [5283, 5348, 5032, 5229] },
|
||||
{ x: new Date(2012, 07, 01), y: [5220, 5448, 5164, 5258] },
|
||||
{ x: new Date(2012, 08, 01), y: [5276, 5735, 5215, 5703] },
|
||||
{ x: new Date(2012, 09, 01), y: [5704, 5815, 4888, 5619] },
|
||||
{ x: new Date(2012, 10, 01), y: [5609, 5885, 5548, 5879] },
|
||||
{ x: new Date(2012, 11, 01), y: [5878, 5965, 5823, 5905] },
|
||||
{ x: new Date(2013, 00, 01), y: [5937, 6111, 5935, 6034] },
|
||||
{ x: new Date(2013, 01, 01), y: [6040, 6052, 5671, 5693] },
|
||||
{ x: new Date(2013, 02, 01), y: [5702, 5971, 5604, 5682] },
|
||||
{ x: new Date(2013, 03, 01), y: [5697, 5962, 5477, 5930] },
|
||||
{ x: new Date(2013, 04, 01), y: [5911, 6229, 5910, 5985] },
|
||||
{ x: new Date(2013, 05, 01), y: [5997, 6011, 5566, 5842] },
|
||||
{ x: new Date(2013, 06, 01), y: [5834, 6093, 5675, 5742] },
|
||||
{ x: new Date(2013, 07, 01), y: [5776, 5808, 5118, 5471] },
|
||||
{ x: new Date(2013, 08, 01), y: [5480, 6142, 5318, 5735] },
|
||||
{ x: new Date(2013, 09, 01), y: [5756, 6309, 5700, 6299] },
|
||||
{ x: new Date(2013, 10, 01), y: [6289, 6342, 5972, 6176] },
|
||||
{ x: new Date(2013, 11, 01), y: [6171, 6415, 6129, 6304] }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Candle Stick chart using risingColor property"
|
||||
},
|
||||
zoomEnabled: true,
|
||||
axisY: {
|
||||
includeZero:false,
|
||||
title: "Prices",
|
||||
prefix: "$ "
|
||||
},
|
||||
axisX: {
|
||||
interval:2,
|
||||
intervalType: "month",
|
||||
valueFormatString: "MMM-YY",
|
||||
labelAngle: -45
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "candlestick",
|
||||
risingColor: "#F79B8E",
|
||||
dataPoints: [
|
||||
{x: new Date(2012,01,01),y:[5198, 5629, 5159, 5385]},
|
||||
{x: new Date(2012,02,01),y:[5366, 5499, 5135, 5295]},
|
||||
{x: new Date(2012,03,01),y:[5296, 5378, 5154, 5248]},
|
||||
{x: new Date(2012,04,01),y:[5254, 5279, 4788, 4924]},
|
||||
{x: new Date(2012,05,01),y:[4910, 5286, 4770, 5278]},
|
||||
{x: new Date(2012,06,01),y:[5283, 5348, 5032, 5229]},
|
||||
{x: new Date(2012,07,01),y:[5220, 5448, 5164, 5258]},
|
||||
{x: new Date(2012,08,01),y:[5276, 5735, 5215, 5703]},
|
||||
{x: new Date(2012,09,01),y:[5704, 5815, 4888, 5619]},
|
||||
{x: new Date(2012,10,01),y:[5609, 5885, 5548, 5879]},
|
||||
{x: new Date(2012,11,01),y:[5878, 5965, 5823, 5905]}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Monthly Stock Prices for 2012",
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
prefix: "$",
|
||||
title: "Prices",
|
||||
},
|
||||
axisX: {
|
||||
interval: 1,
|
||||
intervalType: "month",
|
||||
valueFormatString: "MMM",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "ohlc",
|
||||
dataPoints: [ // Y: [Open, High ,Low, Close]
|
||||
{ x: new Date(2012, 00, 01), y: [53.65, 56.88, 50.28, 54.99] },
|
||||
{ x: new Date(2012, 01, 01), y: [55.52, 60.86, 54.97, 57.68] },
|
||||
{ x: new Date(2012, 02, 01), y: [57.84, 59.18, 55.24, 57.03] },
|
||||
{ x: new Date(2012, 03, 01), y: [57.12, 57.87, 44.45, 47.30] },
|
||||
{ x: new Date(2012, 04, 01), y: [47.37, 47.73, 41.59, 42.10] },
|
||||
{ x: new Date(2012, 05, 01), y: [41.96, 45.56, 41.40, 45.06] },
|
||||
{ x: new Date(2012, 06, 01), y: [45.46, 46.05, 37.93, 39.58] },
|
||||
{ x: new Date(2012, 07, 01), y: [39.94, 44.60, 38.97, 42.53] },
|
||||
{ x: new Date(2012, 08, 01), y: [42.38, 48.90, 41.58, 48.54] },
|
||||
{ x: new Date(2012, 09, 01), y: [49.36, 49.99, 42.58, 43.42] },
|
||||
{ x: new Date(2012, 10, 01), y: [43.82, 44.75, 41.59, 44.45] },
|
||||
{ x: new Date(2012, 11, 01), y: [44.25, 44.40, 41.18, 42.30] }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Stock Prices for June & July 2014"
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
prefix: "$ ",
|
||||
title: "Prices"
|
||||
},
|
||||
axisX: {
|
||||
interval: 1,
|
||||
valueFormatString: "MMM-DD"
|
||||
},
|
||||
toolTip: {
|
||||
content: "Date: {x} </br> <strong>Prices: </strong> </br> Open: {y[0]}, Close: {y[3]} </br> High: {y[1]}, Low: {y[2]} "
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "ohlc",
|
||||
color: "brown",
|
||||
dataPoints: [ // Y: [Open, High ,Low, Close]
|
||||
{ x: new Date(2014, 05, 2), y: [184.76, 186.28, 184.67, 185.69] },
|
||||
{ x: new Date(2014, 05, 3), y: [185.55, 185.76, 184.12, 184.37] },
|
||||
{ x: new Date(2014, 05, 4), y: [184.71, 185.45, 184.20, 184.51] },
|
||||
{ x: new Date(2014, 05, 5), y: [184.66, 186.09, 183.92, 185.98] },
|
||||
{ x: new Date(2014, 05, 6), y: [186.47, 187.65, 185.90, 186.37] },
|
||||
{ x: new Date(2014, 05, 9), y: [186.22, 187.64, 185.96, 186.22] },
|
||||
{ x: new Date(2014, 05, 10), y: [186.20, 186.22, 183.82, 184.29] },
|
||||
{ x: new Date(2014, 05, 11), y: [183.64, 184.20, 182.01, 182.25] },
|
||||
{ x: new Date(2014, 05, 12), y: [182.48, 182.55, 180.91, 181.22] },
|
||||
{ x: new Date(2014, 05, 13), y: [182.00, 183.00, 181.52, 182.56] },
|
||||
{ x: new Date(2014, 05, 16), y: [182.40, 182.71, 181.24, 182.35] },
|
||||
{ x: new Date(2014, 05, 17), y: [181.90, 182.81, 181.56, 182.26] },
|
||||
{ x: new Date(2014, 05, 18), y: [182.04, 183.61, 181.79, 183.60] },
|
||||
{ x: new Date(2014, 05, 19), y: [184.12, 184.47, 182.36, 182.82] },
|
||||
{ x: new Date(2014, 05, 20), y: [182.59, 182.67, 181.40, 181.55] },
|
||||
{ x: new Date(2014, 05, 23), y: [181.92, 182.25, 181.00, 182.14] },
|
||||
{ x: new Date(2014, 05, 24), y: [181.50, 183.00, 180.65, 180.88] },
|
||||
{ x: new Date(2014, 05, 25), y: [180.25, 180.97, 180.06, 180.72] },
|
||||
{ x: new Date(2014, 05, 26), y: [180.87, 181.37, 179.27, 180.37] },
|
||||
{ x: new Date(2014, 05, 27), y: [179.77, 182.46, 179.66, 181.71] },
|
||||
{ x: new Date(2014, 05, 30), y: [181.33, 181.93, 180.26, 181.27] },
|
||||
{ x: new Date(2014, 06, 1), y: [181.70, 187.27, 181.70, 186.35] },
|
||||
{ x: new Date(2014, 06, 2), y: [186.35, 188.99, 186.17, 188.39] },
|
||||
{ x: new Date(2014, 06, 3), y: [188.39, 188.81, 187.35, 188.53] },
|
||||
{ x: new Date(2014, 06, 7), y: [187.61, 188.27, 187.44, 188.04] },
|
||||
{ x: new Date(2014, 06, 8), y: [187.65, 188.08, 186.37, 187.22] },
|
||||
{ x: new Date(2014, 06, 9), y: [187.68, 188.90, 186.89, 188.42] },
|
||||
{ x: new Date(2014, 06, 10), y: [186.44, 188.05, 186.21, 187.70] },
|
||||
{ x: new Date(2014, 06, 11), y: [187.73, 188.35, 186.70, 188.00] },
|
||||
{ x: new Date(2014, 06, 14), y: [188.53, 190.44, 188.53, 189.86] },
|
||||
{ x: new Date(2014, 06, 15), y: [189.38, 190.08, 188.21, 188.49] },
|
||||
{ x: new Date(2014, 06, 16), y: [192.20, 193.36, 190.76, 192.36] },
|
||||
{ x: new Date(2014, 06, 17), y: [192.36, 195.95, 192.00, 192.49] },
|
||||
{ x: new Date(2014, 06, 18), y: [191.96, 193.44, 190.00, 192.50] },
|
||||
{ x: new Date(2014, 06, 21), y: [191.30, 191.70, 189.25, 190.85] },
|
||||
{ x: new Date(2014, 06, 22), y: [191.56, 194.72, 191.56, 194.09] },
|
||||
{ x: new Date(2014, 06, 23), y: [194.11, 194.90, 193.57, 193.63] },
|
||||
{ x: new Date(2014, 06, 24), y: [193.95, 195.62, 193.75, 195.24] },
|
||||
{ x: new Date(2014, 06, 25), y: [195.30, 195.90, 193.79, 194.40] },
|
||||
{ x: new Date(2014, 06, 28), y: [194.30, 196.40, 193.65, 195.78] },
|
||||
{ x: new Date(2014, 06, 29), y: [195.30, 195.89, 194.54, 194.57] },
|
||||
{ x: new Date(2014, 06, 30), y: [195.20, 195.99, 192.90, 194.00] }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Basic Step Line Chart"
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "stepLine",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 1), y: 8.3 },
|
||||
{ x: new Date(2012, 2), y: 8.2 },
|
||||
{ x: new Date(2012, 3), y: 8.1 },
|
||||
{ x: new Date(2012, 4), y: 8.2 },
|
||||
{ x: new Date(2012, 5), y: 8.2 },
|
||||
{ x: new Date(2012, 6), y: 8.2 },
|
||||
{ x: new Date(2012, 7), y: 8.1 },
|
||||
{ x: new Date(2012, 8), y: 7.8 },
|
||||
{ x: new Date(2012, 9), y: 7.9 },
|
||||
{ x: new Date(2012, 10), y: 7.8 },
|
||||
{ x: new Date(2012, 11), y: 7.8 },
|
||||
{ x: new Date(2013, 0), y: 7.9 },
|
||||
{ x: new Date(2013, 1), y: 7.7 },
|
||||
{ x: new Date(2013, 2), y: 7.6 },
|
||||
{ x: new Date(2013, 3), y: 7.5 }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Multi-Series StepLine Chart"
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
minimum: 13,
|
||||
},
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
|
||||
axisY2: {
|
||||
includeZero: false,
|
||||
minimum: 25,
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
type: "stepLine",
|
||||
dataPoints: [
|
||||
|
||||
{ x: new Date(2008, 02), y: 15.00 },
|
||||
{ x: new Date(2008, 03), y: 14.50 },
|
||||
{ x: new Date(2008, 04), y: 14.00 },
|
||||
{ x: new Date(2008, 05), y: 14.50 },
|
||||
{ x: new Date(2008, 06), y: 14.75 },
|
||||
{ x: new Date(2008, 07), y: null },
|
||||
{ x: new Date(2008, 08), y: 15.80 },
|
||||
{ x: new Date(2008, 09), y: 17.50 }
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stepLine",
|
||||
axisYType: "secondary",
|
||||
dataPoints: [
|
||||
|
||||
{ x: new Date(2008, 02), y: 41.00 },
|
||||
{ x: new Date(2008, 03), y: 43.50 },
|
||||
{ x: new Date(2008, 04), y: 41.00 },
|
||||
{ x: new Date(2008, 05), y: null },
|
||||
{ x: new Date(2008, 06), y: 47.55 },
|
||||
{ x: new Date(2008, 07), y: 45.00 },
|
||||
{ x: new Date(2008, 08), y: 40.70 },
|
||||
{ x: new Date(2008, 09), y: 37.00 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Basic Step Line Chart"
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
type: "stepArea",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 1), y: 8.3 },
|
||||
{ x: new Date(2012, 2), y: 8.2 },
|
||||
{ x: new Date(2012, 3), y: 8.1 },
|
||||
{ x: new Date(2012, 4), y: 8.2 },
|
||||
{ x: new Date(2012, 5), y: 8.2 },
|
||||
{ x: new Date(2012, 6), y: 8.2 },
|
||||
{ x: new Date(2012, 7), y: 8.1 },
|
||||
{ x: new Date(2012, 8), y: 7.8 },
|
||||
{ x: new Date(2012, 9), y: 7.9 },
|
||||
{ x: new Date(2012, 10), y: 7.8 },
|
||||
{ x: new Date(2012, 11), y: 7.8 },
|
||||
{ x: new Date(2013, 0), y: 7.9 },
|
||||
{ x: new Date(2013, 1), y: 7.7 },
|
||||
{ x: new Date(2013, 2), y: 7.6 },
|
||||
{ x: new Date(2013, 3), y: 7.5 }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Spline Area Chart"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "splineArea",
|
||||
dataPoints: [
|
||||
{ x: new Date(1992, 0), y: 2506000 },
|
||||
{ x: new Date(1993, 0), y: 2798000 },
|
||||
{ x: new Date(1994, 0), y: 3386000 },
|
||||
{ x: new Date(1995, 0), y: 6944000 },
|
||||
{ x: new Date(1996, 0), y: 6026000 },
|
||||
{ x: new Date(1997, 0), y: 2394000 },
|
||||
{ x: new Date(1998, 0), y: 1872000 },
|
||||
{ x: new Date(1999, 0), y: 2140000 },
|
||||
{ x: new Date(2000, 0), y: 7289000 },
|
||||
{ x: new Date(2001, 0), y: 4830000 },
|
||||
{ x: new Date(2002, 0), y: 2009000 },
|
||||
{ x: new Date(2003, 0), y: 2840000 },
|
||||
{ x: new Date(2004, 0), y: 2396000 },
|
||||
{ x: new Date(2005, 0), y: 1613000 },
|
||||
{ x: new Date(2006, 0), y: 2821000 },
|
||||
{ x: new Date(2007, 0), y: 2000000 },
|
||||
{ x: new Date(2008, 0), y: 1397000 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Spline Area Chart with Stripline on Axis X"
|
||||
},
|
||||
axisX: {
|
||||
stripLines: [
|
||||
{
|
||||
value: 1940
|
||||
}
|
||||
],
|
||||
valueFormatString: "####"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "splineArea",
|
||||
color: "rgba(83, 223, 128, .6)",
|
||||
dataPoints: [
|
||||
{ x: 1910, y: 5 },
|
||||
{ x: 1920, y: 9 },
|
||||
{ x: 1930, y: 17 },
|
||||
{ x: 1940, y: 32 },
|
||||
{ x: 1950, y: 22 },
|
||||
{ x: 1960, y: 14 },
|
||||
{ x: 1970, y: 25 },
|
||||
{ x: 1980, y: 18 },
|
||||
{ x: 1990, y: 20 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Delhi Temperature (1 Apr - 7 Apr) 2014"
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
interval: 2,
|
||||
valueFormatString: "#0.## °C"
|
||||
},
|
||||
axisX: {
|
||||
interval: 1,
|
||||
valueFormatString: "DD-MMM"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "rangeBar",
|
||||
yValueFormatString: "#0.## °C",
|
||||
dataPoints: [
|
||||
{x: new Date(2014,03,1), y: [ 17,33]},
|
||||
{x: new Date(2014,03,2), y: [ 18,35]},
|
||||
{x: new Date(2014,03,3), y: [ 18,32]},
|
||||
{x: new Date(2014,03,4), y: [ 18,32]},
|
||||
{x: new Date(2014,03,5), y: [ 20,35]},
|
||||
{x: new Date(2014,03,6), y: [ 20,38]},
|
||||
{x: new Date(2014,03,7), y: [ 21,32]}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Employees Salary in a Company",
|
||||
},
|
||||
axisY: {
|
||||
includeZero:false,
|
||||
title: "Salary in USD(Thousands)",
|
||||
interval: 10,
|
||||
},
|
||||
axisX: {
|
||||
interval:10,
|
||||
title: "Departments",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "rangeBar",
|
||||
showInLegend: true,
|
||||
yValueFormatString: "$#0.##K",
|
||||
indexLabel: "{y[#index]}",
|
||||
legendText: "Department wise Min and Max Salary",
|
||||
dataPoints: [ // Y: [Low, High]
|
||||
{x: 10, y:[80, 110], label: "Data Scientist"},
|
||||
{x: 20, y:[95, 141], label: "Product Manager" },
|
||||
{x: 30, y:[98, 115], label: "Web Developer" },
|
||||
{x: 40, y:[90, 160], label: "Software Engineer"},
|
||||
{x: 50, y:[100,152], label: "Quality Assurance"}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Basic Range Column Chart"
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
interval: 10,
|
||||
title: "Temperature (C)"
|
||||
},
|
||||
axisX: {
|
||||
interval: 1,
|
||||
intervalType: "month",
|
||||
valueFormatString: "MMM"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "rangeColumn",
|
||||
color: "#369EAD",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012,00,01), y: [-9.7, 10.4] }, // y: [Low ,High]
|
||||
{ x: new Date(2012,01,01), y: [-8.7, 16.5] },
|
||||
{ x: new Date(2012,02,01), y: [-3.5, 19.4] },
|
||||
{ x: new Date(2012,03,01), y: [5.0, 22.6] },
|
||||
{ x: new Date(2012,04,01), y: [7.9, 29.5] },
|
||||
{ x: new Date(2012,05,01), y: [9.2, 34.7] },
|
||||
{ x: new Date(2012,06,01), y: [7.3, 30.5] },
|
||||
{ x: new Date(2012,07,01), y: [4.4, 25.5] },
|
||||
{ x: new Date(2012,08,01), y: [-3.1, 20.4] },
|
||||
{ x: new Date(2012,09,01), y: [-5.2, 15.4] },
|
||||
{ x: new Date(2012,10,01), y: [-13.5, 9.8] },
|
||||
{ x: new Date(2012,11,01), y: [-15.5, 5.8] }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Temperature Comparison of Two Cities",
|
||||
},
|
||||
exportEnabled: true,
|
||||
axisY: {
|
||||
includeZero:false,
|
||||
suffix: "°C",
|
||||
},
|
||||
axisX: {
|
||||
interval:1,
|
||||
intervalType: "month",
|
||||
valueFormatString: "MMM",
|
||||
},
|
||||
toolTip: {
|
||||
shared: true,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "rangeColumn",
|
||||
name: "City 1",
|
||||
indexLabel: "{y[#index]}",
|
||||
indexLabelFontSize: 12,
|
||||
yValueFormatString: "#0.## °C",
|
||||
showInLegend: true,
|
||||
dataPoints: [
|
||||
{x: new Date(2013,00,01), y: [08, 20]},
|
||||
{x: new Date(2013,01,01), y: [10, 24]},
|
||||
{x: new Date(2013,02,01), y: [16, 29]},
|
||||
{x: new Date(2013,03,01), y: [21, 36]},
|
||||
{x: new Date(2013,04,01), y: [26, 39]},
|
||||
{x: new Date(2013,05,01), y: [22, 39]},
|
||||
{x: new Date(2013,06,01), y: [20, 35]},
|
||||
{x: new Date(2013,07,01), y: [20, 34]},
|
||||
{x: new Date(2013,08,01), y: [20, 34]},
|
||||
{x: new Date(2013,09,01), y: [19, 33]},
|
||||
{x: new Date(2013,10,01), y: [13, 28]},
|
||||
{x: new Date(2013,11,01), y: [09, 23]}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "rangeColumn",
|
||||
showInLegend: true,
|
||||
name: "City 2",
|
||||
indexLabel: "{y[#index]}",
|
||||
indexLabelFontSize: 12,
|
||||
yValueFormatString: "#0.## °C",
|
||||
dataPoints: [
|
||||
{x: new Date(2013,00,01), y: [16, 28]},
|
||||
{x: new Date(2013,01,01), y: [18, 31]},
|
||||
{x: new Date(2013,02,01), y: [20, 33]},
|
||||
{x: new Date(2013,03,01), y: [22, 34]},
|
||||
{x: new Date(2013,04,01), y: [22, 33]},
|
||||
{x: new Date(2013,05,01), y: [20, 29]},
|
||||
{x: new Date(2013,06,01), y: [20, 28]},
|
||||
{x: new Date(2013,07,01), y: [20, 28]},
|
||||
{x: new Date(2013,08,01), y: [20, 28]},
|
||||
{x: new Date(2013,09,01), y: [20, 28]},
|
||||
{x: new Date(2013,10,01), y: [14, 27]},
|
||||
{x: new Date(2013,11,01), y: [11, 26]}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Basic Range Area Chart"
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false
|
||||
},
|
||||
axisX: {
|
||||
interval: 10
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "rangeArea",
|
||||
dataPoints: [
|
||||
{ x: 10, y: [18.86, 40.76] }, // y: [Low, High]
|
||||
{ x: 20, y: [55.95, 78.26] },
|
||||
{ x: 30, y: [48.27, 72.90] },
|
||||
{ x: 40, y: [67.65, 99.65] },
|
||||
{ x: 50, y: [25.50, 51.26] }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title:{
|
||||
text: "Monthly Temperature variation in New Delhi",
|
||||
},
|
||||
exportEnabled: true,
|
||||
animationEnabled: true,
|
||||
axisY: {
|
||||
title: "Temperature (°C)",
|
||||
},
|
||||
axisX: {
|
||||
valueFormatString: "MMM",
|
||||
},
|
||||
toolTip: {
|
||||
content: "Date: {x} </br> <strong>Temperature: </strong> </br> Min: {y[0]}°C, Max: {y[1]}°C",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "rangeSplineArea",
|
||||
indexLabel: "{y[#index]}",
|
||||
dataPoints: [
|
||||
{x: new Date(2013,00,01), y: [08, 20]},
|
||||
{x: new Date(2013,01,01), y: [10, 24]},
|
||||
{x: new Date(2013,02,01), y: [16, 29]},
|
||||
{x: new Date(2013,03,01), y: [21, 36]},
|
||||
{x: new Date(2013,04,01), y: [26, 39]},
|
||||
{x: new Date(2013,05,01), y: [22, 39]},
|
||||
{x: new Date(2013,06,01), y: null},
|
||||
{x: new Date(2013,07,01), y: [20, 34]},
|
||||
{x: new Date(2013,08,01), y: [20, 34]},
|
||||
{x: new Date(2013,09,01), y: [19, 33]},
|
||||
{x: new Date(2013,10,01), y: [13, 28]},
|
||||
{x: new Date(2013,11,01), y: [09, 23]}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Basic Range Spline Area Chart"
|
||||
},
|
||||
axisX: {
|
||||
interval: 10
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "rangeSplineArea",
|
||||
dataPoints: [
|
||||
{ x: 10, y: [8.86, 50.76] },
|
||||
{ x: 20, y: [5.95, 38.26] },
|
||||
{ x: 30, y: [28.27, 52.90] },
|
||||
{ x: 40, y: [57.65, 78.65] },
|
||||
{ x: 50, y: [15.50, 31.26] },
|
||||
{ x: 60, y: [18.86, 55.76] },
|
||||
{ x: 70, y: [55.95, 98.26] },
|
||||
{ x: 80, y: [48.27, 72.90] },
|
||||
{ x: 90, y: [67.65, 86.65] },
|
||||
{ x: 100, y: [25.50, 71.26] }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Annual Expenses"
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
prefix: "$ "
|
||||
},
|
||||
toolTip: {
|
||||
shared: true,
|
||||
content: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span> <span style='\"'color: dimgrey;'\"'>${y}</span> "
|
||||
},
|
||||
legend: {
|
||||
fontSize: 13
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "splineArea",
|
||||
showInLegend: true,
|
||||
name: "Salaries",
|
||||
color: "rgba(54,158,173,.6)",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 2), y: 30000 },
|
||||
{ x: new Date(2012, 3), y: 35000 },
|
||||
{ x: new Date(2012, 4), y: 30000 },
|
||||
{ x: new Date(2012, 5), y: 30400 },
|
||||
{ x: new Date(2012, 6), y: 20900 },
|
||||
{ x: new Date(2012, 7), y: 31000 },
|
||||
{ x: new Date(2012, 8), y: 30200 },
|
||||
{ x: new Date(2012, 9), y: 30000 },
|
||||
{ x: new Date(2012, 10), y: 33000 },
|
||||
{ x: new Date(2012, 11), y: 38000 },
|
||||
{ x: new Date(2013, 0), y: 38900 },
|
||||
{ x: new Date(2013, 1), y: 39000 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "splineArea",
|
||||
showInLegend: true,
|
||||
name: "Office Cost",
|
||||
color: "rgba(134,180,2,.7)",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 2), y: 20100 },
|
||||
{ x: new Date(2012, 3), y: 16000 },
|
||||
{ x: new Date(2012, 4), y: 14000 },
|
||||
{ x: new Date(2012, 5), y: 18000 },
|
||||
{ x: new Date(2012, 6), y: 18000 },
|
||||
{ x: new Date(2012, 7), y: 21000 },
|
||||
{ x: new Date(2012, 8), y: 22000 },
|
||||
{ x: new Date(2012, 9), y: 25000 },
|
||||
{ x: new Date(2012, 10), y: 23000 },
|
||||
{ x: new Date(2012, 11), y: 25000 },
|
||||
{ x: new Date(2013, 0), y: 26000 },
|
||||
{ x: new Date(2013, 1), y: 25000 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "splineArea",
|
||||
showInLegend: true,
|
||||
name: "Entertainment",
|
||||
color: "rgba(194,70,66,.6)",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 2), y: 10100 },
|
||||
{ x: new Date(2012, 3), y: 6000 },
|
||||
{ x: new Date(2012, 4), y: 3400 },
|
||||
{ x: new Date(2012, 5), y: 4000 },
|
||||
{ x: new Date(2012, 6), y: 9000 },
|
||||
{ x: new Date(2012, 7), y: 3900 },
|
||||
{ x: new Date(2012, 8), y: 4200 },
|
||||
{ x: new Date(2012, 9), y: 5000 },
|
||||
{ x: new Date(2012, 10), y: 14300 },
|
||||
{ x: new Date(2012, 11), y: 12300 },
|
||||
{ x: new Date(2013, 0), y: 8300 },
|
||||
{ x: new Date(2013, 1), y: 6300 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "splineArea",
|
||||
showInLegend: true,
|
||||
color: "rgba(127,96,132,.6)",
|
||||
name: "Maintenance",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 2), y: 1700 },
|
||||
{ x: new Date(2012, 3), y: 2600 },
|
||||
{ x: new Date(2012, 4), y: 1000 },
|
||||
{ x: new Date(2012, 5), y: 1400 },
|
||||
{ x: new Date(2012, 6), y: 900 },
|
||||
{ x: new Date(2012, 7), y: 1000 },
|
||||
{ x: new Date(2012, 8), y: 1200 },
|
||||
{ x: new Date(2012, 9), y: 5000 },
|
||||
{ x: new Date(2012, 10), y: 1300 },
|
||||
{ x: new Date(2012, 11), y: 2300 },
|
||||
{ x: new Date(2013, 0), y: 2800 },
|
||||
{ x: new Date(2013, 1), y: 1300 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "spline",
|
||||
showInLegend: true,
|
||||
color: "rgba(127,96,255,.6)",
|
||||
name: "Average",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 2), y: 15475 },
|
||||
{ x: new Date(2012, 3), y: 14900 },
|
||||
{ x: new Date(2012, 4), y: 12100 },
|
||||
{ x: new Date(2012, 5), y: 13450 },
|
||||
{ x: new Date(2012, 6), y: 12200 },
|
||||
{ x: new Date(2012, 7), y: 14225 },
|
||||
{ x: new Date(2012, 8), y: 14400 },
|
||||
{ x: new Date(2012, 9), y: 16250 },
|
||||
{ x: new Date(2012, 10), y: 17900 },
|
||||
{ x: new Date(2012, 11), y: 19400 },
|
||||
{ x: new Date(2013, 0), y: 19000 },
|
||||
{ x: new Date(2013, 1), y: 17900 }
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Number of Persons involved in Traffic Accidents by Mode of Transport"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "stackedArea100",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 1100 },
|
||||
{ x: new Date(2012, 01, 1), y: 1200 },
|
||||
{ x: new Date(2012, 02, 1), y: 1000 },
|
||||
{ x: new Date(2012, 03, 1), y: 1200 },
|
||||
{ x: new Date(2012, 04, 1), y: 1600 },
|
||||
{ x: new Date(2012, 05, 1), y: 1800 },
|
||||
{ x: new Date(2012, 06, 1), y: 1400 },
|
||||
{ x: new Date(2012, 07, 1), y: 1500 },
|
||||
{ x: new Date(2012, 08, 1), y: 1600 },
|
||||
{ x: new Date(2012, 09, 1), y: 1800 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedArea100",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 150 },
|
||||
{ x: new Date(2012, 01, 1), y: 171 },
|
||||
{ x: new Date(2012, 02, 1), y: 155 },
|
||||
{ x: new Date(2012, 03, 1), y: 150 },
|
||||
{ x: new Date(2012, 04, 1), y: 165 },
|
||||
{ x: new Date(2012, 05, 1), y: 195 },
|
||||
{ x: new Date(2012, 06, 1), y: 155 },
|
||||
{ x: new Date(2012, 07, 1), y: 145 },
|
||||
{ x: new Date(2012, 08, 1), y: 140 },
|
||||
{ x: new Date(2012, 09, 1), y: 151 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedArea100",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 71 },
|
||||
{ x: new Date(2012, 01, 1), y: 41 },
|
||||
{ x: new Date(2012, 02, 1), y: 55 },
|
||||
{ x: new Date(2012, 03, 1), y: 50 },
|
||||
{ x: new Date(2012, 04, 1), y: 65 },
|
||||
{ x: new Date(2012, 05, 1), y: 95 },
|
||||
{ x: new Date(2012, 06, 1), y: 45 },
|
||||
{ x: new Date(2012, 07, 1), y: 95 },
|
||||
{ x: new Date(2012, 08, 1), y: 60 },
|
||||
{ x: new Date(2012, 09, 1), y: 40 }
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "stackedArea100",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 861 },
|
||||
{ x: new Date(2012, 01, 1), y: 761 },
|
||||
{ x: new Date(2012, 02, 1), y: 775 },
|
||||
{ x: new Date(2012, 03, 1), y: 680 },
|
||||
{ x: new Date(2012, 04, 1), y: 785 },
|
||||
{ x: new Date(2012, 05, 1), y: 374 },
|
||||
{ x: new Date(2012, 06, 1), y: 365 },
|
||||
{ x: new Date(2012, 07, 1), y: 455 },
|
||||
{ x: new Date(2012, 08, 1), y: 657 },
|
||||
{ x: new Date(2012, 09, 1), y: 659 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedArea100",
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 00, 1), y: 220 },
|
||||
{ x: new Date(2012, 01, 1), y: 240 },
|
||||
{ x: new Date(2012, 02, 1), y: 295 },
|
||||
{ x: new Date(2012, 03, 1), y: 300 },
|
||||
{ x: new Date(2012, 04, 1), y: 265 },
|
||||
{ x: new Date(2012, 05, 1), y: 235 },
|
||||
{ x: new Date(2012, 06, 1), y: 245 },
|
||||
{ x: new Date(2012, 07, 1), y: 255 },
|
||||
{ x: new Date(2012, 08, 1), y: 275 },
|
||||
{ x: new Date(2012, 09, 1), y: 290 }
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Products Sold by ABC ltd. in 2011"
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisY: {
|
||||
title: "Sales"
|
||||
},
|
||||
axisX: {
|
||||
title: "Seasons"
|
||||
},
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "stackedArea100",
|
||||
name: "Mosquito Repellents",
|
||||
showInLegend: "true",
|
||||
dataPoints: [
|
||||
{ y: 83450, label: "spring" },
|
||||
{ y: 51240, label: "summer" },
|
||||
{ y: 64120, label: "fall" },
|
||||
{ y: 71450, label: "winter" }
|
||||
|
||||
]
|
||||
}, {
|
||||
type: "stackedArea100",
|
||||
name: "Liquid Soap",
|
||||
showInLegend: "true",
|
||||
dataPoints: [
|
||||
{ y: 20140, label: "spring" },
|
||||
{ y: 30170, label: "summer" },
|
||||
{ y: 24410, label: "autumn" },
|
||||
{ y: 38120, label: "fall" }
|
||||
|
||||
]
|
||||
}, {
|
||||
type: "stackedArea100",
|
||||
name: "Napkins",
|
||||
showInLegend: "true",
|
||||
dataPoints: [
|
||||
{ y: 45120, label: "spring" },
|
||||
{ y: 50350, label: "summer" },
|
||||
{ y: 48410, label: "autumn" },
|
||||
{ y: 53120, label: "fall" }
|
||||
|
||||
]
|
||||
}, {
|
||||
type: "stackedArea100",
|
||||
name: "Sanitizer",
|
||||
showInLegend: "true",
|
||||
dataPoints: [
|
||||
{ y: 11050, label: "spring" },
|
||||
{ y: 16100, label: "summer" },
|
||||
{ y: 15010, label: "autumn" },
|
||||
{ y: 23100, label: "fall" }
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Division of products Sold in Quarter."
|
||||
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "stackedBar100",
|
||||
dataPoints: [
|
||||
{ y: 600, label: "Water Filter" },
|
||||
{ y: 400, label: "Modern Chair" },
|
||||
{ y: 120, label: "VOIP Phone" },
|
||||
{ y: 250, label: "Microwave" },
|
||||
{ y: 120, label: "Water Filter" },
|
||||
{ y: 374, label: "Expresso Machine" },
|
||||
{ y: 350, label: "Lobby Chair" }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedBar100",
|
||||
dataPoints: [
|
||||
{ y: 400, label: "Water Filter" },
|
||||
{ y: 500, label: "Modern Chair" },
|
||||
{ y: 220, label: "VOIP Phone" },
|
||||
{ y: 350, label: "Microwave" },
|
||||
{ y: 220, label: "Water Filter" },
|
||||
{ y: 474, label: "Expresso Machine" },
|
||||
{ y: 450, label: "Lobby Chair" }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedBar100",
|
||||
dataPoints: [
|
||||
{ y: 300, label: "Water Filter" },
|
||||
{ y: 610, label: "Modern Chair" },
|
||||
{ y: 215, label: "VOIP Phone" },
|
||||
{ y: 221, label: "Microwave" },
|
||||
{ y: 75, label: "Water Filter" },
|
||||
{ y: 310, label: "Expresso Machine" },
|
||||
{ y: 340, label: "Lobby Chair" }
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
theme: 'theme2',
|
||||
title: {
|
||||
text: "Time Spent in Holiday Season"
|
||||
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisY: {
|
||||
title: "percent"
|
||||
},
|
||||
legend: {
|
||||
horizontalAlign: 'center',
|
||||
verticalAlign: 'bottom'
|
||||
},
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "stackedBar100",
|
||||
showInLegend: true,
|
||||
name: "With Friends",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ y: 350, label: "George" },
|
||||
{ y: 350, label: "Alex" },
|
||||
{ y: 350, label: "Mike" },
|
||||
{ y: 374, label: "Jake" },
|
||||
{ y: 320, label: "Shah" },
|
||||
{ y: 300, label: "Joe" },
|
||||
{ y: 400, label: "Fin" },
|
||||
{ y: 220, label: "Larry" }
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "stackedBar100",
|
||||
showInLegend: true,
|
||||
name: "Eating Out",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ y: 250, label: "George" },
|
||||
{ y: 280, label: "Alex" },
|
||||
{ y: 350, label: "Mike" },
|
||||
{ y: 274, label: "Jake" },
|
||||
{ y: 320, label: "Shah" },
|
||||
{ y: 320, label: "Joe" },
|
||||
{ y: 280, label: "Fin" },
|
||||
{ y: 420, label: "Larry" }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedBar100",
|
||||
showInLegend: true,
|
||||
name: "Reading",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ y: 350, label: "George" },
|
||||
{ y: 350, label: "Alex" },
|
||||
{ y: 350, label: "Mike" },
|
||||
{ y: 374, label: "Jake" },
|
||||
{ y: 120, label: "Shah" },
|
||||
{ y: 120, label: "Joe" },
|
||||
{ y: 400, label: "Fin" },
|
||||
{ y: 120, label: "Larry" }
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "stackedBar100",
|
||||
showInLegend: true,
|
||||
name: "Shopping",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ y: 250, label: "George" },
|
||||
{ y: 250, label: "Alex" },
|
||||
{ y: 250, label: "Mike" },
|
||||
{ y: 274, label: "Jake" },
|
||||
{ y: 320, label: "Shah" },
|
||||
{ y: 220, label: "Joe" },
|
||||
{ y: 100, label: "Fin" },
|
||||
{ y: 420, label: "Larry" }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "stackedBar100",
|
||||
showInLegend: true,
|
||||
name: "Fitness",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ y: 150, label: "George" },
|
||||
{ y: 30, label: "Alex" },
|
||||
{ y: 45, label: "Mike" },
|
||||
{ y: 74, label: "Jake" },
|
||||
{ y: 64, label: "Shah" },
|
||||
{ y: 40, label: "Joe" },
|
||||
{ y: 50, label: "Fin" },
|
||||
{ y: 40, label: "Larry" }
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "stackedBar100",
|
||||
showInLegend: true,
|
||||
name: "Travel",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ y: 150, label: "George" },
|
||||
{ y: 170, label: "Alex" },
|
||||
{ y: 150, label: "Mike" },
|
||||
{ y: 174, label: "Jake" },
|
||||
{ y: 120, label: "Shah" },
|
||||
{ y: 160, label: "Joe" },
|
||||
{ y: 100, label: "Fin" },
|
||||
{ y: 80, label: "Larry" }
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "stackedBar100",
|
||||
showInLegend: true,
|
||||
name: "Internet",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ y: 160, label: "George" },
|
||||
{ y: 170, label: "Alex" },
|
||||
{ y: 50, label: "Mike" },
|
||||
{ y: 174, label: "Jake" },
|
||||
{ y: 104, label: "Shah" },
|
||||
{ y: 120, label: "Joe" },
|
||||
{ y: 300, label: "Fin" },
|
||||
{ y: 420, label: "Larry" }
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "stackedBar100",
|
||||
showInLegend: true,
|
||||
name: "Hobbies",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ y: 80, label: "George" },
|
||||
{ y: 150, label: "Alex" },
|
||||
{ y: 50, label: "Mike" },
|
||||
{ y: 74, label: "Jake" },
|
||||
{ y: 40, label: "Shah" },
|
||||
{ y: 120, label: "Joe" },
|
||||
{ y: 100, label: "Fin" },
|
||||
{ y: 120, label: "Larry" }
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Number of Students in Each Room"
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
type: "stackedColumn100",
|
||||
dataPoints: [
|
||||
{ y: 40, label: "Cafeteria" },
|
||||
{ y: 10, label: "Lounge" },
|
||||
{ y: 72, label: "Games Room" },
|
||||
{ y: 30, label: "Lecture Hall" },
|
||||
{ y: 21, label: "Library" }
|
||||
]
|
||||
}, {
|
||||
type: "stackedColumn100",
|
||||
dataPoints: [
|
||||
{ y: 20, label: "Cafeteria" },
|
||||
{ y: 14, label: "Lounge" },
|
||||
{ y: 40, label: "Games Room" },
|
||||
{ y: 43, label: "Lecture Hall" },
|
||||
{ y: 17, label: "Library" }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Composition of Internet Traffic in North America",
|
||||
horizontalAlign: "right"
|
||||
},
|
||||
axisX: {
|
||||
tickThickness: 0,
|
||||
interval: 1,
|
||||
intervalType: "year"
|
||||
},
|
||||
animationEnabled: true,
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
axisY: {
|
||||
lineThickness: 0,
|
||||
tickThickness: 0,
|
||||
interval: 20
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: "center",
|
||||
horizontalAlign: "left"
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
name: "Real-Time",
|
||||
showInLegend: true,
|
||||
type: "stackedColumn100",
|
||||
color: "#004B8D ",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ x: new Date(2009, 0), y: 30 },
|
||||
{ x: new Date(2010, 0), y: 40 },
|
||||
{ x: new Date(2011, 0), y: 50 },
|
||||
{ x: new Date(2012, 0), y: 60 },
|
||||
{ x: new Date(2013, 0), y: 40 },
|
||||
{ x: new Date(2014, 0), y: 50 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Web Browsing",
|
||||
showInLegend: true,
|
||||
type: "stackedColumn100",
|
||||
color: "#0074D9 ",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ x: new Date(2009, 0), y: 40 },
|
||||
{ x: new Date(2010, 0), y: 28 },
|
||||
{ x: new Date(2011, 0), y: 18 },
|
||||
{ x: new Date(2012, 0), y: 18 },
|
||||
{ x: new Date(2013, 0), y: 18 },
|
||||
{ x: new Date(2014, 0), y: 18 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "File Sharing",
|
||||
showInLegend: true,
|
||||
type: "stackedColumn100",
|
||||
color: "#4192D9 ",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ x: new Date(2009, 0), y: 15 },
|
||||
{ x: new Date(2010, 0), y: 15 },
|
||||
{ x: new Date(2011, 0), y: 12 },
|
||||
{ x: new Date(2012, 0), y: 10 },
|
||||
{ x: new Date(2013, 0), y: 12 },
|
||||
{ x: new Date(2014, 0), y: 10 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Other",
|
||||
showInLegend: true,
|
||||
type: "stackedColumn100",
|
||||
color: "#7ABAF2 ",
|
||||
indexLabel: "{y}",
|
||||
dataPoints: [
|
||||
{ x: new Date(2009, 0), y: 15 },
|
||||
{ x: new Date(2010, 0), y: 17 },
|
||||
{ x: new Date(2011, 0), y: 20 },
|
||||
{ x: new Date(2012, 0), y: 18 },
|
||||
{ x: new Date(2013, 0), y: 20 },
|
||||
{ x: new Date(2014, 0), y: 17 }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CanvasJS Example - jQuery Line Chart</title>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
|
||||
<script src="../../jquery.canvasjs.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$(".chartContainer").CanvasJSChart({
|
||||
title: {
|
||||
text: "Basic JQuery Line Charts"
|
||||
},
|
||||
axisX: {
|
||||
interval: 10
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "line", //try changing to column, area
|
||||
dataPoints: [
|
||||
{ x: 10, y: 450 },
|
||||
{ x: 20, y: 414 },
|
||||
{ x: 30, y: 520 },
|
||||
{ x: 40, y: 460 },
|
||||
{ x: 50, y: 450 },
|
||||
{ x: 60, y: 500 },
|
||||
{ x: 70, y: 480 },
|
||||
{ x: 80, y: 480 },
|
||||
{ x: 90, y: 410 },
|
||||
{ x: 100, y: 500 },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CanvasJS Example - jQuery Line Chart</title>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<script src="../../jquery.canvasjs.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
//Better to construct options first and then pass it as a parameter
|
||||
var options = {
|
||||
zoomEnabled: true,
|
||||
animationEnabled: true,
|
||||
title: {
|
||||
text: "Fertility Rate Vs Life Expectancy in different countries - 2009"
|
||||
},
|
||||
axisX: {
|
||||
title: "Life Expectancy",
|
||||
maximum: 85
|
||||
},
|
||||
axisY: {
|
||||
title: "Fertility Rate"
|
||||
|
||||
},
|
||||
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "left"
|
||||
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "bubble",
|
||||
legendText: "Size of Bubble Represents Population",
|
||||
showInLegend: true,
|
||||
legendMarkerType: "circle",
|
||||
legendMarkerColor: "grey",
|
||||
toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong>Life Exp</strong> {x} yrs<br/> <strong>Fertility Rate</strong> {y}<br/> <strong>Population</strong> {z}mn",
|
||||
|
||||
dataPoints: [
|
||||
{ x: 78.1, y: 2.00, z: 306.77, name: "US" },
|
||||
{ x: 68.5, y: 2.15, z: 237.414, name: "Indonesia" },
|
||||
{ x: 72.5, y: 1.86, z: 193.24, name: "Brazil" },
|
||||
{ x: 76.5, y: 2.36, z: 112.24, name: "Mexico" },
|
||||
{ x: 50.9, y: 5.56, z: 154.48, name: "Nigeria" },
|
||||
{ x: 68.6, y: 1.54, z: 141.91, name: "Russia" },
|
||||
{ x: 82.9, y: 1.37, z: 127.55, name: "Japan" },
|
||||
{ x: 79.8, y: 1.36, z: 81.90, name: "Australia" },
|
||||
{ x: 72.7, y: 2.78, z: 79.71, name: "Egypt" },
|
||||
{ x: 80.1, y: 1.94, z: 61.81, name: "UK" },
|
||||
{ x: 55.8, y: 4.76, z: 39.24, name: "Kenya" },
|
||||
{ x: 81.5, y: 1.93, z: 21.95, name: "Australia" },
|
||||
{ x: 68.1, y: 4.77, z: 31.09, name: "Iraq" },
|
||||
{ x: 47.9, y: 6.42, z: 33.42, name: "Afganistan" },
|
||||
{ x: 50.3, y: 5.58, z: 18.55, name: "Angola" }
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
$("#chartContainer1").CanvasJSChart(options);
|
||||
});
|
||||
|
||||
$(function () {
|
||||
//Better to construct options first and then pass it as a parameter
|
||||
var options = {
|
||||
title: {
|
||||
text: "Email Analysis"
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisX: {
|
||||
interval: 3
|
||||
},
|
||||
axisY: {
|
||||
title: "Number of Messages"
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "center"
|
||||
},
|
||||
|
||||
data: [{
|
||||
name: "received",
|
||||
showInLegend: true,
|
||||
legendMarkerType: "square",
|
||||
type: "area",
|
||||
color: "rgba(40,175,101,0.6)",
|
||||
markerSize: 0,
|
||||
|
||||
dataPoints: [
|
||||
{ x: new Date(2013, 0, 1, 00, 00), label: "midnight", y: 7 },
|
||||
{ x: new Date(2013, 0, 1, 01, 00), y: 8 },
|
||||
{ x: new Date(2013, 0, 1, 02, 00), y: 5 },
|
||||
{ x: new Date(2013, 0, 1, 03, 00), y: 7 },
|
||||
{ x: new Date(2013, 0, 1, 04, 00), y: 6 },
|
||||
{ x: new Date(2013, 0, 1, 05, 00), y: 8 },
|
||||
{ x: new Date(2013, 0, 1, 06, 00), y: 12 },
|
||||
{ x: new Date(2013, 0, 1, 07, 00), y: 24 },
|
||||
{ x: new Date(2013, 0, 1, 08, 00), y: 36 },
|
||||
{ x: new Date(2013, 0, 1, 09, 00), y: 35 },
|
||||
{ x: new Date(2013, 0, 1, 10, 00), y: 37 },
|
||||
{ x: new Date(2013, 0, 1, 11, 00), y: 29 },
|
||||
{ x: new Date(2013, 0, 1, 12, 00), y: 34, label: "noon" },
|
||||
{ x: new Date(2013, 0, 1, 13, 00), y: 38 },
|
||||
{ x: new Date(2013, 0, 1, 14, 00), y: 23 },
|
||||
{ x: new Date(2013, 0, 1, 15, 00), y: 31 },
|
||||
{ x: new Date(2013, 0, 1, 16, 00), y: 34 },
|
||||
{ x: new Date(2013, 0, 1, 17, 00), y: 29 },
|
||||
{ x: new Date(2013, 0, 1, 18, 00), y: 14 },
|
||||
{ x: new Date(2013, 0, 1, 19, 00), y: 12 },
|
||||
{ x: new Date(2013, 0, 1, 20, 00), y: 10 },
|
||||
{ x: new Date(2013, 0, 1, 21, 00), y: 8 },
|
||||
{ x: new Date(2013, 0, 1, 22, 00), y: 13 },
|
||||
{ x: new Date(2013, 0, 1, 23, 00), y: 11 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "sent",
|
||||
showInLegend: true,
|
||||
legendMarkerType: "square",
|
||||
type: "area",
|
||||
color: "rgba(0,75,141,0.7)",
|
||||
markerSize: 0,
|
||||
label: "",
|
||||
dataPoints: [
|
||||
|
||||
{ x: new Date(2013, 0, 1, 00, 00), label: "midnight", y: 12 },
|
||||
{ x: new Date(2013, 0, 1, 01, 00), y: 10 },
|
||||
{ x: new Date(2013, 0, 1, 02, 00), y: 3 },
|
||||
{ x: new Date(2013, 0, 1, 03, 00), y: 5 },
|
||||
{ x: new Date(2013, 0, 1, 04, 00), y: 2 },
|
||||
{ x: new Date(2013, 0, 1, 05, 00), y: 1 },
|
||||
{ x: new Date(2013, 0, 1, 06, 00), y: 3 },
|
||||
{ x: new Date(2013, 0, 1, 07, 00), y: 6 },
|
||||
{ x: new Date(2013, 0, 1, 08, 00), y: 14 },
|
||||
{ x: new Date(2013, 0, 1, 09, 00), y: 15 },
|
||||
{ x: new Date(2013, 0, 1, 10, 00), y: 21 },
|
||||
{ x: new Date(2013, 0, 1, 11, 00), y: 24 },
|
||||
{ x: new Date(2013, 0, 1, 12, 00), y: 28, label: "noon" },
|
||||
{ x: new Date(2013, 0, 1, 13, 00), y: 26 },
|
||||
{ x: new Date(2013, 0, 1, 14, 00), y: 17 },
|
||||
{ x: new Date(2013, 0, 1, 15, 00), y: 23 },
|
||||
{ x: new Date(2013, 0, 1, 16, 00), y: 28 },
|
||||
{ x: new Date(2013, 0, 1, 17, 00), y: 22 },
|
||||
{ x: new Date(2013, 0, 1, 18, 00), y: 10 },
|
||||
{ x: new Date(2013, 0, 1, 19, 00), y: 9 },
|
||||
{ x: new Date(2013, 0, 1, 20, 00), y: 6 },
|
||||
{ x: new Date(2013, 0, 1, 21, 00), y: 4 },
|
||||
{ x: new Date(2013, 0, 1, 22, 00), y: 12 },
|
||||
{ x: new Date(2013, 0, 1, 23, 00), y: 14 }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
$("#chartContainer2").CanvasJSChart(options);
|
||||
});
|
||||
|
||||
$(function () {
|
||||
//Better to construct options first and then pass it as a parameter
|
||||
var options = {
|
||||
title: {
|
||||
text: "Cumulative App downloads on iTunes And Play Store"
|
||||
},
|
||||
animationEnabled: true,
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
maximum: 110000,
|
||||
valueFormatString: "#0,.",
|
||||
suffix: " k"
|
||||
},
|
||||
axisX: {
|
||||
title: "Months After Launch"
|
||||
},
|
||||
toolTip: {
|
||||
shared: true,
|
||||
content: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span> {y}"
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
type: "splineArea",
|
||||
showInLegend: true,
|
||||
name: "iOS",
|
||||
dataPoints: [
|
||||
{ x: 1, y: 3000 },
|
||||
{ x: 2, y: 7000 },
|
||||
{ x: 3, y: 10000 },
|
||||
{ x: 4, y: 14000 },
|
||||
{ x: 5, y: 23000 },
|
||||
{ x: 6, y: 31000 },
|
||||
{ x: 7, y: 42000 },
|
||||
{ x: 8, y: 56000 },
|
||||
{ x: 9, y: 64000 },
|
||||
{ x: 10, y: 81000 },
|
||||
{ x: 11, y: 105000 }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "splineArea",
|
||||
name: "Android",
|
||||
showInLegend: true,
|
||||
dataPoints: [
|
||||
{ x: 4, y: 4000 },
|
||||
{ x: 5, y: 6000 },
|
||||
{ x: 6, y: 9000 },
|
||||
{ x: 7, y: 14000 },
|
||||
{ x: 8, y: 21000 },
|
||||
{ x: 9, y: 31000 },
|
||||
{ x: 10, y: 46000 },
|
||||
{ x: 11, y: 61000 }
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
$("#chartContainer3").CanvasJSChart(options);
|
||||
});
|
||||
|
||||
$(function () {
|
||||
//Better to construct options first and then pass it as a parameter
|
||||
var options = {
|
||||
title: {
|
||||
text: "Gaming Consoles Sold in 2012"
|
||||
},
|
||||
animationEnabled: true,
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "center"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "pie",
|
||||
showInLegend: true,
|
||||
toolTipContent: "{y} - <strong>#percent%</strong>",
|
||||
dataPoints: [
|
||||
{ y: 4181563, legendText: "PS 3", indexLabel: "PlayStation 3" },
|
||||
{ y: 2175498, legendText: "Wii", indexLabel: "Wii" },
|
||||
{ y: 3125844, legendText: "360", exploded: true, indexLabel: "Xbox 360" },
|
||||
{ y: 1176121, legendText: "DS", indexLabel: "Nintendo DS" },
|
||||
{ y: 1727161, legendText: "PSP", indexLabel: "PSP" },
|
||||
{ y: 4303364, legendText: "3DS", indexLabel: "Nintendo 3DS" },
|
||||
{ y: 1717786, legendText: "Vita", indexLabel: "PS Vita" }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
$("#chartContainer4").CanvasJSChart(options);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer1" style="width: 45%; height: 400px;display: inline-block;"></div>
|
||||
<div id="chartContainer2" style="width: 45%; height: 400px;display: inline-block;"></div><br />
|
||||
<div id="chartContainer3" style="width: 45%; height: 400px;display: inline-block;"></div>
|
||||
<div id="chartContainer4" style="width: 45%; height: 400px;display: inline-block;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Gaming Consoles Sold in 2012"
|
||||
},
|
||||
animationEnabled: true,
|
||||
animationDuration: 2000,
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "center"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
indexLabelFontSize: 20,
|
||||
indexLabelFontFamily: "Monospace",
|
||||
indexLabelFontColor: "darkgrey",
|
||||
indexLabelLineColor: "darkgrey",
|
||||
indexLabelPlacement: "outside",
|
||||
type: "pie",
|
||||
showInLegend: true,
|
||||
toolTipContent: "{y} - <strong>#percent%</strong>",
|
||||
dataPoints: [
|
||||
{ y: 4181563, legendText: "PS 3", indexLabel: "PlayStation 3" },
|
||||
{ y: 2175498, legendText: "Wii", indexLabel: "Wii" },
|
||||
{ y: 3125844, legendText: "360", exploded: true, indexLabel: "Xbox 360" },
|
||||
{ y: 1176121, legendText: "DS", indexLabel: "Nintendo DS" },
|
||||
{ y: 1727161, legendText: "PSP", indexLabel: "PSP" },
|
||||
{ y: 4303364, legendText: "3DS", indexLabel: "Nintendo 3DS" },
|
||||
{ y: 1717786, legendText: "Vita", indexLabel: "PS Vita" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Combination Chart"
|
||||
|
||||
},
|
||||
data: [{
|
||||
type: "column",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 171 },
|
||||
{ x: 20, y: 155 },
|
||||
{ x: 30, y: 150 },
|
||||
{ x: 40, y: 165 },
|
||||
{ x: 50, y: 195 },
|
||||
{ x: 60, y: 168 },
|
||||
{ x: 70, y: 128 },
|
||||
{ x: 80, y: 134 },
|
||||
{ x: 90, y: 114 }
|
||||
]
|
||||
}, {
|
||||
type: "column",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 101 },
|
||||
{ x: 20, y: 105 },
|
||||
{ x: 30, y: 100 },
|
||||
{ x: 40, y: 105 },
|
||||
{ x: 50, y: 105 },
|
||||
{ x: 60, y: 108 },
|
||||
{ x: 70, y: 108 },
|
||||
{ x: 80, y: 104 },
|
||||
{ x: 90, y: 104 }
|
||||
]
|
||||
}, {
|
||||
type: "area",
|
||||
dataPoints: [
|
||||
{ x: 15, y: 17 },
|
||||
{ x: 25, y: 15 },
|
||||
{ x: 35, y: 10 },
|
||||
{ x: 45, y: 16 },
|
||||
{ x: 55, y: 15 },
|
||||
{ x: 65, y: 68 },
|
||||
{ x: 75, y: 18 },
|
||||
{ x: 85, y: 34 },
|
||||
{ x: 95, y: 14 }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "line",
|
||||
dataPoints: [
|
||||
{ x: 30, y: 71 },
|
||||
{ x: 35, y: 55 },
|
||||
{ x: 40, y: 50 },
|
||||
{ x: 45, y: 65 },
|
||||
{ x: 50, y: 95 },
|
||||
{ x: 55, y: 68 },
|
||||
{ x: 60, y: 28 },
|
||||
{ x: 65, y: 34 },
|
||||
{ x: 70, y: 14 }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
dataPoints: [
|
||||
{ x: 5, y: 171 },
|
||||
{ x: 15, y: 105 },
|
||||
{ x: 25, y: 90 },
|
||||
{ x: 45, y: 65 },
|
||||
{ x: 55, y: 75 },
|
||||
{ x: 65, y: 68 },
|
||||
{ x: 75, y: 28 },
|
||||
{ x: 85, y: 34 },
|
||||
{ x: 95, y: 84 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
CanvasJS.addCultureInfo("es", {
|
||||
decimalSeparator: ",",// Observe ToolTip Number Format
|
||||
digitGroupSeparator: ".", // Observe axisY labels
|
||||
days: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"]
|
||||
|
||||
});
|
||||
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
theme: "theme1",
|
||||
culture: "es",
|
||||
axisX: {
|
||||
valueFormatString: "DDDD"
|
||||
},
|
||||
// change to "theme1"
|
||||
title: {
|
||||
text: "Localization Demo - Days in Spanish"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "column",
|
||||
dataPoints: [
|
||||
//Note: month input is 0-11 in JavaScript - 05 is June
|
||||
{ x: new Date(2013, 05, 3), y: 3275.6 },
|
||||
{ x: new Date(2013, 05, 4), y: 5250.8 },
|
||||
{ x: new Date(2013, 05, 5), y: 6255.3 },
|
||||
{ x: new Date(2013, 05, 6), y: 8275.2 },
|
||||
{ x: new Date(2013, 05, 7), y: 6378.1 },
|
||||
{ x: new Date(2013, 05, 8), y: 5258.4 },
|
||||
{ x: new Date(2013, 05, 9), y: 3514.8 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Top Categories of New Year's Resolution"
|
||||
},
|
||||
exportFileName: "CanvasJS Chart",
|
||||
exportEnabled: true,
|
||||
animationEnabled: true,
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "center"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "pie",
|
||||
showInLegend: true,
|
||||
toolTipContent: "{legendText}: <strong>{y}%</strong>",
|
||||
indexLabel: "{label} {y}%",
|
||||
dataPoints: [
|
||||
{ y: 35, legendText: "Health", exploded: true, label: "Health" },
|
||||
{ y: 20, legendText: "Finance", label: "Finance" },
|
||||
{ y: 18, legendText: "Career", label: "Career" },
|
||||
{ y: 15, legendText: "Education", label: "Education" },
|
||||
{ y: 5, legendText: "Family", label: "Family" },
|
||||
{ y: 7, legendText: "Real Estate", label: "Real Estate" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var chart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Click on legend items to hide/unhide dataseries"
|
||||
},
|
||||
legend: {
|
||||
cursor: "pointer",
|
||||
itemclick: function (e) {
|
||||
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
|
||||
e.dataSeries.visible = false;
|
||||
} else {
|
||||
e.dataSeries.visible = true;
|
||||
}
|
||||
|
||||
e.chart.render();
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
showInLegend: true,
|
||||
type: "line",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 5 },
|
||||
{ x: 20, y: 9 },
|
||||
{ x: 30, y: 17 },
|
||||
{ x: 40, y: 32 },
|
||||
{ x: 50, y: 22 },
|
||||
{ x: 60, y: 14 },
|
||||
{ x: 70, y: 25 },
|
||||
{ x: 80, y: 18 },
|
||||
{ x: 90, y: 20 }
|
||||
]
|
||||
}, {
|
||||
showInLegend: true,
|
||||
type: "line",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 31 },
|
||||
{ x: 20, y: 35 },
|
||||
{ x: 30, y: 30 },
|
||||
{ x: 40, y: 35 },
|
||||
{ x: 50, y: 35 },
|
||||
{ x: 60, y: 38 },
|
||||
{ x: 70, y: 38 },
|
||||
{ x: 80, y: 34 },
|
||||
{ x: 90, y: 44 }
|
||||
]
|
||||
}, {
|
||||
showInLegend: true,
|
||||
type: "line",
|
||||
dataPoints: [
|
||||
{ x: 10, y: 25 },
|
||||
{ x: 20, y: 30 },
|
||||
{ x: 30, y: 20 },
|
||||
{ x: 40, y: 45 },
|
||||
{ x: 50, y: 30 },
|
||||
{ x: 60, y: 10 },
|
||||
{ x: 70, y: 15 },
|
||||
{ x: 80, y: 18 },
|
||||
{ x: 90, y: 20 }
|
||||
]
|
||||
}]
|
||||
});
|
||||
|
||||
chart.render();
|
||||
}
|
||||
</script>
|
||||
<script src="../../canvasjs.min.js"></script>
|
||||
<title>CanvasJS Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartContainer" style="height: 400px; width: 100%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user