Folder reorganize 1
This commit is contained in:
Rucus
@@ -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>
|
||||
Reference in New Issue
Block a user