/*-------------- Gradient helper ------------*/ function createGradientFill(ctx, color, alpha) { var gradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height); gradient.addColorStop(0, color.replace(')', ', ' + alpha + ')').replace('rgb', 'rgba')); gradient.addColorStop(1, color.replace(')', ', 0)').replace('rgb', 'rgba')); return gradient; } /* Mini chart shared options */ var miniChartOptions = { plugins: { legend: { display: false }, tooltip: { enabled: false } }, animation: { duration: 800, easing: 'easeOutQuart' }, elements: { point: { radius: 0, hoverRadius: 0 } }, scales: { y: { display: false, beginAtZero: false }, x: { display: false } }, responsive: true }; /*-------------- coin_sales1 (Bitcoin — blue) ------------*/ if (document.getElementById('coin_sales1')) { var ctx1 = document.getElementById('coin_sales1').getContext('2d'); var grad1 = ctx1.createLinearGradient(0, 0, 0, 100); grad1.addColorStop(0, 'rgba(59, 130, 246, 0.25)'); grad1.addColorStop(1, 'rgba(59, 130, 246, 0)'); new Chart(ctx1, { type: 'line', data: { labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], datasets: [{ label: 'Bitcoin', data: [18, 28, 41, 52, 86, 68, 49, 20, 35, 20, 50, 62, 49, 30, 45, 58, 25, 38, 55, 72, 64, 48, 52, 60], borderColor: '#3b82f6', backgroundColor: grad1, borderWidth: 2.5, fill: true, tension: 0.4 }] }, options: miniChartOptions }); } /*-------------- coin_sales2 (Bitcoin Dash — amber) ------------*/ if (document.getElementById('coin_sales2')) { var ctx2 = document.getElementById('coin_sales2').getContext('2d'); var grad2 = ctx2.createLinearGradient(0, 0, 0, 100); grad2.addColorStop(0, 'rgba(245, 158, 11, 0.25)'); grad2.addColorStop(1, 'rgba(245, 158, 11, 0)'); new Chart(ctx2, { type: 'line', data: { labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], datasets: [{ label: 'Bitcoin Dash', data: [18, 32, 41, 55, 86, 70, 49, 20, 65, 64, 50, 72, 49, 30, 45, 60, 25, 42, 58, 80, 68, 50, 55, 65], borderColor: '#f59e0b', backgroundColor: grad2, borderWidth: 2.5, fill: true, tension: 0.4 }] }, options: miniChartOptions }); } /*-------------- coin_sales3 (Ethereum — emerald) ------------*/ if (document.getElementById('coin_sales3')) { var ctx3 = document.getElementById('coin_sales3').getContext('2d'); var grad3 = ctx3.createLinearGradient(0, 0, 0, 100); grad3.addColorStop(0, 'rgba(16, 185, 129, 0.25)'); grad3.addColorStop(1, 'rgba(16, 185, 129, 0)'); new Chart(ctx3, { type: 'line', data: { labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], datasets: [{ label: 'Ethereum', data: [18, 30, 41, 50, 49, 35, 20, 65, 50, 86, 72, 58, 20, 30, 45, 52, 25, 40, 62, 78, 65, 45, 50, 58], borderColor: '#10b981', backgroundColor: grad3, borderWidth: 2.5, fill: true, tension: 0.4 }] }, options: miniChartOptions }); } /*-------------- Overview chart (Chart.js — replaces ZingChart) ------------*/ if (document.getElementById('overview-chart')) { var ctxOv = document.getElementById('overview-chart').getContext('2d'); var gradBlue = ctxOv.createLinearGradient(0, 0, 0, 400); gradBlue.addColorStop(0, 'rgba(59, 130, 246, 0.18)'); gradBlue.addColorStop(1, 'rgba(59, 130, 246, 0)'); var gradAmber = ctxOv.createLinearGradient(0, 0, 0, 400); gradAmber.addColorStop(0, 'rgba(245, 158, 11, 0.18)'); gradAmber.addColorStop(1, 'rgba(245, 158, 11, 0)'); new Chart(ctxOv, { type: 'line', data: { labels: ['0','5','10','15','20','25','30','35','40','45','50','55','60','65','70','75','80','85','90','95','100'], datasets: [{ label: 'Revenue', data: [40, 42, 45, 38, 30, 25, 20, 28, 30, 35, 45, 50, 55, 48, 40, 35, 30, 42, 55, 48, 38], borderColor: '#3b82f6', backgroundColor: gradBlue, borderWidth: 2.5, fill: true, tension: 0.4, pointRadius: 0, pointHoverRadius: 5, pointHoverBackgroundColor: '#3b82f6', pointHoverBorderColor: '#fff', pointHoverBorderWidth: 2 }, { label: 'Expenses', data: [20, 22, 25, 28, 30, 33, 35, 40, 45, 42, 40, 38, 40, 37, 35, 30, 25, 20, 17, 28, 40], borderColor: '#f59e0b', backgroundColor: gradAmber, borderWidth: 2.5, fill: true, tension: 0.4, pointRadius: 0, pointHoverRadius: 5, pointHoverBackgroundColor: '#f59e0b', pointHoverBorderColor: '#fff', pointHoverBorderWidth: 2 }] }, options: { responsive: true, maintainAspectRatio: false, interaction: { mode: 'index', intersect: false }, plugins: { legend: { display: true, position: 'top', align: 'end', labels: { usePointStyle: true, pointStyle: 'circle', padding: 20, font: { family: 'Poppins', size: 12 }, color: '#64748b' } }, tooltip: { backgroundColor: '#1e293b', titleFont: { family: 'Poppins', size: 13 }, bodyFont: { family: 'Poppins', size: 12 }, padding: 12, cornerRadius: 8, displayColors: true, usePointStyle: true } }, scales: { y: { border: { display: false }, grid: { color: '#f1f5f9' }, ticks: { font: { family: 'Poppins', size: 11 }, color: '#94a3b8', padding: 8 } }, x: { border: { display: false }, grid: { display: false }, ticks: { font: { family: 'Poppins', size: 11 }, color: '#94a3b8', maxTicksLimit: 11, padding: 8 } } } } }); } /*-------------- Market sparkline helper ------------*/ function createSparkline(canvasId, data, color) { var el = document.getElementById(canvasId); if (!el) return; var ctx = el.getContext('2d'); var grad = ctx.createLinearGradient(0, 0, 0, 50); grad.addColorStop(0, color.replace(')', ', 0.2)').replace('rgb', 'rgba')); grad.addColorStop(1, color.replace(')', ', 0)').replace('rgb', 'rgba')); new Chart(ctx, { type: 'line', data: { labels: data.map(function(_, i) { return i; }), datasets: [{ data: data, borderColor: color, backgroundColor: grad, borderWidth: 2, fill: true, tension: 0.4, pointRadius: 0, pointHoverRadius: 4, pointHoverBackgroundColor: color, pointHoverBorderColor: '#fff', pointHoverBorderWidth: 2 }] }, options: { responsive: true, plugins: { legend: { display: false }, tooltip: { backgroundColor: '#1e293b', bodyFont: { family: 'Poppins', size: 11 }, padding: 8, cornerRadius: 6, displayColors: false, callbacks: { label: function(t) { return t.parsed.y; } } } }, scales: { y: { display: false }, x: { display: false } } } }); } /*-------------- Market status sparklines ------------*/ createSparkline('mvaluechart', [5, 15, 30, 18, 10, 25, 8, 30, 22, 35, 20, 28, 15, 32], 'rgb(59, 130, 246)'); createSparkline('mvaluechart2', [8, 15, 30, 12, 10, 25, 5, 18, 35, 50, 40, 28, 32, 45], 'rgb(99, 102, 241)'); createSparkline('mvaluechart3', [10, 15, 40, 25, 10, 25, 8, 30, 20, 38, 28, 42, 35, 22], 'rgb(245, 158, 11)'); createSparkline('mvaluechart4', [12, 30, 30, 18, 10, 25, 5, 30, 22, 15, 28, 35, 20, 32], 'rgb(16, 185, 129)'); /*-------------- market status chart END ------------*/ /*-------------- visitor graph line chart start ------------*/ if (document.getElementById('visitor_graph')) { Highcharts.chart('visitor_graph', { chart: { type: 'areaspline' }, title: false, yAxis: { title: false, gridLineColor: '#fbf7f7', gridLineWidth: 1 }, xAxis: { gridLineColor: '#fbf7f7', gridLineWidth: 1 }, series: [{ name: 'USD', data: [400, 470, 520, 500, 420, 350, 320, 400, 550, 600, 500, 420, 400], fillColor: 'rgba(76, 57, 249, 0.5)', lineColor: 'transparent' }, { name: 'BTC', data: [450, 520, 550, 400, 450, 500, 400, 450, 500, 450, 400, 500, 450], fillColor: 'rgba(103, 13, 251, 0.5)', lineColor: 'transparent' } ] }); } /*-------------- END visitor graph line chart start ------------*/ /*-------------- 1 line chart amchart start ------------*/ if (document.getElementById('amlinechart1')) { var chart = AmCharts.makeChart("amlinechart1", { "type": "serial", "theme": "light", "marginRight": 20, "autoMarginOffset": 20, "dataDateFormat": "YYYY-MM-DD HH:NN", "dataProvider": [{ "date": "2012-01-01", "value": 8 }, { "date": "2012-01-02", "color": "#6e00ff", "value": 10 }, { "date": "2012-01-03", "value": 12 }, { "date": "2012-01-04", "value": 14 }, { "date": "2012-01-05", "value": 11 }, { "date": "2012-01-06", "value": 6 }, { "date": "2012-01-07", "value": 7 }, { "date": "2012-01-08", "value": 9 }, { "date": "2012-01-09", "value": 13 }, { "date": "2012-01-10", "value": 15 }, { "date": "2012-01-11", "color": "#6e00ff", "value": 19 }, { "date": "2012-01-12", "value": 21 }, { "date": "2012-01-13", "value": 22 }, { "date": "2012-01-14", "value": 20 }, { "date": "2012-01-15", "value": 18 }, { "date": "2012-01-16", "value": 14 }, { "date": "2012-01-17", "color": "#6e00ff", "value": 16 }, { "date": "2012-01-18", "value": 18 }, { "date": "2012-01-19", "value": 17 }, { "date": "2012-01-20", "value": 15 }, { "date": "2012-01-21", "value": 12 }, { "date": "2012-01-22", "color": "#6e00ff", "value": 10 }, { "date": "2012-01-23", "value": 8 }], "valueAxes": [{ "axisAlpha": 0, "guides": [{ "fillAlpha": 0.1, "fillColor": "#6e00ff", "lineAlpha": 0, "toValue": 16, "value": 10 }], "position": "left", "tickLength": 0 }], "graphs": [{ "balloonText": "[[category]]
value:[[value]]", "bullet": "round", "dashLength": 3, "colorField": "color", "valueField": "value" }], "trendLines": [{ "finalDate": "2012-01-11 12", "finalValue": 19, "initialDate": "2012-01-02 12", "initialValue": 10, "lineColor": "#6e00ff" }, { "finalDate": "2012-01-22 12", "finalValue": 10, "initialDate": "2012-01-17 12", "initialValue": 16, "lineColor": "#6e00ff" }], "chartScrollbar": { "scrollbarHeight": 2, "offset": -1, "backgroundAlpha": 0.2, "backgroundColor": "#8816FD", "selectedBackgroundColor": "#815FF5", "selectedBackgroundAlpha": 1 }, "chartCursor": { "fullWidth": true, "valueLineEabled": true, "valueLineBalloonEnabled": true, "valueLineAlpha": 0.5, "cursorAlpha": 0 }, "categoryField": "date", "categoryAxis": { "parseDates": true, "axisAlpha": 0, "gridAlpha": 0.1, "minorGridAlpha": 0.1, "minorGridEnabled": true }, "export": { "enabled": false } }); chart.addListener("dataUpdated", zoomChart); function zoomChart() { chart.zoomToDates(new Date(2012, 0, 2), new Date(2012, 0, 13)); } } /*-------------- 1 line chart amchart end ------------*/ /*-------------- 2 line chart amchart start ------------*/ if (document.getElementById('amlinechart2')) { var chart = AmCharts.makeChart("amlinechart2", { "type": "serial", "theme": "light", "marginTop": 0, "marginRight": 20, "dataProvider": [{ "year": "1950", "value": -0.307 }, { "year": "1951", "value": -0.168 }, { "year": "1952", "value": -0.073 }, { "year": "1953", "value": -0.027 }, { "year": "1954", "value": -0.251 }, { "year": "1955", "value": -0.281 }, { "year": "1956", "value": -0.348 }, { "year": "1957", "value": -0.074 }, { "year": "1958", "value": -0.011 }, { "year": "1959", "value": -0.074 }, { "year": "1960", "value": -0.124 }, { "year": "1961", "value": -0.024 }, { "year": "1962", "value": -0.022 }, { "year": "1963", "value": 0 }, { "year": "1964", "value": -0.296 }, { "year": "1965", "value": -0.217 }, { "year": "1966", "value": -0.147 }, { "year": "1967", "value": -0.15 }, { "year": "1968", "value": -0.16 }, { "year": "1969", "value": -0.011 }, { "year": "1970", "value": -0.068 }, { "year": "1971", "value": -0.19 }, { "year": "1972", "value": -0.056 }, { "year": "1973", "value": 0.077 }, { "year": "1974", "value": -0.213 }, { "year": "1975", "value": -0.17 }, { "year": "1976", "value": -0.254 }, { "year": "1977", "value": 0.019 }, { "year": "1978", "value": -0.063 }, { "year": "1979", "value": 0.05 }, { "year": "1980", "value": 0.077 }, { "year": "1981", "value": 0.12 }, { "year": "1982", "value": 0.011 }, { "year": "1983", "value": 0.177 }, { "year": "1984", "value": -0.021 }, { "year": "1985", "value": -0.037 }, { "year": "1986", "value": 0.03 }, { "year": "1987", "value": 0.179 }, { "year": "1988", "value": 0.18 }, { "year": "1989", "value": 0.104 }, { "year": "1990", "value": 0.255 }, { "year": "1991", "value": 0.21 }, { "year": "1992", "value": 0.065 }, { "year": "1993", "value": 0.11 }, { "year": "1994", "value": 0.172 }, { "year": "1995", "value": 0.269 }, { "year": "1996", "value": 0.141 }, { "year": "1997", "value": 0.353 }, { "year": "1998", "value": 0.548 }, { "year": "1999", "value": 0.298 }, { "year": "2000", "value": 0.267 }, { "year": "2001", "value": 0.411 }, { "year": "2002", "value": 0.462 }, { "year": "2003", "value": 0.47 }, { "year": "2004", "value": 0.445 }, { "year": "2005", "value": 0.47 }], "valueAxes": [{ "axisAlpha": 0, "position": "left" }], "graphs": [{ "id": "g1", "balloonText": "[[category]]
[[value]]", "bullet": "round", "bulletSize": 8, "lineColor": "#9656e7", "lineThickness": 2, "negativeLineColor": "#c69cfd", "type": "smoothedLine", "valueField": "value" }], "chartScrollbar": { "graph": "g1", "gridAlpha": 0, "color": "#8816FD", "scrollbarHeight": 55, "backgroundAlpha": 0, "selectedBackgroundAlpha": 0.1, "selectedBackgroundColor": "#8816FD", "graphFillAlpha": 0, "autoGridCount": true, "selectedGraphFillAlpha": 0, "graphLineAlpha": 0.2, "graphLineColor": "#c2c2c2", "selectedGraphLineColor": "#9f46fc", "selectedGraphLineAlpha": 1 }, "chartCursor": { "categoryBalloonDateFormat": "YYYY", "cursorAlpha": 0, "valueLineEnabled": true, "valueLineBalloonEnabled": true, "valueLineAlpha": 0.5, "fullWidth": true }, "dataDateFormat": "YYYY", "categoryField": "year", "categoryAxis": { "minPeriod": "YYYY", "parseDates": true, "minorGridAlpha": 0.1, "minorGridEnabled": true }, "export": { "enabled": false } }); chart.addListener("rendered", zoomChart); if (chart.zoomChart) { chart.zoomChart(); } function zoomChart() { chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55)); } } /*-------------- 2 line chart amchart end ------------*/ /*-------------- 3 line chart amchart start ------------*/ if (document.getElementById('amlinechart3')) { var chartData = generateChartData(); var chart = AmCharts.makeChart("amlinechart3", { "type": "serial", "theme": "light", "marginRight": 20, "autoMarginOffset": 20, "marginTop": 7, "dataProvider": chartData, "valueAxes": [{ "axisAlpha": 0.2, "dashLength": 1, "position": "left" }], "mouseWheelZoomEnabled": true, "graphs": [{ "id": "g1", "balloonText": "[[value]]", "bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "hideBulletsCount": 50, "title": "red line", "valueField": "visits", "useLineColorForBulletBorder": true, "balloon": { "drop": true } }], "chartScrollbar": { "autoGridCount": true, "graph": "g1", "scrollbarHeight": 40, "color": "#fff", "selectedBackgroundAlpha": 1, "selectedBackgroundColor": "#815BF6", "selectedGraphFillAlpha": 0, "selectedGraphFillColor": "#8918FE", "graphLineAlpha": 0.2, "graphLineColor": "#c2c2c2", "selectedGraphLineColor": "#fff", "selectedGraphLineAlpha": 1 }, "chartCursor": { "limitToGraph": "g1" }, "categoryField": "date", "categoryAxis": { "parseDates": true, "axisColor": "#DADADA", "dashLength": 1, "minorGridEnabled": true }, "export": { "enabled": false } }); chart.addListener("rendered", zoomChart); zoomChart(); // this method is called when chart is first inited as we listen for "rendered" event function zoomChart() { // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues chart.zoomToIndexes(chartData.length - 40, chartData.length - 1); } // generate some random data, quite different range // generate some random data, quite different range function generateChartData() { var chartData = []; var firstDate = new Date(); firstDate.setDate(firstDate.getDate() - 5); var visits = 1200; for (var i = 0; i < 1000; i++) { // we create date objects here. In your data, you can have date strings // and then set format of your dates using chart.dataDateFormat property, // however when possible, use date objects, as this will speed up chart rendering. var newDate = new Date(firstDate); newDate.setDate(newDate.getDate() + i); visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10); chartData.push({ date: newDate, visits: visits }); } return chartData; } } /*-------------- 3 line chart amchart end ------------*/ /*-------------- 4 line chart amchart start ------------*/ if (document.getElementById('amlinechart4')) { var chart = AmCharts.makeChart("amlinechart4", { "type": "serial", "theme": "light", "legend": { "useGraphSettings": true }, "dataProvider": [{ "year": 1930, "italy": 1, "germany": 5, "uk": 3 }, { "year": 1934, "italy": 1, "germany": 2, "uk": 6 }, { "year": 1938, "italy": 2, "germany": 3, "uk": 1 }, { "year": 1950, "italy": 3, "germany": 4, "uk": 1 }, { "year": 1954, "italy": 5, "germany": 1, "uk": 2 }, { "year": 1958, "italy": 3, "germany": 2, "uk": 1 }, { "year": 1962, "italy": 1, "germany": 2, "uk": 3 }, { "year": 1966, "italy": 2, "germany": 1, "uk": 5 }, { "year": 1970, "italy": 3, "germany": 5, "uk": 2 }, { "year": 1974, "italy": 4, "germany": 3, "uk": 6 }, { "year": 1978, "italy": 1, "germany": 2, "uk": 4 }], "startDuration": 0.5, "graphs": [{ "balloonText": "place taken by Italy in [[category]]: [[value]]", "bullet": "round", "hidden": true, "title": "Italy", "valueField": "italy", "fillAlphas": 0, "lineColor": "#31ef98", "lineThickness": 2, "negativeLineColor": "#17e285", }, { "balloonText": "place taken by Germany in [[category]]: [[value]]", "bullet": "round", "title": "Germany", "valueField": "germany", "fillAlphas": 0, "lineColor": "#9656e7", "lineThickness": 2, "negativeLineColor": "#c69cfd" }, { "balloonText": "place taken by UK in [[category]]: [[value]]", "bullet": "round", "title": "United Kingdom", "valueField": "uk", "fillAlphas": 0, "lineColor": "#31aeef", "lineThickness": 2, "negativeLineColor": "#31aeef", }], "chartCursor": { "cursorAlpha": 0, "zoomable": false }, "categoryField": "year", "categoryAxis": { "gridPosition": "start", "axisAlpha": 0, "fillAlpha": 0.05, "fillColor": "#000000", "gridAlpha": 0, "position": "top" }, "export": { "enabled": false } }); } /*-------------- 4 line chart amchart end ------------*/ /*-------------- 5 line chart amchart start ------------*/ if (document.getElementById('amlinechart5')) { var chart = AmCharts.makeChart("amlinechart5", { "type": "serial", "theme": "light", "marginRight": 20, "marginTop": 17, "autoMarginOffset": 20, "dataProvider": [{ "date": "2012-03-01", "price": 20 }, { "date": "2012-03-02", "price": 75 }, { "date": "2012-03-03", "price": 15 }, { "date": "2012-03-04", "price": 75 }, { "date": "2012-03-05", "price": 158 }, { "date": "2012-03-06", "price": 57 }, { "date": "2012-03-07", "price": 107 }, { "date": "2012-03-08", "price": 89 }, { "date": "2012-03-09", "price": 75 }, { "date": "2012-03-10", "price": 132 }, { "date": "2012-03-11", "price": 158 }, { "date": "2012-03-12", "price": 56 }, { "date": "2012-03-13", "price": 169 }, { "date": "2012-03-14", "price": 24 }, { "date": "2012-03-15", "price": 147 }], "valueAxes": [{ "logarithmic": true, "dashLength": 1, "guides": [{ "dashLength": 6, "inside": true, "label": "average", "lineAlpha": 1, "value": 90.4 }], "position": "left" }], "graphs": [{ "bullet": "round", "id": "g1", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 7, "lineThickness": 2, "title": "Price", "type": "smoothedLine", "useLineColorForBulletBorder": true, "valueField": "price" }], "chartScrollbar": {}, "chartCursor": { "valueLineEnabled": true, "valueLineBalloonEnabled": true, "valueLineAlpha": 0.5, "fullWidth": true, "cursorAlpha": 0.05 }, "dataDateFormat": "YYYY-MM-DD", "categoryField": "date", "categoryAxis": { "parseDates": true }, "export": { "enabled": false } }); chart.addListener("dataUpdated", zoomChart); function zoomChart() { chart.zoomToDates(new Date(2012, 2, 2), new Date(2012, 2, 10)); } } /*-------------- 5 line chart amchart end ------------*/ /*-------------- 6 line chart chartjs start ------------*/ if (document.getElementById('seolinechart1')) { var ctx = document.getElementById("seolinechart1").getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May"], datasets: [{ label: "Likes", backgroundColor: "rgba(104, 124, 247, 0.6)", borderColor: '#8596fe', data: [18, 41, 86, 49, 20, 35, 20, 50, 49, 30, 45, 25], }] }, // Configuration options go here options: { plugins: { legend: { display: false } }, animation: { easing: "easeInOutBack" }, scales: { y: { display: !1, ticks: { color: "rgba(0,0,0,0.5)", font: { weight: "bold" }, beginAtZero: !0, maxTicksLimit: 5, padding: 0 }, grid: { drawTicks: !1, display: !1 } }, x: { display: !1, grid: { color: "transparent" }, ticks: { padding: 0, color: "rgba(0,0,0,0.5)", font: { weight: "bold" } } } }, elements: { line: { tension: 0, // disables bezier curves } } } }); } /*-------------- 6 line chart chartjs end ------------*/ /*-------------- 7 line chart chartjs start ------------*/ if (document.getElementById('seolinechart2')) { var ctx = document.getElementById("seolinechart2").getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May"], datasets: [{ label: "Share", backgroundColor: "rgba(96, 241, 205, 0.2)", borderColor: '#3de5bb', data: [18, 41, 86, 49, 20, 35, 20, 50, 49, 30, 45, 25], }] }, // Configuration options go here options: { plugins: { legend: { display: false } }, animation: { easing: "easeInOutBack" }, scales: { y: { display: !1, ticks: { color: "rgba(0,0,0,0.5)", font: { weight: "bold" }, beginAtZero: !0, maxTicksLimit: 5, padding: 0 }, grid: { drawTicks: !1, display: !1 } }, x: { display: !1, grid: { color: "transparent" }, ticks: { padding: 0, color: "rgba(0,0,0,0.5)", font: { weight: "bold" } } } }, elements: { line: { tension: 0, // disables bezier curves } } } }); } /*-------------- 7 line chart chartjs end ------------*/ /*-------------- 8 line chart chartjs start ------------*/ if (document.getElementById('seolinechart3')) { var ctx = document.getElementById("seolinechart3").getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May"], datasets: [{ label: "Share", backgroundColor: "rgba(96, 241, 205, 0)", borderColor: '#fff', data: [18, 41, 86, 49, 20, 35, 20, 50, 49, 30, 45, 25], }] }, // Configuration options go here options: { plugins: { legend: { display: false } }, animation: { easing: "easeInOutBack" }, scales: { y: { display: !1, ticks: { color: "rgba(0,0,0,0.5)", font: { weight: "bold" }, beginAtZero: !0, maxTicksLimit: 5, padding: 0 }, grid: { drawTicks: !1, display: !1 } }, x: { display: !1, grid: { color: "transparent" }, ticks: { padding: 0, color: "rgba(0,0,0,0.5)", font: { weight: "bold" } } } }, elements: { line: { tension: 0, // disables bezier curves } } } }); } /*-------------- 8 line chart chartjs end ------------*/ /*-------------- 9 line chart chartjs start ------------*/ if (document.getElementById('seolinechart4')) { var ctx = document.getElementById("seolinechart4").getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May"], datasets: [{ label: "New user", backgroundColor: "rgba(96, 241, 205, 0)", borderColor: '#fff', data: [18, 41, 86, 49, 20, 35, 20, 50, 49, 30, 45, 25], }] }, // Configuration options go here options: { plugins: { legend: { display: false } }, animation: { easing: "easeInOutBack" }, scales: { y: { display: !1, ticks: { color: "rgba(0,0,0,0.5)", font: { weight: "bold" }, beginAtZero: !0, maxTicksLimit: 5, padding: 0 }, grid: { drawTicks: !1, display: !1 } }, x: { display: !1, grid: { color: "transparent" }, ticks: { padding: 0, color: "rgba(0,0,0,0.5)", font: { weight: "bold" } } } }, elements: { line: { tension: 0, // disables bezier curves } } } }); } /*-------------- 9 line chart chartjs end ------------*/ /*-------------- 10 line chart amchart start ------------*/ if (document.getElementById('user-statistics')) { var chart = AmCharts.makeChart("user-statistics", { "type": "serial", "theme": "light", "marginRight": 0, "marginLeft": 40, "autoMarginOffset": 20, "dataDateFormat": "YYYY-MM-DD", "valueAxes": [{ "id": "v1", "axisAlpha": 0, "position": "left", "ignoreAxisWidth": true }], "balloon": { "borderThickness": 1, "shadowAlpha": 0 }, "graphs": [{ "id": "g1", "balloon": { "drop": true, "adjustBorderColor": false, "color": "#ffffff", "type": "smoothedLine" }, "fillAlphas": 0.2, "bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 5, "hideBulletsCount": 50, "lineThickness": 2, "title": "red line", "useLineColorForBulletBorder": true, "valueField": "value", "balloonText": "[[value]]" }], "chartCursor": { "valueLineEnabled": true, "valueLineBalloonEnabled": true, "cursorAlpha": 0, "zoomable": false, "valueZoomable": true, "valueLineAlpha": 0.5 }, "valueScrollbar": { "autoGridCount": true, "color": "#5E72F3", "scrollbarHeight": 30 }, "categoryField": "date", "categoryAxis": { "parseDates": true, "dashLength": 1, "minorGridEnabled": true }, "export": { "enabled": false }, "dataProvider": [{ "date": "2012-07-27", "value": 13 }, { "date": "2012-07-28", "value": 11 }, { "date": "2012-07-29", "value": 15 }, { "date": "2012-07-30", "value": 16 }, { "date": "2012-07-31", "value": 18 }, { "date": "2012-08-01", "value": 13 }, { "date": "2012-08-02", "value": 22 }, { "date": "2012-08-03", "value": 23 }, { "date": "2012-08-04", "value": 20 }, { "date": "2012-08-05", "value": 17 }, { "date": "2012-08-06", "value": 16 }, { "date": "2012-08-07", "value": 18 }, { "date": "2012-08-08", "value": 21 }, { "date": "2012-08-09", "value": 26 }, { "date": "2012-08-10", "value": 24 }, { "date": "2012-08-11", "value": 29 }, { "date": "2012-08-12", "value": 32 }, { "date": "2012-08-13", "value": 18 }, { "date": "2012-08-14", "value": 24 }, { "date": "2012-08-15", "value": 22 }, { "date": "2012-08-16", "value": 18 }, { "date": "2012-08-17", "value": 19 }, { "date": "2012-08-18", "value": 14 }, { "date": "2012-08-19", "value": 15 }, { "date": "2012-08-20", "value": 12 }, { "date": "2012-08-21", "value": 8 }, { "date": "2012-08-22", "value": 9 }, { "date": "2012-08-23", "value": 8 }, { "date": "2012-08-24", "value": 7 }, { "date": "2012-08-25", "value": 5 }, { "date": "2012-08-26", "value": 11 }, { "date": "2012-08-27", "value": 13 }, { "date": "2012-08-28", "value": 18 }, { "date": "2012-08-29", "value": 20 }, { "date": "2012-08-30", "value": 29 }, { "date": "2012-08-31", "value": 33 }, { "date": "2012-09-01", "value": 42 }, { "date": "2012-09-02", "value": 35 }, { "date": "2012-09-03", "value": 31 }, { "date": "2012-09-04", "value": 47 }, { "date": "2012-09-05", "value": 52 }, { "date": "2012-09-06", "value": 46 }, { "date": "2012-09-07", "value": 41 }, { "date": "2012-09-08", "value": 43 }, { "date": "2012-09-09", "value": 40 }, { "date": "2012-09-10", "value": 39 }, { "date": "2012-09-11", "value": 34 }, { "date": "2012-09-12", "value": 29 }, { "date": "2012-09-13", "value": 34 }, { "date": "2012-09-14", "value": 37 }, { "date": "2012-09-15", "value": 42 }, { "date": "2012-09-16", "value": 49 }, { "date": "2012-09-17", "value": 46 }, { "date": "2012-09-18", "value": 47 }, { "date": "2012-09-19", "value": 55 }, { "date": "2012-09-20", "value": 59 }, { "date": "2012-09-21", "value": 58 }, { "date": "2012-09-22", "value": 57 }, { "date": "2012-09-23", "value": 61 }, { "date": "2012-09-24", "value": 59 }, { "date": "2012-09-25", "value": 67 }, { "date": "2012-09-26", "value": 65 }, { "date": "2012-09-27", "value": 61 }, { "date": "2012-09-28", "value": 66 }, { "date": "2012-09-29", "value": 69 }, { "date": "2012-09-30", "value": 71 }, { "date": "2012-10-01", "value": 67 }, { "date": "2012-10-02", "value": 63 }, { "date": "2012-10-03", "value": 46 }, { "date": "2012-10-04", "value": 32 }, { "date": "2012-10-05", "value": 21 }, { "date": "2012-10-06", "value": 18 }, { "date": "2012-10-07", "value": 21 }, { "date": "2012-10-08", "value": 28 }, { "date": "2012-10-09", "value": 27 }, { "date": "2012-10-10", "value": 36 }, { "date": "2012-10-11", "value": 33 }, { "date": "2012-10-12", "value": 31 }, { "date": "2012-10-13", "value": 30 }, { "date": "2012-10-14", "value": 34 }, { "date": "2012-10-15", "value": 38 }, { "date": "2012-10-16", "value": 37 }, { "date": "2012-10-17", "value": 44 }, { "date": "2012-10-18", "value": 49 }, { "date": "2012-10-19", "value": 53 }, { "date": "2012-10-20", "value": 57 }, { "date": "2012-10-21", "value": 60 }, { "date": "2012-10-22", "value": 61 }, { "date": "2012-10-23", "value": 69 }, { "date": "2012-10-24", "value": 67 }, { "date": "2012-10-25", "value": 72 }, { "date": "2012-10-26", "value": 77 }, { "date": "2012-10-27", "value": 75 }, { "date": "2012-10-28", "value": 70 }, { "date": "2012-10-29", "value": 72 }, { "date": "2012-10-30", "value": 70 }, { "date": "2012-10-31", "value": 72 }, { "date": "2012-11-01", "value": 73 }, { "date": "2012-11-02", "value": 67 }, { "date": "2012-11-03", "value": 68 }, { "date": "2012-11-04", "value": 65 }, { "date": "2012-11-05", "value": 71 }, { "date": "2012-11-06", "value": 75 }, { "date": "2012-11-07", "value": 74 }, { "date": "2012-11-08", "value": 71 }, { "date": "2012-11-09", "value": 76 }, { "date": "2012-11-10", "value": 77 }, { "date": "2012-11-11", "value": 81 }, { "date": "2012-11-12", "value": 83 }, { "date": "2012-11-13", "value": 80 }, { "date": "2012-11-14", "value": 81 }, { "date": "2012-11-15", "value": 87 }, { "date": "2012-11-16", "value": 82 }, { "date": "2012-11-17", "value": 86 }, { "date": "2012-11-18", "value": 80 }, { "date": "2012-11-19", "value": 87 }, { "date": "2012-11-20", "value": 83 }, { "date": "2012-11-21", "value": 85 }, { "date": "2012-11-22", "value": 84 }, { "date": "2012-11-23", "value": 82 }, { "date": "2012-11-24", "value": 73 }, { "date": "2012-11-25", "value": 71 }, { "date": "2012-11-26", "value": 75 }, { "date": "2012-11-27", "value": 79 }, { "date": "2012-11-28", "value": 70 }, { "date": "2012-11-29", "value": 73 }, { "date": "2012-11-30", "value": 61 }, { "date": "2012-12-01", "value": 62 }, { "date": "2012-12-02", "value": 66 }, { "date": "2012-12-03", "value": 65 }, { "date": "2012-12-04", "value": 73 }, { "date": "2012-12-05", "value": 79 }, { "date": "2012-12-06", "value": 78 }, { "date": "2012-12-07", "value": 78 }, { "date": "2012-12-08", "value": 78 }, { "date": "2012-12-09", "value": 74 }, { "date": "2012-12-10", "value": 73 }, { "date": "2012-12-11", "value": 75 }, { "date": "2012-12-12", "value": 70 }, { "date": "2012-12-13", "value": 77 }, { "date": "2012-12-14", "value": 67 }, { "date": "2012-12-15", "value": 62 }, { "date": "2012-12-16", "value": 64 }, { "date": "2012-12-17", "value": 61 }, { "date": "2012-12-18", "value": 59 }, { "date": "2012-12-19", "value": 53 }, { "date": "2012-12-20", "value": 54 }, { "date": "2012-12-21", "value": 56 }, { "date": "2012-12-22", "value": 59 }, { "date": "2012-12-23", "value": 58 }, { "date": "2012-12-24", "value": 55 }, { "date": "2012-12-25", "value": 52 }, { "date": "2012-12-26", "value": 54 }, { "date": "2012-12-27", "value": 50 }, { "date": "2012-12-28", "value": 50 }, { "date": "2012-12-29", "value": 51 }, { "date": "2012-12-30", "value": 52 }, { "date": "2012-12-31", "value": 58 }, { "date": "2013-01-01", "value": 60 }, { "date": "2013-01-02", "value": 67 }, { "date": "2013-01-03", "value": 64 }, { "date": "2013-01-04", "value": 66 }, { "date": "2013-01-05", "value": 60 }, { "date": "2013-01-06", "value": 63 }, { "date": "2013-01-07", "value": 61 }, { "date": "2013-01-08", "value": 60 }, { "date": "2013-01-09", "value": 65 }, { "date": "2013-01-10", "value": 75 }, { "date": "2013-01-11", "value": 77 }, { "date": "2013-01-12", "value": 78 }, { "date": "2013-01-13", "value": 70 }, { "date": "2013-01-14", "value": 70 }, { "date": "2013-01-15", "value": 73 }, { "date": "2013-01-16", "value": 71 }, { "date": "2013-01-17", "value": 74 }, { "date": "2013-01-18", "value": 78 }, { "date": "2013-01-19", "value": 85 }, { "date": "2013-01-20", "value": 82 }, { "date": "2013-01-21", "value": 83 }, { "date": "2013-01-22", "value": 88 }, { "date": "2013-01-23", "value": 85 }, { "date": "2013-01-24", "value": 85 }, { "date": "2013-01-25", "value": 80 }, { "date": "2013-01-26", "value": 87 }, { "date": "2013-01-27", "value": 84 }, { "date": "2013-01-28", "value": 83 }, { "date": "2013-01-29", "value": 84 }, { "date": "2013-01-30", "value": 81 }] }); } /*-------------- 10 line chart amchart end ------------*/ /*-------------- 11 line chart amchart start ------------*/ if (document.getElementById('salesanalytic')) { var chart = AmCharts.makeChart("salesanalytic", { "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", "title": "Duration", "gridAlpha": 0, "position": "right", "autoGridCount": false }], "graphs": [{ "id": "g3", "valueAxis": "v1", "lineColor": "#F3F8FB", "fillColors": "#F3F8FB", "fillAlphas": 1, "type": "column", "title": "Actual Sales", "valueField": "sales2", "clustered": false, "columnWidth": 0.5, "legendValueText": "$[[value]]M", "balloonText": "[[title]]
$[[value]]M" }, { "id": "g4", "valueAxis": "v1", "lineColor": "#5C6DF4", "fillColors": "#5C6DF4", "fillAlphas": 1, "type": "column", "title": "Target Sales", "valueField": "sales1", "clustered": false, "columnWidth": 0.3, "legendValueText": "$[[value]]M", "balloonText": "[[title]]
$[[value]]M" }, { "id": "g1", "valueAxis": "v2", "bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 5, "hideBulletsCount": 50, "lineThickness": 2, "lineColor": "#815FF6", "type": "smoothedLine", "title": "Duration", "useLineColorForBulletBorder": true, "valueField": "market1", "balloonText": "[[title]]
[[value]]" }, { "id": "g2", "valueAxis": "v2", "bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 5, "hideBulletsCount": 50, "lineThickness": 2, "lineColor": "#ffe598", "type": "smoothedLine", "dashLength": 5, "title": "Market Days ALL", "useLineColorForBulletBorder": true, "valueField": "market2", "balloonText": "[[title]]
[[value]]" }], "chartScrollbar": { "graph": "g1", "oppositeAxis": false, "offset": 50, "scrollbarHeight": 45, "backgroundAlpha": 0, "selectedBackgroundAlpha": 0.5, "selectedBackgroundColor": "#f9f9f9", "graphFillAlpha": 0.1, "graphLineAlpha": 0.4, "selectedGraphFillAlpha": 0, "selectedGraphLineAlpha": 1, "autoGridCount": true, "color": "#95a1f9" }, "chartCursor": { "pan": true, "valueLineEnabled": true, "valueLineBalloonEnabled": true, "cursorAlpha": 0, "valueLineAlpha": 0.2 }, "categoryField": "date", "categoryAxis": { "parseDates": true, "dashLength": 1, "minorGridEnabled": true, "color": "#5C6DF4" }, "legend": { "useGraphSettings": true, "position": "top" }, "balloon": { "borderThickness": 1, "shadowAlpha": 0 }, "export": { "enabled": false }, "dataProvider": [{ "date": "2013-01-16", "market1": 51, "market2": 55, "sales1": 5, "sales2": 8 }, { "date": "2013-01-17", "market1": 64, "market2": 70, "sales1": 5, "sales2": 6 }, { "date": "2013-01-18", "market1": 65, "market2": 45, "sales1": 8, "sales2": 12 }, { "date": "2013-01-19", "market1": 73, "market2": 75, "sales1": 7, "sales2": 8 }, { "date": "2013-01-20", "market1": 65, "market2": 70, "sales1": 7, "sales2": 10 }, { "date": "2013-01-21", "market1": 65, "market2": 55, "sales1": 9, "sales2": 12 }, { "date": "2013-01-22", "market1": 68, "market2": 62, "sales1": 5, "sales2": 7 }, { "date": "2013-01-23", "market1": 75, "market2": 80, "sales1": 7, "sales2": 10 }, { "date": "2013-01-24", "market1": 75, "market2": 65, "sales1": 7, "sales2": 9 }, { "date": "2013-01-25", "market1": 75, "market2": 69, "sales1": 8, "sales2": 10 }, { "date": "2013-01-26", "market1": 55, "market2": 68, "sales1": 6, "sales2": 7 }, { "date": "2013-01-27", "market1": 67, "market2": 70, "sales1": 3, "sales2": 4 }, { "date": "2013-01-28", "market1": 62, "market2": 59, "sales1": 5, "sales2": 7 }, { "date": "2013-01-29", "market1": 62, "market2": 56, "sales1": 5, "sales2": 8 }, { "date": "2013-01-30", "market1": 71, "market2": 69, "sales1": 4, "sales2": 7 }] }); } //------------echarts2 /*-------------- 11 line chart amchart end ------------*/