LASUCA/controls-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add all files

Browse Source
This commit is contained in:
Rucus
2026-02-17 09:29:34 -06:00
parent b8c8d67c67
commit 782d203799
21925 changed files with 2433086 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
controls-classic/OLD/charts/canvasjs/examples/25 -jquery-plugin/basic-jquery-line-chart.html Normal file
View File

@@ -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>

257
controls-classic/OLD/charts/canvasjs/examples/25 -jquery-plugin/multiple-charts-in-one-page.html Normal file
View File

@@ -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>