/*-------------- 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 ------------*/