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.
1055 lines
30 KiB
1055 lines
30 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, 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
|
|
}
|
|
}
|
|
});
|
|
});
|