-
Notifications
You must be signed in to change notification settings - Fork 0
/
testgooglechart_with_delay.html
121 lines (96 loc) · 3.59 KB
/
testgooglechart_with_delay.html
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
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
var occur; // The value must be first fetched from the server and used later drawing the chart
// Using a Promise to simulate a request to the server and waiting 3 sec to receive it
// The Promise guarantees it's done before drawing the chart
// See later in the comments why using just setTimeOut() does not work.
let myPromise = new Promise(
(resolve)=>{
setTimeout(()=>{ // Simulate a request to the server and waiting 3 sec to receive it
resolve(occur = 12);
}, 3000); // when successful
});
// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
()=> google.charts.setOnLoadCallback(drawChart) // Set a callback to run when the Google Visualization API is loaded.
);
// Callback that creates and populates 2 data tables,
// instantiates the bar charts, passes in the data and
// draws them.
function drawChart() {
// Create the data table for the weight disbribution bar chart
var data = new google.visualization.DataTable();
data.addColumn('string', 'Weight range');
data.addColumn('number', 'Occurence');
// Set the weight occurence column style as a label on bars
var view = new google.visualization.DataView(data);
view.setColumns(
[0, 1, {
sourceColumn: 1,
role: "annotation" }
]
);
// Using setTimeOut.
// The following does not work.
// The chart is drawned before the time's up.
// var myVar, occur;
// function serverDelay() {
// myVar = setTimeout(
// ()=>{ occur = 12;}, 3000);
// }
console.log("occur", occur);
data.addRows([['0-7 kg', occur],['7-11 kg', 3],['11-13 kg', 4],['13-15 kg', 2],['15-20 kg', 0]]);
// Set barchart options
var options = {
'title':'Nombre de cartons selon le poids',
'width': 400,
'height': 300,
'bars': 'horizontal', // Required for Material Bar Charts
axes: {
x:{
0: {side:'top'} // Top x-axis
}
},
legend:{position:"none"}};
// Instantiate and draw our barchart, passing in some options.
var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
barchart.draw(view, options);
// Create the data table for the total weight bar chart
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Weight Unit');
data2.addColumn('number', 'Current Weight');
data2.addColumn({ role: 'style' });
data2.addRows([['KG', 10, 'grey']]); // #b87333 could be another color
// Set the bar chart options
var onebarchart_options = {
'title':'Poids total du chargement',
'width': 400,
'height': 100,
'isStacked':true,
'bars': 'horizontal',
legend:{position:"none"}};
// Set the total weight column style as a label on bars
var onebarchart_view = new google.visualization.DataView(data2);
onebarchart_view.setColumns(
[0, 1, {
sourceColumn: 1,
role: "annotation" },
2
]
);
// Instantiate and draw our stacked barchart, passing in some options.
var onebarchart = new google.visualization.BarChart(document.getElementById('onebarchart_div'));
onebarchart.draw(onebarchart_view, onebarchart_options);
}// end of callback
</script>
</head>
<body>
<p id="barchart_div">Hello World!</p>
<p id="onebarchart_div">Hello World!</p>
</body>
</html>