Skip to content

N
nodejs-60-2
Switch branch/tag
Find file
Normal viewHistoryPermalink
10.html 2.23 KB
Newer Older
winai buttasart's avatar
ส่งงาน desktop application
dca3e62d
 
winai buttasart committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<script>
		window.onload = function () {

			var chart = new CanvasJS.Chart("chartContainer", {
				exportEnabled: true,
				animationEnabled: true,
				title: {
					text: "Car Parts Sold in Different States"
				},
				subtitles: [{
					text: "Click Legend to Hide or Unhide Data Series"
				}],
				axisX: {
					title: "States"
				},
				axisY: {
					title: "Oil Filter - Units",
					titleFontColor: "#4F81BC",
					lineColor: "#4F81BC",
					labelFontColor: "#4F81BC",
					tickColor: "#4F81BC"
				},
				axisY2: {
					title: "Clutch - Units",
					titleFontColor: "#C0504E",
					lineColor: "#C0504E",
					labelFontColor: "#C0504E",
					tickColor: "#C0504E"
				},
				toolTip: {
					shared: true
				},
				legend: {
					cursor: "pointer",
					itemclick: toggleDataSeries
				},
				data: [{
						type: "column",
						name: "Oil Filter",
						showInLegend: true,
						yValueFormatString: "#,##0.# Units",
						dataPoints: [{
								label: "New Jersey",
								y: 19034.5
							},
							{
								label: "Texas",
								y: 20015
							},
							{
								label: "Oregon",
								y: 25342
							},
							{
								label: "Montana",
								y: 20088
							},
							{
								label: "Massachusetts",
								y: 28234
							}
						]
					},
					{
						type: "column",
						name: "Clutch",
						axisYType: "secondary",
						showInLegend: true,
						yValueFormatString: "#,##0.# Units",
						dataPoints: [{
								label: "New Jersey",
								y: 210.5
							},
							{
								label: "Texas",
								y: 135
							},
							{
								label: "Oregon",
								y: 425
							},
							{
								label: "Montana",
								y: 130
							},
							{
								label: "Massachusetts",
								y: 528
							}
						]
					}
				]
			});
			chart.render();

			function toggleDataSeries(e) {
				if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
					e.dataSeries.visible = false;
				} else {
					e.dataSeries.visible = true;
				}
				e.chart.render();
			}

		}
	</script>
</head>

<body>
	<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
	<script src="../../asset/js/canvasjs/canvasjs.min.js"></script>
</body>

</html>