266 lines
7.5 KiB
HTML
266 lines
7.5 KiB
HTML
<!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> |