|
|
'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, 30, 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, 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, 10, 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, 20, 15], '#fff'), options: valincomebuildoption(), });
function valincome(a, b, f) { if (f == null) { f = "rgba(0,0,0,0)"; } return { labels: ["1", "2", "3", "4", "5", "6", "7"], 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: { display: 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 } } }; } // project and visite start
var chart = AmCharts.makeChart("visitor", { "type": "serial", "hideCredits": true, "theme": "light", "dataDateFormat": "YYYY-MM-DD", "precision": 2, "valueAxes": [{ "id": "v1", "title": "Visitors", "position": "left", "autoGridCount": false, "labelFunction": function(value) { return "$" + Math.round(value) + "M"; } }, { "id": "v2", "title": "New Visitors", "gridAlpha": 0, "position": "right", "autoGridCount": false }], "graphs": [{ "id": "g3", "valueAxis": "v1", "lineColor": "#feb798", "fillColors": "#feb798", "fillAlphas": 1, "type": "column", "title": "old Visitor", "valueField": "sales2", "clustered": false, "columnWidth": 0.5, "legendValueText": "$[[value]]M", "balloonText": "[[title]]<br /><b style='font-size: 130%'>$[[value]]M</b>" }, { "id": "g4", "valueAxis": "v1", "lineColor": "#fe9365", "fillColors": "#fe9365", "fillAlphas": 1, "type": "column", "title": "New visitor", "valueField": "sales1", "clustered": false, "columnWidth": 0.3, "legendValueText": "$[[value]]M", "balloonText": "[[title]]<br /><b style='font-size: 130%'>$[[value]]M</b>" }, { "id": "g1", "valueAxis": "v2", "bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 5, "hideBulletsCount": 50, "lineThickness": 2, "lineColor": "#0df3a3", "type": "smoothedLine", "title": "Last Month Visitor", "useLineColorForBulletBorder": true, "valueField": "market1", "balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>" }, { "id": "g2", "valueAxis": "v2", "bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 5, "hideBulletsCount": 50, "lineThickness": 2, "lineColor": "#fe5d70", // "type": "smoothedLine",
"dashLength": 5, "title": "Average Visitor", "useLineColorForBulletBorder": true, "valueField": "market2", "balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>" }], "chartCursor": { "pan": true, "valueLineEnabled": true, "valueLineBalloonEnabled": true, "cursorAlpha": 0, "valueLineAlpha": 0.2 }, "categoryField": "date", "categoryAxis": { "parseDates": true, "dashLength": 1, "minorGridEnabled": true }, "legend": { "useGraphSettings": true, "position": "top" }, "balloon": { "borderThickness": 1, "cornerRadius": 5, "shadowAlpha": 0 }, "dataProvider": [{ "date": "2013-01-16", "market1": 71, "market2": 75, "sales1": 5, "sales2": 8 }, { "date": "2013-01-17", "market1": 74, "market2": 78, "sales1": 4, "sales2": 6 }, { "date": "2013-01-18", "market1": 78, "market2": 88, "sales1": 5, "sales2": 2 }, { "date": "2013-01-19", "market1": 85, "market2": 89, "sales1": 8, "sales2": 9 }, { "date": "2013-01-20", "market1": 82, "market2": 89, "sales1": 9, "sales2": 6 }, { "date": "2013-01-21", "market1": 83, "market2": 85, "sales1": 3, "sales2": 5 }, { "date": "2013-01-22", "market1": 88, "market2": 92, "sales1": 5, "sales2": 7 }, { "date": "2013-01-23", "market1": 85, "market2": 90, "sales1": 7, "sales2": 6 }, { "date": "2013-01-24", "market1": 85, "market2": 91, "sales1": 9, "sales2": 5 }, { "date": "2013-01-25", "market1": 80, "market2": 84, "sales1": 5, "sales2": 8 }, { "date": "2013-01-26", "market1": 87, "market2": 92, "sales1": 4, "sales2": 8 }, { "date": "2013-01-27", "market1": 84, "market2": 87, "sales1": 3, "sales2": 4 }, { "date": "2013-01-28", "market1": 83, "market2": 88, "sales1": 5, "sales2": 7 }, { "date": "2013-01-29", "market1": 84, "market2": 87, "sales1": 5, "sales2": 8 }, { "date": "2013-01-30", "market1": 81, "market2": 85, "sales1": 4, "sales2": 7 }] }); var chart = AmCharts.makeChart("proj-earning", { "type": "serial", "hideCredits": true, "theme": "light", "dataProvider": [{ "type": "UI", "visits": 10 }, { "type": "UX", "visits": 15 }, { "type": "Web", "visits": 12 }, { "type": "App", "visits": 16 }, { "type": "SEO", "visits": 8 }], "valueAxes": [{ "gridAlpha": 0.3, "gridColor": "#fff", "axisColor": "transparent", "color": '#fff', "dashLength": 0 }], "gridAboveGraphs": true, "startDuration": 1, "graphs": [{ "balloonText": "Active User: <b>[[value]]</b>", "fillAlphas": 1, "lineAlpha": 1, "lineColor": "#fff", "type": "column", "valueField": "visits", "columnWidth": 0.5 }], "chartCursor": { "categoryBalloonEnabled": false, "cursorAlpha": 0, "zoomable": false }, "categoryField": "type", "categoryAxis": { "gridPosition": "start", "gridAlpha": 0, "axesAlpha": 0, "lineAlpha": 0, "fontSize": 12, "color": '#fff', "tickLength": 0 }, "export": { "enabled": false }
}); // 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(), }); var ctx = document.getElementById('sale-chart2').getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: salechart('#00692c', [30, 15, 25, 35, 30, 20, 25, 30, 15, 20, 25, 10, 12, 1], 'transparent'), options: salebuildoption(), }); var ctx = document.getElementById('sale-chart3').getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: salechart('#096567', [15, 20, 25, 10, 30, 15, 25, 35, 30, 20, 25, 30, 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 { maintainAspectRatio: false, 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
var chartData = [{ "date": "2012-01-01", "distance": 227, "townName": "New York", "townName2": "New York", "townSize": 25, "latitude": 40.71, "duration": 408 }, { "date": "2012-01-02", "distance": 371, "townName": "Washington", "townSize": 14, "latitude": 38.89, "duration": 482 }, { "date": "2012-01-03", "distance": 433, "townName": "Wilmington", "townSize": 6, "latitude": 34.22, "duration": 562 }, { "date": "2012-01-04", "distance": 345, "townName": "Jacksonville", "townSize": 7, "latitude": 30.35, "duration": 379 }, { "date": "2012-01-05", "distance": 480, "townName": "Miami", "townName2": "Miami", "townSize": 10, "latitude": 25.83, "duration": 501 }, { "date": "2012-01-06", "distance": 386, "townName": "Tallahassee", "townSize": 7, "latitude": 30.46, "duration": 443 }, { "date": "2012-01-07", "distance": 348, "townName": "New Orleans", "townSize": 10, "latitude": 29.94, "duration": 405 }, { "date": "2012-01-08", "distance": 238, "townName": "Houston", "townName2": "Houston", "townSize": 16, "latitude": 29.76, "duration": 309 }, { "date": "2012-01-09", "distance": 218, "townName": "Dalas", "townSize": 17, "latitude": 32.8, "duration": 287 }, { "date": "2012-01-10", "distance": 349, "townName": "Oklahoma City", "townSize": 11, "latitude": 35.49, "duration": 485 }, { "date": "2012-01-11", "distance": 603, "townName": "Kansas City", "townSize": 10, "latitude": 39.1, "duration": 890 }, { "date": "2012-01-12", "distance": 534, "townName": "Denver", "townName2": "Denver", "townSize": 18, "latitude": 39.74, "duration": 810 }, { "date": "2012-01-13", "townName": "Salt Lake City", "townSize": 12, "distance": 425, "duration": 670, "latitude": 40.75, "alpha": 0.4 }, { "date": "2012-01-14", "latitude": 36.1, "duration": 470, "townName": "Las Vegas", "townName2": "Las Vegas", "bulletClass": "lastBullet" }, { "date": "2012-01-15" }]; var chart = AmCharts.makeChart("monthly-graph", { "type": "serial", "theme": "light", "dataDateFormat": "YYYY-MM-DD", "dataProvider": chartData, "addClassNames": true, "startDuration": 1, "marginLeft": 0,
"categoryField": "date", "categoryAxis": { "parseDates": true, "minPeriod": "DD", "autoGridCount": false, "gridCount": 50, "gridAlpha": 0.1, "gridColor": "#FFFFFF", "axisColor": "#555555", "dateFormats": [{ "period": 'DD', "format": 'DD' }, { "period": 'WW', "format": 'MMM DD' }, { "period": 'MM', "format": 'MMM' }, { "period": 'YYYY', "format": 'YYYY' }] },
"valueAxes": [{ "id": "a1", "title": "Student", "gridAlpha": 0, "axisAlpha": 0 }, { "id": "a2", "position": "right", "gridAlpha": 0, "axisAlpha": 0, "labelsEnabled": false }, { "id": "a3", "title": "", "position": "left", "gridAlpha": 0, "axisAlpha": 0, "lineAlpha": 0, "fontSize": 0, "inside": true, }], "graphs": [{ "id": "g1", "valueField": "distance", "title": "distance", "type": "column", "fillAlphas": 0.9, // "cornerRadiusTop": 5,
// "columnWidth": 0.3,
"valueAxis": "a1", "balloonText": "[[value]] miles", "legendValueText": "[[value]] mi", "legendPeriodValueText": "total: [[value.sum]] mi", "lineColor": "#01a9ac", "alphaField": "alpha" }, { "id": "g2", "valueField": "latitude", "classNameField": "bulletClass", "title": "latitude/city", "type": "line", // "type": "smoothedLine",
"valueAxis": "a2", "lineColor": "#303549", "lineThickness": 2, "dashLength": 8, "legendValueText": "[[value]]/[[description]]", "descriptionField": "townName", "bullet": "round", "bulletSizeField": "townSize", "bulletBorderColor": "#01a9ac", "bulletBorderAlpha": 1, "bulletBorderThickness": 2, "bulletColor": "#0ac282", "labelText": "[[townName2]]", "labelPosition": "right", "balloonText": "latitude:[[value]]", "showBalloon": true, "animationPlayed": true, }, {
"id": "g3", "title": "duration", "valueField": "duration", "type": "line", "type": "smoothedLine", "valueAxis": "a3", "lineColor": "#fe5d70", "balloonText": "[[value]]", "lineThickness": 2, "legendValueText": "[[value]]", "bullet": "round", "bulletBorderColor": "#fe5d70", "bulletBorderThickness": 1, "bulletBorderAlpha": 1, "dashLengthField": "dashLength", "animationPlayed": true }] });
var ctx = document.getElementById('tot-lead').getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: valincomearrow('#01a9ac', [30, 15, 25, 35, 30, 20, 15, 20, 25, 40, 25, 30, 22, 31], '#01a9ac'), options: valincomearowbuildoption(), }); var ctx = document.getElementById('tot-vendor').getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: valincomearrow('#fe9365', [40, 25, 30, 22, 30, 15, 25, 35, 30, 20, 15, 20, 25, 31], '#fe9365'), options: valincomearowbuildoption(), }); var ctx = document.getElementById('invoice-gen').getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: valincomearrow('#0ac282', [25, 30, 20, 15, 20, 25, 31, 22, 30, 15, 25, 35, 30, 40], '#0ac282'), options: valincomearowbuildoption(), });
function valincomearrow(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"], datasets: [{ label: "", borderColor: a, borderWidth: 3, 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, lineTension: 0, backgroundColor: Chart.helpers.color(f).alpha(.7).rgbString(), data: b, }] }; }
function valincomearowbuildoption() { return { maintainAspectRatio: true, title: { display: false, }, tooltips: { intersect: false, mode: 'nearest', xPadding: 10, yPadding: 10, caretPadding: 10 }, 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, max: 50 } }] }, elements: { point: { radius: 4, borderWidth: 12 } }, layout: { padding: { left: 0, right: 0, top: 0, 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("newuserchart").getContext("2d"); window.myDoughnut = new Chart(ctx, { type: 'doughnut', data: { datasets: [{ data: [10, 34, 5], backgroundColor: ["#fe9365", "#01a9ac", "#fe5d70"], label: 'Dataset 1' }], labels: ["Satisfied", "Unsatisfied", "NA"] }, options: { maintainAspectRatio: false, responsive: true, legend: { position: 'bottom', }, title: { display: true, text: "", }, animation: { animateScale: true, animateRotate: true } } });});
|
