AutorÃa | Ultima modificación | Ver Log |
var dtlabels;var dslabels;var brlabels;function createCharts(datas){Chart.defaults.global.responsive = true;dtlabels = getTypeLabels(datas);console.log(dtlabels);var dtdatas = getTypeDatas(datas);var dtcolors = getColorsNum(dtdatas);var devicetypecanvas = $("#chart_devicetypes");var devicetypechart = new Chart(devicetypecanvas, {type: 'pie',data: {labels: dtlabels,datasets: [{data: dtdatas,backgroundColor: dtcolors}]},});dslabels = getSystemLabels(datas);var dsdatas = getSystemDatas(datas);var dscolors = getColorsNum(dslabels);var devicesystemcanvas = $("#chart_devicesystems");var devicesystemchart = new Chart(devicesystemcanvas, {type: 'bar',data: {labels: dslabels,datasets: [{label: "Percent",data: dsdatas,backgroundColor: dscolors}]},options: {legend: {display: false,},scales: {yAxes: [{ticks: {beginAtZero:true}}]}}});brlabels = getBrowserLabels(datas);var brdatas = getBrowserDatas(datas);var brcolors = getColorsNum(brlabels);var devicebrowsercanvas = $("#chart_devicebrowsers");var devicebrowserchart = new Chart(devicebrowsercanvas, {type: 'pie',data: {labels: brlabels,datasets: [{data: brdatas,backgroundColor: brcolors}]},});var filtereddatas = datas;for(var fkey in filtereddatas){if(filtereddatas[fkey].devicedisplaysizex == null){delete filtereddatas[fkey];}}var displaydata = getDisplayDatasets(filtereddatas);console.log(displaydata);var devicescreencanvas = $("#chart_devicedisplaysize");window.myScatter = Chart.Scatter(devicescreencanvas, {data: displaydata,options: {title: {display: false,},scales: {xAxes: [{position: 'top',gridLines: {zeroLineColor: "rgba(0,255,0,1)"},scaleLabel: {display: true,labelString: 'width in px'}}],yAxes: [{position: 'left',gridLines: {zeroLineColor: "rgba(0,255,0,1)"},scaleLabel: {display: true,labelString: 'height in px'}}]},showLines: false,}});var filteredwindowdatas = datas;for(var fkey in filteredwindowdatas){if(filteredwindowdatas[fkey].devicewindowsizex == null){delete filteredwindowdatas[fkey];}}var windowdata = getWindowDatasets(filteredwindowdatas);var devicewindowcanvas = $("#chart_devicewindowsize");window.myScatter = Chart.Scatter(devicewindowcanvas, {data: windowdata,options: {title: {display: false,},scales: {xAxes: [{position: 'top',gridLines: {zeroLineColor: "rgba(0,255,0,1)"},scaleLabel: {display: true,labelString: 'width in px'}}],yAxes: [{position: 'left',gridLines: {zeroLineColor: "rgba(0,255,0,1)"},scaleLabel: {display: true,labelString: 'height in px'}}]},showLines: false,}});}function getDisplayDatasets(datas){var databuffer = [];for(ddata in datas){var point = {device: datas[ddata].devicetype, x: datas[ddata].devicedisplaysizex, y: datas[ddata].devicedisplaysizey};databuffer.push(point);}return convertTChartData(databuffer);}function getWindowDatasets(datas){var databuffer = [];for(ddata in datas){var point = {device: datas[ddata].devicetype, x: datas[ddata].devicewindowsizex, y: datas[ddata].devicewindowsizey};databuffer.push(point);}return convertTChartData(databuffer);}function convertTChartData(datacon){var chartdata = new Object();chartdata.datasets = new Array();for(var ll = 0; ll < datacon.length; ll++){var look;if((look = checkifexistsinArray(chartdata.datasets, datacon[ll].device)) !== false){var inObject = new Object();inObject.x = datacon[ll].x;inObject.y = datacon[ll].y;look.push(inObject);}else{var setObject = new Object();setObject.label = datacon[ll].device;setObject.data = new Array();var obColor = getColorByValue(chartdata.datasets);setObject.backgroundColor = obColor;setObject.pointBorderColor = obColor;setObject.pointBackgroundColor = obColor;var inObject = new Object();inObject.x = datacon[ll].x;inObject.y = datacon[ll].y;setObject.data.push(inObject);chartdata.datasets.push(setObject);}}return chartdata;}function resizetocount(val, max){if(val >= max){return max;} else {return val;}}function checkifexistsinArray(set, look){for(var i = 0; i < set.length; i++) {if (set[i].label == look) {return set[i].data;}}return false;}function getGround(datas){var groundval = 0;for (var i in datas) {groundval += datas[i];}return groundval;}function getPercent(ground, data){var per = (data / ground) * 100;return Math.round (per * 100) / 100;}function getTypeLabels(datas){var td = [];$.each(datas, function(index, value) {if($.inArray(value.devicetype, td) === -1) {td.push(value.devicetype);}});return td;}function getSystemLabels(datas){var ts = [];$.each(datas, function(index, value) {if($.inArray(value.devicesystem, ts) === -1) {ts.push(value.devicesystem);}});return ts;}function getBrowserLabels(datas){var db = [];$.each(datas, function(index, value) {if($.inArray(value.devicebrowser, db) === -1) {db.push(value.devicebrowser);}});return db;}function getTypeDatas(datas){var dtdatas = [];$.each(datas, function(index, value) {if(typeof dtdatas[value.devicetype] === 'undefined') {dtdatas[value.devicetype] = 1;}else{dtdatas[value.devicetype] += 1;}});var groundval = getGround(dtdatas);var dtwrap = [];for (var i in dtdatas) {dtwrap.push(getPercent(groundval,dtdatas[i]));}return dtwrap;}function getSystemDatas(datas){var dtdatas = [];$.each(datas, function(index, value) {if(typeof dtdatas[value.devicesystem] === 'undefined') {dtdatas[value.devicesystem] = 1;}else{dtdatas[value.devicesystem] += 1;}});var groundval = getGround(dtdatas);var dtwrap = [];for (var i in dtdatas) {dtwrap.push(getPercent(groundval,dtdatas[i]));}return dtwrap;}function getBrowserDatas(datas){var dtdatas = [];$.each(datas, function(index, value) {if(typeof dtdatas[value.devicebrowser] === 'undefined') {dtdatas[value.devicebrowser] = 1;}else{dtdatas[value.devicebrowser] += 1;}});var groundval = getGround(dtdatas);var dtwrap = [];for (var i in dtdatas) {dtwrap.push(getPercent(groundval,dtdatas[i]));}return dtwrap;}function getRandomColors(num){var colors = [];for (i = 0; i < num; i++) {colors.push(getRandomColor());}return colors;}function getRandomColor() {return '#' + Math.floor(Math.random() * 16777215).toString(16);}function getColorsNum(cdatas){var colors = [];for (i = 0; i < cdatas.length; i++) {colors.push(getColorByValue(colors));}return colors;}function getColorByValue(list){var collist = ['#ce4d45', '#f19c65', '#ffd265', '#2aa876', '#0a7b83', '#588c7e', '#f2e394', '#f2ae72', '#d96459', '#8c4646'];if(list.length >= collist.length) {return getRandomColor();}return collist[list.length];}