function numberWithSpaces(x) { var parts = x.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " "); return parts.join("."); } $(document).ready(function() { var time_arr = ["1627574411","1627578010","1627581610","1627585210","1627588809","1627592410","1627596010","1627599619","1627603211","1627606815","1627610410","1627614009","1627617610","1627621209","1627624810","1627628410","1627632010","1627635610","1627639210","1627642813","1627646410","1627650010","1627653610","1627657210","1627660809"]; var time_new = []; time_arr.forEach(function(item, i, time_arr) { var unixtimestamp = item; var months_arr = [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" ]; var date = new Date(unixtimestamp * 1000); var hours = "0" + date.getHours(); var convdataTime = hours.substr(-2); time_new.push(convdataTime+':00'); }); $('.analytics_page_stats .load_hide.active').removeClass('active'); $('span.all_projects').html(numberWithSpaces(21888)); $('span.all_summ').html(numberWithSpaces(6797260)); var mapNavigation = { enableMouseWheelZoom: true }; var chart = { type: 'spline' }; var title = { text: 'Number of projects by sites' }; var subtitle = { text: '' }; var xAxis = { categories: [time_new[0], time_new[1], time_new[2], time_new[3], time_new[4], time_new[5], time_new[6], time_new[7], time_new[8], time_new[9], time_new[10], time_new[11], time_new[12], time_new[13], time_new[14], time_new[15], time_new[16], time_new[17], time_new[18], time_new[19], time_new[20], time_new[21], time_new[22], time_new[23], time_new[24]] }; var yAxis = { title: { text: 'Projects per hour' }, labels: { formatter: function() { return this.value } }, lineWidth: 2 }; var tooltip = { crosshairs: true, shared: true, valueSuffix: ' projects' }; var plotOptions = { spline: { marker: { enabled: true, symbol: 'circle', radius: 2, states: { hover: { enabled: true } } } } }; var series = [ {name: 'Fl.ru',data:[21, 34, 16, 10, 9, 5, 6, 5, 2, 5, 1, 2, 5, 65, 32, 36, 68, 59, 66, 47, 72, 67, 32, 37, 21]},{name: 'Freelancehunt.com',data:[18, 16, 20, 12, 11, 2, 4, 2, 2, 2, 0, 1, 4, 7, 16, 21, 28, 28, 34, 32, 35, 25, 24, 23, 15]},{name: 'Habr.freelance',data:[4, 2, 6, 3, 3, 3, 2, 0, 2, 0, 1, 1, 3, 5, 5, 6, 4, 8, 4, 2, 5, 2, 4, 5, 2]},{name: 'Weblancer.net',data:[2, 8, 4, 2, 6, 9, 1, 0, 4, 0, 1, 0, 5, 3, 9, 8, 13, 14, 17, 9, 9, 12, 10, 3, 6]},{name: 'Freelance.ru',data:[6, 9, 13, 11, 6, 4, 4, 3, 1, 1, 0, 4, 13, 7, 16, 22, 15, 27, 29, 26, 29, 21, 20, 12, 3]},{name: 'Freelance.youdo.com',data:[6, 7, 3, 8, 7, 2, 1, 2, 0, 0, 1, 2, 3, 5, 10, 8, 9, 16, 12, 7, 5, 23, 7, 7, 3]},{name: 'Upwork.com',data:[387, 422, 409, 451, 358, 316, 290, 338, 239, 196, 258, 184, 229, 282, 271, 245, 297, 248, 325, 312, 350, 383, 350, 432, 289]},{name: 'Freelancer.com',data:[212, 217, 198, 172, 172, 145, 126, 154, 132, 107, 91, 145, 140, 154, 239, 208, 164, 158, 190, 177, 191, 222, 201, 195, 185]},{name: 'Peopleperhour.com',data:[27, 0, 20, 5, 12, 0, 0, 0, 0, 0, 2, 22, 0, 6, 6, 14, 12, 16, 10, 16, 17, 7, 12, 10, 19]},{name: 'Guru.com',data:[11, 8, 4, 2, 5, 7, 3, 0, 4, 5, 3, 4, 2, 5, 7, 3, 2, 3, 6, 2, 3, 7, 8, 5, 10]},{name: 'Etxt.ru',data:[186, 182, 124, 172, 182, 148, 155, 143, 145, 86, 105, 132, 83, 255, 249, 258, 235, 253, 244, 227, 228, 220, 229, 207, 139]},{name: 'YouDo.com',data:[142, 156, 119, 110, 89, 49, 24, 17, 11, 10, 8, 21, 47, 82, 140, 226, 215, 252, 222, 197, 182, 193, 143, 170, 117]},{name: 'Freelance.ua',data:[0, 2, 2, 2, 3, 3, 4, 0, 0, 0, 0, 0, 0, 0, 2, 6, 2, 4, 2, 5, 4, 6, 1, 2, 3]} ]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; json.mapNavigation = mapNavigation; $('#container1').highcharts(json); var mapNavigation = { enableMouseWheelZoom: true }; var chart = { type: 'spline' }; var title = { text: 'Budgets by sites' }; var subtitle = { text: '' }; var xAxis = { categories: [time_new[0], time_new[1], time_new[2], time_new[3], time_new[4], time_new[5], time_new[6], time_new[7], time_new[8], time_new[9], time_new[10], time_new[11], time_new[12], time_new[13], time_new[14], time_new[15], time_new[16], time_new[17], time_new[18], time_new[19], time_new[20], time_new[21], time_new[22], time_new[23], time_new[24]] }; var yAxis = { title: { text: '$ in hour' }, labels: { formatter: function() { return '$' + this.value / 1000 + 'k'; } }, lineWidth: 2 }; var tooltip = { crosshairs: true, shared: true, valuePrefix: '$' }; var plotOptions = { spline: { marker: { enabled: true, symbol: 'circle', radius: 2, states: { hover: { enabled: true } } } } }; var series = [ {name: 'Fl.ru',data:[1348, 10266, 1521, 801, 855, 3038, 2457, 17, 357, 631, 35, 88, 159, 13457, 14231, 10590, 11351, 11710, 27071, 10164, 11001, 24126, 12495, 8167, 3575]},{name: 'Freelancehunt.com',data:[606, 285, 430, 95, 617, 35, 1214, 221, 0, 71, 0, 0, 28, 285, 1797, 4054, 1140, 3271, 1905, 949, 1495, 346, 4875, 2958, 262]},{name: 'Habr.freelance',data:[1470, 0, 71, 7, 4314, 2857, 1428, 0, 21, 0, 0, 0, 85, 3764, 1285, 814, 221, 3908, 1750, 12, 292, 17, 0, 121, 285]},{name: 'Weblancer.net',data:[0, 27, 0, 0, 150, 236, 0, 0, 0, 0, 0, 0, 510, 10, 0, 1007, 703, 47, 120, 245, 1850, 3200, 0, 55, 0]},{name: 'Freelance.ru',data:[644, 1428, 14, 0, 0, 285, 1028, 428, 428, 14, 0, 142, 1407, 757, 836, 502, 3828, 3695, 2494, 247, 927, 1200, 1694, 150, 208]},{name: 'Freelance.youdo.com',data:[1128, 1571, 128, 407, 485, 207, 71, 57, 0, 0, 71, 200, 285, 1885, 1642, 1900, 2171, 727, 2528, 1242, 457, 3057, 407, 557, 185]},{name: 'Upwork.com',data:[134946, 201716, 122853, 107926, 98655, 151150, 41960, 51931, 114948, 80809, 87683, 45571, 228907, 57489, 47866, 546269, 55766, 40001, 151581, 132098, 136394, 161995, 284646, 65560, 72094]},{name: 'Freelancer.com',data:[104798, 174785, 93601, 80407, 85057, 59033, 57922, 86815, 55909, 42625, 31865, 67604, 53386, 45276, 446655, 113403, 88464, 57187, 193385, 123352, 107968, 90624, 107887, 92069, 74617]},{name: 'Peopleperhour.com',data:[5147, 0, 3967, 683, 638, 0, 0, 0, 0, 0, 454, 3941, 0, 10709, 664, 2108, 2026, 1866, 1544, 1869, 1827, 1251, 1803, 1034, 4731]},{name: 'Guru.com',data:[1030, 7268, 1768, 500, 750, 1000, 560, 0, 1259, 6008, 254, 1000, 6, 2300, 766, 260, 0, 770, 6752, 250, 290, 333, 6268, 1108, 1168]},{name: 'Etxt.ru',data:[250, 251, 187, 205, 220, 145, 205, 141, 149, 116, 96, 170, 124, 534, 781, 527, 497, 567, 473, 558, 545, 467, 295, 403, 235]},{name: 'YouDo.com',data:[23939, 24827, 39459, 29865, 19424, 12891, 5919, 8424, 864, 8557, 467, 2656, 13382, 21490, 35505, 69560, 62518, 31198, 51418, 44525, 36302, 38242, 34062, 29449, 15188]},{name: 'Freelance.ua',data:[0, 67, 23, 750, 779, 178, 391, 0, 0, 0, 0, 0, 0, 0, 507, 232, 162, 59, 21, 140, 744, 400, 0, 28, 13]} ]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; json.mapNavigation = mapNavigation; $('#container').highcharts(json); var colors = Highcharts.getOptions().colors; var categories = ['CIS', 'International']; var data = [{ y: 953822, color: colors[4], drilldown: { name: 'CIS', categories: ['Fl.ru', 'Freelancehunt.com', 'Freelance.habr.com', 'Weblancer.net', 'Freelance.ru', 'Freelance.youdo.com', 'Etxt.ru', 'YouDo.com', 'Freelance.ua'], data: [179511, 26939, 22722, 8160, 22356, 21368, 8141, 660131, 4494], color: colors[4] } }, { y: 5843438, color: colors[0], drilldown: { name: 'International', categories: ['Upwork.com', 'Freelancer.com', 'Peopleperhour.com', 'Guru.com'], data: [3220814, 2534694, 46262, 41668], color: colors[0] } } ]; var browserData = []; var versionsData = []; var i, j; var dataLen = data.length; var drillDataLen; var brightness; // Build the data arrays for (i = 0; i < dataLen; i += 1) { // add browser data browserData.push({ name: categories[i], y: data[i].y, color: data[i].color }); // add version data drillDataLen = data[i].drilldown.data.length; for (j = 0; j < drillDataLen; j += 1) { brightness = 0.2 - (j / drillDataLen) / 5; versionsData.push({ name: data[i].drilldown.categories[j], y: data[i].drilldown.data[j], color: Highcharts.Color(data[i].color).brighten(brightness).get() }); } } var chart = { type: 'pie' }; var title = { text: 'Market shares by budget' }; var yAxis = { title: { text: '' } }; var tooltip = { useHTML: true, formatter: function () { var sum = this.y.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 "); return ("" + this.key + ": " + Math.round(this.point.percentage * 10) / 10 + "%
Total budget: $" + sum + ""); } }; var plotOptions = { pie: { shadow: false, center: ['50%', '50%'] } }; var series = [{ name: 'Region', data: browserData, size: '60%', dataLabels: { formatter: function() { return this.y > 5 ? this.point.name : null; }, color: 'white', distance: -30 } }, { name: 'Site', data: versionsData, size: '80%', innerSize: '60%', dataLabels: { formatter: function() { // display only if larger than 1 return this.y > 1 ? '' + this.point.name + ': $' + this.y + '' : null; } } } ]; var json = {}; json.chart = chart; json.title = title; json.yAxis = yAxis; json.tooltip = tooltip; json.series = series; json.plotOptions = plotOptions; $('#container2').highcharts(json); var colors = Highcharts.getOptions().colors; var categories = ['CIS', 'International']; var data = [{ y: 9380, color: colors[4], drilldown: { name: 'CIS', categories: ['Fl.ru', 'Freelancehunt.com', 'Freelance.habr.com', 'Weblancer.net', 'Freelance.ru', 'Freelance.youdo.com', 'Etxt.ru', 'YouDo.com', 'Freelance.ua'], data: [723, 382, 82, 155, 302, 154, 4587, 2942, 53], color: colors[4] } }, { y: 12508, color: colors[0], drilldown: { name: 'International', categories: ['Upwork.com', 'Freelancer.com', 'Peopleperhour.com', 'Guru.com'], data: [7861, 4295, 233, 119], color: colors[0] } } ]; var browserData = []; var versionsData = []; var i, j; var dataLen = data.length; var drillDataLen; var brightness; // Build the data arrays for (i = 0; i < dataLen; i += 1) { // add browser data browserData.push({ name: categories[i], y: data[i].y, color: data[i].color }); // add version data drillDataLen = data[i].drilldown.data.length; for (j = 0; j < drillDataLen; j += 1) { brightness = 0.2 - (j / drillDataLen) / 5; versionsData.push({ name: data[i].drilldown.categories[j], y: data[i].drilldown.data[j], color: Highcharts.Color(data[i].color).brighten(brightness).get() }); } } var chart = { type: 'pie' }; var title = { text: 'Market shares by number of projects' }; var yAxis = { title: { text: '' } }; var tooltip = { useHTML: true, formatter: function () { var sum = this.y.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 "); return ("" + this.key + ": " + Math.round(this.point.percentage * 10) / 10 + "%
Projects: " + sum + ""); } }; var plotOptions = { pie: { shadow: false, center: ['50%', '50%'] } }; var series = [{ name: 'Region', data: browserData, size: '60%', dataLabels: { formatter: function() { return this.y > 5 ? this.point.name : null; }, color: 'white', distance: -30 } }, { name: 'Site', data: versionsData, size: '80%', innerSize: '60%', dataLabels: { formatter: function() { // display only if larger than 1 return this.y > 1 ? '' + this.point.name + ': ' + this.y : null; } } } ]; var json = {}; json.chart = chart; json.title = title; json.yAxis = yAxis; json.tooltip = tooltip; json.series = series; json.plotOptions = plotOptions; $('#container3').highcharts(json); var chart = { type: 'areaspline' }; var title = { text: 'Budget' }; var subtitle = { text: '$'+numberWithSpaces(6797260) }; var xAxis = { categories: [time_new[0], time_new[1], time_new[2], time_new[3], time_new[4], time_new[5], time_new[6], time_new[7], time_new[8], time_new[9], time_new[10], time_new[11], time_new[12], time_new[13], time_new[14], time_new[15], time_new[16], time_new[17], time_new[18], time_new[19], time_new[20], time_new[21], time_new[22], time_new[23], time_new[24]], labels: { formatter: function () { return ''; } } }; var yAxis = { title: { text: '' }, labels: { formatter: function () { return ''; } } }; var plotOptions = { areaspline: { color: '#ff8204', marker: { enabled: false, color: '#ff8204', states: { hover: { enabled: true } } } } }; var tooltip = { useHTML: true, pointFormat: 'Budget ${point.y:,.0f}' }; var series = [ { name: '', data: [282095, 426784, 270616, 222476, 219786, 233224, 114380, 148528, 174301, 138898, 120963, 122525, 299538, 159774, 554921, 762602, 237292, 177024, 448736, 324927, 305647, 338622, 461823, 211895, 173376] } ]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; $('#container4').highcharts(json); var chart = { type: 'areaspline' }; var title = { text: 'Projects' }; var subtitle = { text: numberWithSpaces(21888) }; var xAxis = { categories: [time_new[0], time_new[1], time_new[2], time_new[3], time_new[4], time_new[5], time_new[6], time_new[7], time_new[8], time_new[9], time_new[10], time_new[11], time_new[12], time_new[13], time_new[14], time_new[15], time_new[16], time_new[17], time_new[18], time_new[19], time_new[20], time_new[21], time_new[22], time_new[23], time_new[24]], labels: { formatter: function () { return ''; } } }; var yAxis = { title: { text: '' }, labels: { formatter: function () { return ''; } } }; var tooltip = { useHTML: true, pointFormat: '{point.y:,.0f} projects' }; var plotOptions = { areaspline: { color: '#0aac41', marker: { enabled: false, color: '#0aac41', states: { hover: { enabled: true } } } } }; var series = [ { name: '', data: [1074, 1152, 1031, 988, 890, 704, 629, 670, 591, 423, 475, 537, 571, 937, 1145, 1198, 1203, 1220, 1303, 1158, 1238, 1310, 1133, 1204, 861] } ]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; $('#container5').highcharts(json); });