javaScript/teste.html at master · sbouchardet/javaScript · GitHub

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
<html>
	<head>
		<title>Bar Chart</title>
		<script src="Chart.js/Chart.js"></script>
        <script src="teste.js"></script>
	</head>
	<body " onclick="ol();">
    <table><tr><td>
			<div><canvas id="canvas" height="450" width="600"></canvas></div>
</td><td>
			<div><canvas id="canvas2" height="450" width="600"></canvas></div>
</td>
        <td>


        </td>
        </tr></table>
<h id="name"> Teste </h>


	<script>
	var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
	var barChartData = {
		labels : ["January","February","March","April","May","June","July"],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,0.8)",
				highlightFill: "rgba(220,220,220,0.75)",
				highlightStroke: "rgba(220,220,220,1)",
				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,0.8)",
				highlightFill : "rgba(151,187,205,0.75)",
				highlightStroke : "rgba(151,187,205,1)",
				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			},
      {
				fillColor : "rgba(0,0,0,0.5)",
				strokeColor : "rgba(0,0,0,0.8)",
				highlightFill : "rgba(0,0,0,0.75)",
				highlightStroke : "rgba(0,187,205,1)",
				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			}
		]


	}

  var doughnutData = [
      {
        value: 1,
        label: "One"
      },
      {
        value: 2,
        label: "Two"
      },
      {
        value: 3,
        label: "Three"
      },
      {
        value: 4,
        label: "Four"
      },
      {
        value: 5,
        label: "Five"
      }

    ];

	window.onload = function(){
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myBar = new Chart(ctx).Bar(barChartData, {responsive : true});

    var ctx2 = document.getElementById("canvas2").getContext("2d");
    window.myDoughnut = new Chart(ctx2).Doughnut(doughnutData, {responsive : true});
	}
	</script>

	</body>
</html>