Subversion Repositories ALCASAR

Rev

Rev 2809 | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log

Rev 2809 Rev 3106
Line 1... Line 1...
1 
    <script type="text/javascript">
 1 
    <script type="text/javascript">
2 
        google.charts.load('current', { packages: [ 'bar' ] });
 2 
        google.charts.load('current', { packages: [ 'bar' ] });
3 
        google.charts.load("current", { packages: [ 'corechart' ] });
 3 
        google.charts.load("current", { packages: [ 'corechart' ] });
4
4 
 
- 
 
 5 
        google.charts.setOnLoadCallback(drawFiveChart);
5 
        google.charts.setOnLoadCallback(drawHourlyChart);
 6 
        google.charts.setOnLoadCallback(drawHourlyChart);
6 
        google.charts.setOnLoadCallback(drawDailyChart);
 7 
        google.charts.setOnLoadCallback(drawDailyChart);
7 
        google.charts.setOnLoadCallback(drawMonthlyChart);
 8 
        google.charts.setOnLoadCallback(drawMonthlyChart);
8 
 
 9 
 
- 
 
 10 
        function drawFiveChart()
- 
 
 11 
        {
- 
 
 12 
            {if $jsonVersion gt 1}
- 
 
 13 
            var data = new google.visualization.DataTable();
- 
 
 14 
 
- 
 
 15 
            data.addColumn('datetime', 'Time');
- 
 
 16 
            data.addColumn('number', 'Traffic In');
- 
 
 17 
            data.addColumn('number', 'Traffic Out');
- 
 
 18 
            data.addColumn('number', 'Total Traffic');
- 
 
 19 
 
- 
 
 20 
            data.addRows([
- 
 
 21 
{foreach from=$fiveGraphData key=key item=value}
- 
 
 22 
                [new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
- 
 
 23 
{/foreach}
- 
 
 24 
            ]);
- 
 
 25 
 
- 
 
 26 
            let endD = (new {$fiveGraphData[0]['label']}).getTime();
- 
 
 27 
 
- 
 
 28 
            let options = {
- 
 
 29 
                title: 'Five minute Network Traffic',
- 
 
 30 
                orientation: 'horizontal',
- 
 
 31 
                legend: { position: 'right' },
- 
 
 32 
                explorer: {
- 
 
 33 
                    axis: 'horizontal',
- 
 
 34 
                    zoomDelta: 1.1,
- 
 
 35 
                    maxZoomIn: 0.1,
- 
 
 36 
                    maxZoomOut: 10.0
- 
 
 37 
            	},
- 
 
 38 
                vAxis: {
- 
 
 39 
                    format: '###.### {$fiveLargestPrefix}'
- 
 
 40 
                    {if $graph_type == 'log'}
- 
 
 41 
                        ,scaleType: 'log',
- 
 
 42 
                        baseline: {$fiveBase}
- 
 
 43 
                    {/if}
- 
 
 44 
                },
- 
 
 45 
                hAxis: {
- 
 
 46 
                    direction: -1,
- 
 
 47 
                    format: 'd/H:mm',
- 
 
 48 
                    {if $jsonVersion > 1}
- 
 
 49 
                        title: 'Day/Hour:Minute (Scroll to zoom, Drag to pan)',
- 
 
 50 
                    {else}
- 
 
 51 
                        title: 'Day/Hour:Minute',
- 
 
 52 
                    {/if}
- 
 
 53 
                    viewWindow: {
- 
 
 54 
                        min: 'Date('+(endD-7050000).toString()+')',
- 
 
 55 
                        max: 'Date('+(endD+150000).toString()+')'
- 
 
 56 
                    },
- 
 
 57 
                    ticks: [
- 
 
 58 
{foreach from=$fiveGraphData key=key item=value}
- 
 
 59 
                        new {$value.label},
- 
 
 60 
{/foreach}
- 
 
 61 
                    ]
- 
 
 62 
                }
- 
 
 63 
            };
- 
 
 64 
 
- 
 
 65 
            var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy HH:mm' });
- 
 
 66 
            formatDate.format(data, 0);
- 
 
 67 
 
- 
 
 68 
            var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$fiveLargestPrefix}' });
- 
 
 69 
            formatNumber.format(data, 1);
- 
 
 70 
            formatNumber.format(data, 2);
- 
 
 71 
            formatNumber.format(data, 3);
- 
 
 72 
 
- 
 
 73 
            let chart = new google.visualization.BarChart(document.getElementById('fiveNetworkTrafficGraph'));
- 
 
 74 
            chart.draw(data, google.charts.Bar.convertOptions(options));
- 
 
 75 
            {/if}
- 
 
 76 
        }
- 
 
 77 
 
9 
        function drawHourlyChart()
 78 
        function drawHourlyChart()
10 
        {
 79 
        {
11 
            var data = new google.visualization.DataTable();
 80 
            var data = new google.visualization.DataTable();
12 
 
 81 
 
13 
            data.addColumn('date', 'Hour');
 82 
            data.addColumn('date', 'Hour');
Line 19... Line 88...
19 
{foreach from=$hourlyGraphData key=key item=value}
 88 
{foreach from=$hourlyGraphData key=key item=value}
20 
                [new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
 89 
                [new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
21 
{/foreach}
 90 
{/foreach}
22 
            ]);
 91 
            ]);
23 
 
 92 
 
- 
 
 93 
            let endD = (new {$hourlyGraphData[0]['label']}).getTime();
- 
 
 94 
 
24 
            let options = {
 95 
            let options = {
25 
                title: 'Hourly Network Traffic',
 96 
                title: 'Hourly Network Traffic',
26 
                orientation: 'horizontal',
 97 
                orientation: 'horizontal',
27 
                legend: { position: 'right' },
 98 
                legend: { position: 'right' },
28 
                explorer: {
99 
                explorer: {
29 
                    axis: 'horizontal',
 100 
                    axis: 'horizontal',
- 
 
 101 
                    zoomDelta: 1.1,
30 
                    maxZoomIn: 4.0,
 102 
                    maxZoomIn: 0.1,
31 
                    maxZoomOut: 3.0
 103 
                    maxZoomOut: 10.0
32 
            	},
 104 
            	},
33 
                vAxis: {
 105 
                vAxis: {
- 
 
 106 
                    format: '###.### {$hourlyLargestPrefix}'
- 
 
 107 
                    {if $graph_type == 'log'}
34 
                    title: 'Data',
 108 
                        ,scaleType: 'log',
35 
                    format: '##.## {$hourlyLargestPrefix}'
 109 
                        baseline: {$hourlyBase}
- 
 
 110 
                    {/if}
36 
                },
 111 
                },
37 
                hAxis: {
 112 
                hAxis: {
- 
 
 113 
                    {if $jsonVersion > 1}
- 
 
 114 
                        title: 'Day/Hour (Scroll to zoom, Drag to pan)',
- 
 
 115 
                    {else}
38 
                    title: 'Hour',
 116 
                        title: 'Day/Hour',
- 
 
 117 
                    {/if}
39 
                    format: 'HH:mm',
 118 
                    format: 'd/H',
40 
                    direction: -1,
 119 
                    direction: -1,
- 
 
 120 
                    viewWindow: {
- 
 
 121 
                        min: 'Date('+(endD-84600000).toString()+')',
- 
 
 122 
                        max: 'Date('+(endD+1800000).toString()+')'
- 
 
 123 
                    },
41 
                    ticks: [
 124 
                    ticks: [
42 
{foreach from=$hourlyGraphData key=key item=value}
 125 
{foreach from=$hourlyGraphData key=key item=value}
43 
                        new {$value.label},
 126 
                        new {$value.label},
44 
{/foreach}
 127 
{/foreach}
45 
                    ]
 128 
                    ]
Line 70... Line 153...
70 
            data.addRows([
 153 
            data.addRows([
71 
{foreach from=$dailyGraphData key=key item=value}
 154 
{foreach from=$dailyGraphData key=key item=value}
72 
                [new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
 155 
                [new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
73 
{/foreach}
 156 
{/foreach}
74 
            ]);
 157 
            ]);
- 
 
 158 
 
75
159 
            let endD = (new {$dailyGraphData[0]['label']}).getTime();
- 
 
 160 
 
76 
            let options = {
 161 
            let options = {
77 
                title: 'Daily Network Traffic',
 162 
                title: 'Daily Network Traffic',
78 
                orientation: 'horizontal',
 163 
                orientation: 'horizontal',
79 
                legend: { position: 'right' },
 164 
                legend: { position: 'right' },
80 
                explorer: {
165 
                explorer: {
81 
                    axis: 'horizontal',
 166 
                    axis: 'horizontal',
- 
 
 167 
                    zoomDelta: 1.1,
82 
                    maxZoomIn: 4.0,
 168 
                    maxZoomIn: 0.1,
83 
                    maxZoomOut: 3.0
 169 
                    maxZoomOut: 10.0
84 
            	},
 170 
            	},
85 
                vAxis: {
 171 
                vAxis: {
- 
 
 172 
                    format: '###.### {$dailyLargestPrefix}'
- 
 
 173 
                    {if $graph_type == 'log'}
86 
                    title: 'Data',
 174 
                        ,scaleType: 'log',
87 
                    format: '##.## {$dailyLargestPrefix}'
 175 
                        baseline: {$dailyBase}
- 
 
 176 
                    {/if}
88 
                },
 177 
                },
89 
                hAxis: {
 178 
                hAxis: {
- 
 
 179 
                    {if $jsonVersion > 1}
- 
 
 180 
                        title: 'Day (Scroll to zoom, Drag to pan)',
- 
 
 181 
                    {else}
90 
                    title: 'Day',
 182 
                        title: 'Day',
- 
 
 183 
                    {/if}
91 
                    format: 'dd/MM/YYYY',
 184 
                    format: 'dd/MM/YYYY',
- 
 
 185 
                    viewWindow: {
- 
 
 186 
                        min: 'Date('+(endD-2548800000).toString()+')',
- 
 
 187 
                        max: 'Date('+(endD+43200000).toString()+')'
- 
 
 188 
                    },
92 
                    direction: -1
 189 
                    direction: -1,
- 
 
 190 
                    ticks: [
- 
 
 191 
{foreach from=$dailyGraphData key=key item=value}
- 
 
 192 
                        new {$value.label},
- 
 
 193 
{/foreach}
- 
 
 194 
                    ]
93 
                }
 195 
                }
94 
            };
 196 
            };
95
197 
 
96 
            var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy' });
 198 
            var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy' });
97 
            formatDate.format(data, 0);
 199 
            formatDate.format(data, 0);
98
200
99 
            var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$dailyLargestPrefix}' });
 201 
            var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$dailyLargestPrefix}' });
100 
            formatNumber.format(data, 1);
 202 
            formatNumber.format(data, 1);
Line 124... Line 226...
124 
                title: 'Monthly Network Traffic',
 226 
                title: 'Monthly Network Traffic',
125 
                orientation: 'horizontal',
 227 
                orientation: 'horizontal',
126 
                legend: { position: 'right' },
 228 
                legend: { position: 'right' },
127 
                explorer: {
229 
                explorer: {
128 
                    axis: 'horizontal',
 230 
                    axis: 'horizontal',
- 
 
 231 
                    zoomDelta: 1.1,
129 
                    maxZoomIn: 4.0,
 232 
                    maxZoomIn: 0.1,
130 
                    maxZoomOut: 3.0
 233 
                    maxZoomOut: 10.0
131 
            	},
 234 
            	},
132 
                vAxis: {
 235 
                vAxis: {
133 
                    title: 'Data',
 - 
 
134 
                    format: '##.## {$monthlyLargestPrefix}'
 236 
                    format: '##.## {$monthlyLargestPrefix}'
135 
                },
 237 
                },
136 
                hAxis: {
 238 
                hAxis: {
137 
                    title: 'Month',
 239 
                    title: 'Month',
138 
                    format: 'MMMM YYYY',
 240 
                    format: 'MMMM YYYY',