|
|
'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 } } }; }});
|
