Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
var dtlabels;
2 
var dslabels;
3 
var brlabels;
4 
 
5 
function createCharts(datas){
6 
    Chart.defaults.global.responsive = true;
7 
 
8 
    dtlabels = getTypeLabels(datas);
9 
 
10 
    console.log(dtlabels);
11 
 
12 
    var dtdatas = getTypeDatas(datas);
13 
    var dtcolors = getColorsNum(dtdatas);
14 
 
15 
    var devicetypecanvas = $("#chart_devicetypes");
16 
    var devicetypechart = new Chart(devicetypecanvas, {
17 
        type: 'pie',
18 
        data: {
19 
            labels: dtlabels,
20 
            datasets: [{
21 
                data: dtdatas,
22 
                backgroundColor: dtcolors
23 
            }]
24 
        },
25 
    });
26 
 
27 
    dslabels = getSystemLabels(datas);
28 
    var dsdatas = getSystemDatas(datas);
29 
    var dscolors = getColorsNum(dslabels);
30 
 
31 
    var devicesystemcanvas = $("#chart_devicesystems");
32 
    var devicesystemchart = new Chart(devicesystemcanvas, {
33 
        type: 'bar',
34 
        data: {
35 
            labels: dslabels,
36 
            datasets: [{
37 
                label: "Percent",
38 
                data: dsdatas,
39 
                backgroundColor: dscolors
40 
            }]
41 
        },options: {
42 
            legend: {
43 
                display: false,
44 
            },
45 
            scales: {
46 
                yAxes: [{
47 
                    ticks: {
48 
                        beginAtZero:true
49 
                    }
50 
                }]
51 
            }
52 
        }
53 
    });
54 
 
55 
    brlabels = getBrowserLabels(datas);
56 
    var brdatas = getBrowserDatas(datas);
57 
    var brcolors = getColorsNum(brlabels);
58 
 
59 
    var devicebrowsercanvas = $("#chart_devicebrowsers");
60 
    var devicebrowserchart = new Chart(devicebrowsercanvas, {
61 
        type: 'pie',
62 
        data: {
63 
            labels: brlabels,
64 
            datasets: [{
65 
                data: brdatas,
66 
                backgroundColor: brcolors
67 
            }]
68 
        },
69 
    });
70 
 
71 
    var filtereddatas = datas;
72 
    for(var fkey in filtereddatas){
73 
        if(filtereddatas[fkey].devicedisplaysizex == null){
74 
            delete filtereddatas[fkey];
75 
        }
76 
    }
77 
    var displaydata = getDisplayDatasets(filtereddatas);
78 
    console.log(displaydata);
79 
    var devicescreencanvas = $("#chart_devicedisplaysize");
80 
    window.myScatter = Chart.Scatter(devicescreencanvas, {
81 
        data: displaydata,
82 
        options: {
83 
            title: {
84 
                display: false,
85 
            },
86 
            scales: {
87 
                xAxes: [{
88 
                    position: 'top',
89 
                    gridLines: {
90 
                        zeroLineColor: "rgba(0,255,0,1)"
91 
                    },
92 
                    scaleLabel: {
93 
                        display: true,
94 
                        labelString: 'width in px'
95 
                    }
96 
                }],
97 
                yAxes: [{
98 
                    position: 'left',
99 
                    gridLines: {
100 
                        zeroLineColor: "rgba(0,255,0,1)"
101 
                    },
102 
                    scaleLabel: {
103 
                        display: true,
104 
                        labelString: 'height in px'
105 
                    }
106 
                }]
107 
            },
108 
            showLines: false,
109 
        }
110 
    });
111 
 
112 
    var filteredwindowdatas = datas;
113 
    for(var fkey in filteredwindowdatas){
114 
        if(filteredwindowdatas[fkey].devicewindowsizex == null){
115 
            delete filteredwindowdatas[fkey];
116 
        }
117 
    }
118 
    var windowdata = getWindowDatasets(filteredwindowdatas);
119 
    var devicewindowcanvas = $("#chart_devicewindowsize");
120 
    window.myScatter = Chart.Scatter(devicewindowcanvas, {
121 
        data: windowdata,
122 
        options: {
123 
            title: {
124 
                display: false,
125 
            },
126 
            scales: {
127 
                xAxes: [{
128 
                    position: 'top',
129 
                    gridLines: {
130 
                        zeroLineColor: "rgba(0,255,0,1)"
131 
                    },
132 
                    scaleLabel: {
133 
                        display: true,
134 
                        labelString: 'width in px'
135 
                    }
136 
                }],
137 
                yAxes: [{
138 
                    position: 'left',
139 
                    gridLines: {
140 
                        zeroLineColor: "rgba(0,255,0,1)"
141 
                    },
142 
                    scaleLabel: {
143 
                        display: true,
144 
                        labelString: 'height in px'
145 
                    }
146 
                }]
147 
            },
148 
            showLines: false,
149 
        }
150 
    });
151 
}
152 
 
153 
function getDisplayDatasets(datas){
154 
    var databuffer = [];
155 
    for(ddata in datas){
156 
        var point = {device: datas[ddata].devicetype, x: datas[ddata].devicedisplaysizex, y: datas[ddata].devicedisplaysizey};
157 
        databuffer.push(point);
158 
    }
159 
    return convertTChartData(databuffer);
160 
}
161 
 
162 
function getWindowDatasets(datas){
163 
    var databuffer = [];
164 
    for(ddata in datas){
165 
        var point = {device: datas[ddata].devicetype, x: datas[ddata].devicewindowsizex, y: datas[ddata].devicewindowsizey};
166 
        databuffer.push(point);
167 
    }
168 
    return convertTChartData(databuffer);
169 
}
170 
 
171 
function convertTChartData(datacon){
172 
    var chartdata = new Object();
173 
    chartdata.datasets = new Array();
174 
    for(var ll = 0; ll < datacon.length; ll++){
175 
        var look;
176 
        if((look = checkifexistsinArray(chartdata.datasets, datacon[ll].device)) !== false){
177 
            var inObject = new Object();
178 
            inObject.x = datacon[ll].x;
179 
            inObject.y = datacon[ll].y;
180 
            look.push(inObject);
181 
        }else{
182 
            var setObject = new Object();
183 
            setObject.label = datacon[ll].device;
184 
            setObject.data = new Array();
185 
            var obColor = getColorByValue(chartdata.datasets);
186 
            setObject.backgroundColor = obColor;
187 
            setObject.pointBorderColor = obColor;
188 
            setObject.pointBackgroundColor = obColor;
189 
            var inObject = new Object();
190 
            inObject.x = datacon[ll].x;
191 
            inObject.y = datacon[ll].y;
192 
            setObject.data.push(inObject);
193 
            chartdata.datasets.push(setObject);
194 
        }
195 
    }
196 
 
197 
    return chartdata;
198 
}
199 
 
200 
function resizetocount(val, max){
201 
    if(val >= max){
202 
        return max;
203 
    } else {
204 
        return val;
205 
    }
206 
}
207 
 
208 
function checkifexistsinArray(set, look){
209 
    for(var i = 0; i < set.length; i++) {
210 
        if (set[i].label == look) {
211 
            return set[i].data;
212 
        }
213 
    }
214 
    return false;
215 
}
216 
 
217 
function getGround(datas){
218 
    var groundval = 0;
219 
    for (var i in datas) {
220 
        groundval += datas[i];
221 
    }
222 
    return groundval;
223 
}
224 
 
225 
function getPercent(ground, data){
226 
    var per = (data / ground) * 100;
227 
    return Math.round (per * 100) / 100;
228 
}
229 
 
230 
function getTypeLabels(datas){
231 
    var td = [];
232 
    $.each(datas, function(index, value) {
233 
        if($.inArray(value.devicetype, td) === -1) {
234 
            td.push(value.devicetype);
235 
        }
236 
    });
237 
    return td;
238 
}
239 
 
240 
function getSystemLabels(datas){
241 
    var ts = [];
242 
    $.each(datas, function(index, value) {
243 
        if($.inArray(value.devicesystem, ts) === -1) {
244 
            ts.push(value.devicesystem);
245 
        }
246 
    });
247 
    return ts;
248 
}
249 
 
250 
function getBrowserLabels(datas){
251 
    var db = [];
252 
    $.each(datas, function(index, value) {
253 
        if($.inArray(value.devicebrowser, db) === -1) {
254 
            db.push(value.devicebrowser);
255 
        }
256 
    });
257 
    return db;
258 
}
259 
 
260 
function getTypeDatas(datas){
261 
    var dtdatas = [];
262 
    $.each(datas, function(index, value) {
263 
        if(typeof dtdatas[value.devicetype] === 'undefined') {
264 
            dtdatas[value.devicetype] = 1;
265 
        }else{
266 
            dtdatas[value.devicetype] += 1;
267 
        }
268 
    });
269 
    var groundval = getGround(dtdatas);
270 
    var dtwrap = [];
271 
    for (var i in dtdatas) {
272 
        dtwrap.push(getPercent(groundval,dtdatas[i]));
273 
    }
274 
    return dtwrap;
275 
}
276 
 
277 
function getSystemDatas(datas){
278 
    var dtdatas = [];
279 
    $.each(datas, function(index, value) {
280 
        if(typeof dtdatas[value.devicesystem] === 'undefined') {
281 
            dtdatas[value.devicesystem] = 1;
282 
        }else{
283 
            dtdatas[value.devicesystem] += 1;
284 
        }
285 
    });
286 
    var groundval = getGround(dtdatas);
287 
    var dtwrap = [];
288 
    for (var i in dtdatas) {
289 
        dtwrap.push(getPercent(groundval,dtdatas[i]));
290 
    }
291 
    return dtwrap;
292 
}
293 
 
294 
function getBrowserDatas(datas){
295 
    var dtdatas = [];
296 
    $.each(datas, function(index, value) {
297 
        if(typeof dtdatas[value.devicebrowser] === 'undefined') {
298 
            dtdatas[value.devicebrowser] = 1;
299 
        }else{
300 
            dtdatas[value.devicebrowser] += 1;
301 
        }
302 
    });
303 
    var groundval = getGround(dtdatas);
304 
    var dtwrap = [];
305 
    for (var i in dtdatas) {
306 
        dtwrap.push(getPercent(groundval,dtdatas[i]));
307 
    }
308 
    return dtwrap;
309 
}
310 
 
311 
function getRandomColors(num){
312 
    var colors = [];
313 
    for (i = 0; i < num; i++) {
314 
        colors.push(getRandomColor());
315 
    }
316 
    return colors;
317 
}
318 
 
319 
function getRandomColor() {
320 
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
321 
}
322 
 
323 
function getColorsNum(cdatas){
324 
    var colors = [];
325 
    for (i = 0; i < cdatas.length; i++) {
326 
        colors.push(getColorByValue(colors));
327 
    }
328 
    return colors;
329 
}
330 
 
331 
function getColorByValue(list){
332 
    var collist = ['#ce4d45', '#f19c65', '#ffd265', '#2aa876', '#0a7b83', '#588c7e', '#f2e394', '#f2ae72', '#d96459', '#8c4646'];
333 
    if(list.length >= collist.length) {
334 
        return getRandomColor();
335 
    }
336 
    return collist[list.length];
337 
}