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