'use strict'; $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); // sale report start var ctx = document.getElementById('sale-report-1').getContext("2d"); var myChart = new Chart(ctx, { type: 'bar', data: salereportchart('#448aff', [25, 30, 15, 20, 25, 30, 15, 1], '#448aff'), options: salereportbuildoption(), }); var ctx = document.getElementById('sale-report-2').getContext("2d"); var myChart = new Chart(ctx, { type: 'bar', data: salereportchart('#11c15b', [15, 20, 25,10, 12, 30, 15, 1], '#11c15b'), options: salereportbuildoption(), }); var ctx = document.getElementById('sale-report-3').getContext("2d"); var myChart = new Chart(ctx, { type: 'bar', data: salereportchart('#536dfe', [15, 20, 25,10, 30, 15, 25, 1], '#536dfe'), options: salereportbuildoption(), }); var ctx = document.getElementById('sale-report-4').getContext("2d"); var myChart = new Chart(ctx, { type: 'bar', data: salereportchart('#ff5252', [30, 15, 25, 35, 30, 20, 15, 1], '#ff5252'), options: salereportbuildoption(), }); function salereportchart(a, b, f) { if (f == null) { f = "rgba(0,0,0,0)"; } return { labels: ["1","2","3","4","5","6","7","8"], datasets: [{ label: "", borderColor: a, borderWidth: 2, hitRadius: 30, pointRadius: 0, pointHoverRadius: 4, pointBorderWidth: 2, pointHoverBorderWidth: 12, pointBackgroundColor: Chart.helpers.color("#000000").alpha(0).rgbString(), // pointBorderColor: Chart.helpers.color("#000000").alpha(0).rgbString(), pointBorderColor: a, pointHoverBackgroundColor: a, pointHoverBorderColor: Chart.helpers.color("#000000").alpha(.1).rgbString(), fill: true, lineTension: 0, backgroundColor: f, data: b, }] }; } function salereportbuildoption() { return { title: { display: !1 }, tooltips: { position: 'nearest', mode: 'index', intersect: false, yPadding: 10, xPadding: 10, }, legend: { display: !1, labels: { usePointStyle: !1 } }, responsive: !0, maintainAspectRatio: !0, hover: { mode: "index" }, scales: { xAxes: [{ display: !1, gridLines: !1, scaleLabel: { display: !0, labelString: "Month" } }], yAxes: [{ display: !1, gridLines: !1, scaleLabel: { display: !0, labelString: "Value" }, ticks: { beginAtZero: !0 } }] }, elements: { point: { radius: 4, borderWidth: 12 } }, layout: { padding: { left: 10, right: 10, top: 10, bottom: 10 } } }; } // sale report end // pageview and prod sale start var chart = AmCharts.makeChart("product-sales-chart", { "type": "serial", "theme": "light", "dataDateFormat": "YYYY-MM-DD", "precision": 2, "valueAxes": [{ "id": "v1", "title": "Sales", "position": "left", "autoGridCount": false, "labelFunction": function(value) { return "$" + Math.round(value) + "M"; } }, { "id": "v2", "gridAlpha": 0.1, "autoGridCount": false }], "graphs": [{ "id": "g1", "valueAxis": "v2", "lineThickness": 0, "fillAlphas": 0.9, "lineColor": "#448aff", "type": "smoothedLine", "title": "Laptop", "useLineColorForBulletBorder": true, "valueField": "market1", "balloonText": "[[title]]
[[value]]" }, { "id": "g2", "valueAxis": "v2", "fillAlphas": 0.9, "bulletColor": "#ff5252", "lineThickness": 0, "lineColor": "#ff5252", "type": "smoothedLine", "title": "TV", "useLineColorForBulletBorder": true, "valueField": "market2", "balloonText": "[[title]]
[[value]]" }, { "id": "g3", "valueAxis": "v2", "fillAlphas": 0.9, "bulletColor": "#11c15b", "lineThickness": 0, "lineColor": "#11c15b", "type": "smoothedLine", "title": "Mobile", "useLineColorForBulletBorder": true, "valueField": "sales1", "balloonText": "[[title]]
[[value]]" }], "chartCursor": { "pan": true, "valueLineEnabled": true, "valueLineBalloonEnabled": true, "cursorAlpha": 0, "valueLineAlpha": 0.2 }, "categoryField": "date", "categoryAxis": { "parseDates": true, "gridAlpha" : 0, "minorGridEnabled": true }, "legend": { "position":"top", }, "balloon": { "borderThickness": 1, "shadowAlpha": 0 }, "export": { "enabled": true }, "dataProvider": [{ "date": "2013-01-01", "market1": 0, "market2": 0, "sales1": 0 }, { "date": "2013-02-01", "market1": 0, "market2": 0, "sales1": 40 }, { "date": "2013-03-01", "market1": 0, "market2": 0, "sales1": 0 }, { "date": "2013-04-01", "market1": 30, "market2": 0, "sales1": 0 }, { "date": "2013-05-01", "market1": 0, "market2": 20, "sales1": 0 }, { "date": "2013-06-01", "market1": 25, "market2": 0, "sales1": 0 }, { "date": "2013-07-01", "market1": 0, "market2": 0, "sales1": 0 }, { "date": "2013-08-01", "market1": 0, "market2": 0, "sales1": 30 }, { "date": "2013-09-01", "market1": 0, "market2": 0, "sales1": 0 }, { "date": "2013-10-01", "market1": 0, "market2": 50, "sales1": 0 }, { "date": "2013-11-01", "market1": 0, "market2": 0, "sales1": 65 }, { "date": "2013-12-01", "market1": 0, "market2": 0, "sales1": 0 }] }); // pageview and prod sale end // sale order start var ctx = document.getElementById('sale-chart1').getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: salechart('#b71c1c', [25, 30, 15, 20, 25, 30, 15, 25, 35, 30, 20, 10, 12, 1], 'transparent'), options: salebuildoption(), }); function salechart(a, b, f) { if (f == null) { f = "rgba(0,0,0,0)"; } return { labels: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"], datasets: [{ label: "", borderColor: a, borderWidth: 2, hitRadius: 30, pointRadius: 3, pointHoverRadius: 4, pointBorderWidth: 5, pointHoverBorderWidth: 12, pointBackgroundColor: Chart.helpers.color("#000000").alpha(0).rgbString(), // pointBorderColor: Chart.helpers.color("#000000").alpha(0).rgbString(), pointBorderColor: a, pointHoverBackgroundColor: a, pointHoverBorderColor: Chart.helpers.color("#000000").alpha(.1).rgbString(), fill: true, lineTension: 0, backgroundColor: f, data: b, }] }; } function salebuildoption() { return { title: { display: !1 }, tooltips: { position: 'nearest', mode: 'index', intersect: false, yPadding: 10, xPadding: 10, }, legend: { display: !1, labels: { usePointStyle: !1 } }, responsive: !0, maintainAspectRatio: !0, hover: { mode: "index" }, scales: { xAxes: [{ display: !1, gridLines: !1, scaleLabel: { display: !0, labelString: "Month" } }], yAxes: [{ display: !1, gridLines: !1, scaleLabel: { display: !0, labelString: "Value" }, ticks: { beginAtZero: !0 } }] }, elements: { point: { radius: 4, borderWidth: 12 } }, layout: { padding: { left: 10, right: 10, top: 25, bottom: 25 } } }; } // sale order end });