-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprocessdashboard.html
136 lines (100 loc) · 4.96 KB
/
processdashboard.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css" crossorigin="anonymous">
<link href="../css/style.css" rel="stylesheet" media="screen, print">
<link href="../css/navcustom.css" rel="stylesheet">
<link rel="stylesheet" href="css/starter-template.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js" crossorigin="anonymous"></script>
<script>
var comboChart = [['Machine', 'Process']];
google.charts.load('current', {'packages': ['corechart']});
$(document).ready(function () {
$("button").click(function () {
var SendInfo = {"limit": 5, "sort": {"created_date": "desc"}};
var dataString = JSON.stringify(SendInfo);
//call customer
$.ajax({
url: 'http://api.masterdatanode.com/###APPNAME###/process/find/',
type: 'post',
data: dataString,
headers: {
"access_token": '#######Access_Token########',
"Content-Type": 'application/json'
},
dataType: 'json',
success: function (data) {
// console.info(JSON.stringify(data));
// $("#test_div").html(JSON.stringify(data));
// alert(JSON.stringify(data));
var population = data['result'];
// var myStringArray = ["Hello", "World"];
var obj = {a: 1, b: 2};
for (var key in population) {
if (population.hasOwnProperty(key)) {
var val = population[key];
var date_time = val['created_date'];
var date = date_time.substr(0, date_time.indexOf(' ')); // "72"
// alert(JSON.stringify(val['Country']));
comboChart.push([val['machine'] + "|" + date, parseInt(val['process'])]);
// alert(JSON.stringify(dataPop));
}
}
google.charts.setOnLoadCallback(drawComboChart);
}
});
});
});
// Callback that creates and populates a data table,
function drawComboChart() {
// Some raw data (not necessarily accurate)
// alert(comboChart);
var data = google.visualization.arrayToDataTable(comboChart);
var options = {
title: 'Unix Machine number of process running',
vAxis: {title: 'Process'},
hAxis: {title: 'Machine'},
seriesType: 'bars',
// Allow multiple
// simultaneous selections.
selectionMode: 'multiple',
// Trigger tooltips
// on selections.
tooltip: {trigger: 'selection'},
// Group selections
// by x-value.
// aggregationTarget: 'category',
// series: {5: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('combochart_div'));
chart.draw(data, options);
}
</script>
</head>
<body >
<!-- Navigation -->
<div class="intro-header">
<!--Div that will hold the pie chart-->
<div class="container" style="text-align: center">
<div >
<h1>Machine process count App</h1>
<p class="lead">Machine Process App, Data solution build on top of ArcTop Labs #DataSolution #MasterDataNode EcoSystem</p>
</div>
<div >
<button class="btn btn-info">Click Button to create charts</button>
</div>
<div class="col-lg-12">
<div id="combochart_div" ></div>
</div>
</div>
</div>
</body>
</html>