You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
453 lines
13 KiB
453 lines
13 KiB
'use strict';
|
|
$(document).ready(function() {
|
|
var ctx = document.getElementById('update-chart-1').getContext("2d");
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: valincome('#fff', [25, 30, 20, 15, 20], '#fff'),
|
|
options: valincomebuildoption(),
|
|
});
|
|
var ctx = document.getElementById('update-chart-2').getContext("2d");
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: valincome('#fff', [10, 30, 20, 15, 30], '#fff'),
|
|
options: valincomebuildoption(),
|
|
});
|
|
var ctx = document.getElementById('update-chart-3').getContext("2d");
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: valincome('#fff', [25, 10, 20, 15, 20], '#fff'),
|
|
options: valincomebuildoption(),
|
|
});
|
|
var ctx = document.getElementById('update-chart-4').getContext("2d");
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: valincome('#fff', [25, 30, 20, 15, 10], '#fff'),
|
|
options: valincomebuildoption(),
|
|
});
|
|
|
|
function valincome(a, b, f) {
|
|
if (f == null) {
|
|
f = "rgba(0,0,0,0)";
|
|
}
|
|
return {
|
|
labels: ["1", "2", "3", "4", "5"],
|
|
datasets: [{
|
|
label: "",
|
|
borderColor: a,
|
|
borderWidth: 0,
|
|
hitRadius: 30,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 4,
|
|
pointBorderWidth: 2,
|
|
pointHoverBorderWidth: 12,
|
|
pointBackgroundColor: Chart.helpers.color("#000000").alpha(0).rgbString(),
|
|
pointBorderColor: a,
|
|
pointHoverBackgroundColor: a,
|
|
pointHoverBorderColor: Chart.helpers.color("#000000").alpha(.1).rgbString(),
|
|
fill: true,
|
|
backgroundColor: Chart.helpers.color(f).alpha(1).rgbString(),
|
|
data: b,
|
|
}]
|
|
};
|
|
}
|
|
|
|
function valincomebuildoption() {
|
|
return {
|
|
maintainAspectRatio: false,
|
|
title: {
|
|
display: false,
|
|
},
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
hover: {
|
|
mode: 'index'
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
gridLines: false,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Month'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: false,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
},
|
|
ticks: {
|
|
min: 1,
|
|
}
|
|
}]
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 4,
|
|
borderWidth: 12
|
|
}
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 10,
|
|
right: 0,
|
|
top: 15,
|
|
bottom: 0
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
$(function() {
|
|
var amchart = AmCharts.makeChart("sales-analytics", {
|
|
"type": "serial",
|
|
"theme": "light",
|
|
"marginTop": 0,
|
|
"marginRight": 0,
|
|
"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,
|
|
"gridAlpha": 0,
|
|
"position": "left"
|
|
}],
|
|
"graphs": [{
|
|
"id": "g1",
|
|
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
|
|
"bullet": "round",
|
|
"bulletSize": 8,
|
|
"lineColor": "#fe5d70",
|
|
"lineThickness": 2,
|
|
"negativeLineColor": "#fe9365",
|
|
"type": "smoothedLine",
|
|
"valueField": "value"
|
|
}],
|
|
"chartScrollbar": {
|
|
"graph": "g1",
|
|
"gridAlpha": 0,
|
|
"color": "#888888",
|
|
"scrollbarHeight": 55,
|
|
"backgroundAlpha": 0,
|
|
"selectedBackgroundAlpha": 0.1,
|
|
"selectedBackgroundColor": "#888888",
|
|
"graphFillAlpha": 0,
|
|
"autoGridCount": true,
|
|
"selectedGraphFillAlpha": 0,
|
|
"graphLineAlpha": 0.2,
|
|
"graphLineColor": "#c2c2c2",
|
|
"selectedGraphLineColor": "#888888",
|
|
"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,
|
|
"gridAlpha": 0,
|
|
"minorGridAlpha": 0,
|
|
"minorGridEnabled": true
|
|
},
|
|
"export": {
|
|
"enabled": true
|
|
}
|
|
});
|
|
amchart.addListener("rendered", zoomChart);
|
|
if (amchart.zoomChart) {
|
|
amchart.zoomChart();
|
|
}
|
|
|
|
function zoomChart() {
|
|
amchart.zoomToIndexes(Math.round(amchart.dataProvider.length * 0.4), Math.round(amchart.dataProvider.length * 0.55));
|
|
}
|
|
});
|
|
|
|
var ctx = document.getElementById('app-sale1').getContext("2d");
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: amuntchart('#11c15b', [1, 15, 30, 15, 25, 35, 45, 20, 25, 30], 'transparent'),
|
|
options: buildchartoption(),
|
|
});
|
|
var ctx = document.getElementById('app-sale2').getContext("2d");
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: amuntchart('#448aff', [45, 30, 25, 35, 20, 35, 45, 20, 25, 1], 'transparent'),
|
|
options: buildchartoption(),
|
|
});
|
|
var ctx = document.getElementById('app-sale3').getContext("2d");
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: amuntchart('#ff5252', [1, 45, 24, 40, 20, 35, 10, 20, 45, 30], 'transparent'),
|
|
options: buildchartoption(),
|
|
});
|
|
var ctx = document.getElementById('app-sale4').getContext("2d");
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: amuntchart('#536dfe', [1, 15, 45, 15, 25, 35, 45, 20, 25, 30], 'transparent'),
|
|
options: buildchartoption(),
|
|
});
|
|
|
|
function amuntchart(a, b, f) {
|
|
if (f == null) {
|
|
f = "rgba(0,0,0,0)";
|
|
}
|
|
return {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
|
|
datasets: [{
|
|
label: "",
|
|
borderColor: a,
|
|
borderWidth: 2,
|
|
hitRadius: 30,
|
|
pointHoverRadius: 4,
|
|
pointBorderWidth: 50,
|
|
pointHoverBorderWidth: 12,
|
|
pointBackgroundColor: Chart.helpers.color("#000000").alpha(0).rgbString(),
|
|
pointBorderColor: Chart.helpers.color("#000000").alpha(0).rgbString(),
|
|
pointHoverBackgroundColor: a,
|
|
pointHoverBorderColor: Chart.helpers.color("#000000").alpha(.1).rgbString(),
|
|
fill: true,
|
|
backgroundColor: f,
|
|
data: b,
|
|
}]
|
|
};
|
|
}
|
|
|
|
function buildchartoption() {
|
|
return {
|
|
maintainAspectRatio: false,
|
|
title: {
|
|
display: !1
|
|
},
|
|
tooltips: {
|
|
enabled: false,
|
|
},
|
|
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: 0,
|
|
right: 0,
|
|
top: 5,
|
|
bottom: 0
|
|
}
|
|
}
|
|
};
|
|
}
|
|
});
|