Skip to content

N
nodejs-60-2
Switch branch/tag
Find file
Normal viewHistoryPermalink
05.html 2.59 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 120 121 122 123 124 125 126 127 
<!DOCTYPE HTML>
<html>

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

			var chart = new CanvasJS.Chart("chartContainer", {
				theme: "light2", // "light1", "light2", "dark1", "dark2"
				animationEnabled: true,
				title: {
					text: "Share Value - 2016"
				},
				axisX: {
					interval: 1,
					intervalType: "month",
					valueFormatString: "MMM"
				},
				axisY: {
					title: "Price (in USD)",
					valueFormatString: "$#0"
				},
				data: [{
					type: "line",
					markerSize: 12,
					xValueFormatString: "MMM, YYYY",
					yValueFormatString: "$###.#",
					dataPoints: [{
							x: new Date(2016, 00, 1),
							y: 61,
							indexLabel: "gain",
							markerType: "triangle",
							markerColor: "#6B8E23"
						},
						{
							x: new Date(2016, 01, 1),
							y: 71,
							indexLabel: "gain",
							markerType: "triangle",
							markerColor: "#6B8E23"
						},
						{
							x: new Date(2016, 02, 1),
							y: 55,
							indexLabel: "loss",
							markerType: "cross",
							markerColor: "tomato"
						},
						{
							x: new Date(2016, 03, 1),
							y: 50,
							indexLabel: "loss",
							markerType: "cross",
							markerColor: "tomato"
						},
						{
							x: new Date(2016, 04, 1),
							y: 65,
							indexLabel: "gain",
							markerType: "triangle",
							markerColor: "#6B8E23"
						},
						{
							x: new Date(2016, 05, 1),
							y: 85,
							indexLabel: "gain",
							markerType: "triangle",
							markerColor: "#6B8E23"
						},
						{
							x: new Date(2016, 06, 1),
							y: 68,
							indexLabel: "loss",
							markerType: "cross",
							markerColor: "tomato"
						},
						{
							x: new Date(2016, 07, 1),
							y: 28,
							indexLabel: "loss",
							markerType: "cross",
							markerColor: "tomato"
						},
						{
							x: new Date(2016, 08, 1),
							y: 34,
							indexLabel: "gain",
							markerType: "triangle",
							markerColor: "#6B8E23"
						},
						{
							x: new Date(2016, 09, 1),
							y: 24,
							indexLabel: "loss",
							markerType: "cross",
							markerColor: "tomato"
						},
						{
							x: new Date(2016, 10, 1),
							y: 44,
							indexLabel: "gain",
							markerType: "triangle",
							markerColor: "#6B8E23"
						},
						{
							x: new Date(2016, 11, 1),
							y: 34,
							indexLabel: "loss",
							markerType: "cross",
							markerColor: "tomato"
						}
					]
				}]
			});
			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>