Subversion Repositories ALCASAR

Rev

Go to most recent revision | Details | Last modification | View Log

Rev Author Line No. Line
2809 rexy 1 
    <script type="text/javascript">
2 
        google.charts.load('current', { packages: [ 'bar' ] });
3 
        google.charts.load("current", { packages: [ 'corechart' ] });
4 
 
5 
        google.charts.setOnLoadCallback(drawHourlyChart);
6 
        google.charts.setOnLoadCallback(drawDailyChart);
7 
        google.charts.setOnLoadCallback(drawMonthlyChart);
8 
 
9 
        function drawHourlyChart()
10 
        {
11 
            var data = new google.visualization.DataTable();
12 
 
13 
            data.addColumn('date', 'Hour');
14 
            data.addColumn('number', 'Traffic In');
15 
            data.addColumn('number', 'Traffic Out');
16 
            data.addColumn('number', 'Total Traffic');
17 
 
18 
            data.addRows([
19 
{foreach from=$hourlyGraphData key=key item=value}
20 
                [new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
21 
{/foreach}
22 
            ]);
23 
 
24 
            let options = {
25 
                title: 'Hourly Network Traffic',
26 
                orientation: 'horizontal',
27 
                legend: { position: 'right' },
28 
                explorer: {
29 
                    axis: 'horizontal',
30 
                    maxZoomIn: 4.0,
31 
                    maxZoomOut: 3.0
32 
            	},
33 
                vAxis: {
34 
                    title: 'Data',
35 
                    format: '##.## {$hourlyLargestPrefix}'
36 
                },
37 
                hAxis: {
38 
                    title: 'Hour',
39 
                    format: 'HH:mm',
40 
                    direction: -1,
41 
                    ticks: [
42 
{foreach from=$hourlyGraphData key=key item=value}
43 
                        new {$value.label},
44 
{/foreach}
45 
                    ]
46 
                }
47 
            };
48 
 
49 
            var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy HH:mm' });
50 
            formatDate.format(data, 0);
51 
 
52 
            var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$hourlyLargestPrefix}' });
53 
            formatNumber.format(data, 1);
54 
            formatNumber.format(data, 2);
55 
            formatNumber.format(data, 3);
56 
 
57 
            let chart = new google.visualization.BarChart(document.getElementById('hourlyNetworkTrafficGraph'));
58 
            chart.draw(data, google.charts.Bar.convertOptions(options));
59 
        }
60 
 
61 
        function drawDailyChart()
62 
        {
63 
            var data = new google.visualization.DataTable();
64 
 
65 
            data.addColumn('date', 'Day');
66 
            data.addColumn('number', 'Traffic In');
67 
            data.addColumn('number', 'Traffic Out');
68 
            data.addColumn('number', 'Total Traffic');
69 
 
70 
            data.addRows([
71 
{foreach from=$dailyGraphData key=key item=value}
72 
                [new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
73 
{/foreach}
74 
            ]);
75 
 
76 
            let options = {
77 
                title: 'Daily Network Traffic',
78 
                orientation: 'horizontal',
79 
                legend: { position: 'right' },
80 
                explorer: {
81 
                    axis: 'horizontal',
82 
                    maxZoomIn: 4.0,
83 
                    maxZoomOut: 3.0
84 
            	},
85 
                vAxis: {
86 
                    title: 'Data',
87 
                    format: '##.## {$dailyLargestPrefix}'
88 
                },
89 
                hAxis: {
90 
                    title: 'Day',
91 
                    format: 'dd/MM/YYYY',
92 
                    direction: -1
93 
                }
94 
            };
95 
 
96 
            var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy' });
97 
            formatDate.format(data, 0);
98 
 
99 
            var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$dailyLargestPrefix}' });
100 
            formatNumber.format(data, 1);
101 
            formatNumber.format(data, 2);
102 
            formatNumber.format(data, 3);
103 
 
104 
            let chart = new google.visualization.BarChart(document.getElementById('dailyNetworkTrafficGraph'));
105 
            chart.draw(data, google.charts.Bar.convertOptions(options));
106 
        }
107 
 
108 
        function drawMonthlyChart()
109 
        {
110 
            var data = new google.visualization.DataTable();
111 
 
112 
            data.addColumn('date', 'Month');
113 
            data.addColumn('number', 'Traffic In');
114 
            data.addColumn('number', 'Traffic Out');
115 
            data.addColumn('number', 'Total Traffic');
116 
 
117 
            data.addRows([
118 
{foreach from=$monthlyGraphData key=key item=value}
119 
                [new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
120 
{/foreach}
121 
            ]);
122 
 
123 
            let options = {
124 
                title: 'Monthly Network Traffic',
125 
                orientation: 'horizontal',
126 
                legend: { position: 'right' },
127 
                explorer: {
128 
                    axis: 'horizontal',
129 
                    maxZoomIn: 4.0,
130 
                    maxZoomOut: 3.0
131 
            	},
132 
                vAxis: {
133 
                    title: 'Data',
134 
                    format: '##.## {$monthlyLargestPrefix}'
135 
                },
136 
                hAxis: {
137 
                    title: 'Month',
138 
                    format: 'MMMM YYYY',
139 
                    direction: -1
140 
                }
141 
            };
142 
 
143 
            var formatDate = new google.visualization.DateFormat({ pattern: 'MMMM YYYY' });
144 
            formatDate.format(data, 0);
145 
 
146 
            var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$monthlyLargestPrefix}' });
147 
            formatNumber.format(data, 1);
148 
            formatNumber.format(data, 2);
149 
            formatNumber.format(data, 3);
150 
 
151 
            let chart = new google.visualization.BarChart(document.getElementById('monthlyNetworkTrafficGraph'));
152 
            chart.draw(data, google.charts.Bar.convertOptions(options));
153 
        }
154 
    </script>