52 lines
1.3 KiB
HTML
52 lines
1.3 KiB
HTML
<!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> |