Mini Shell
'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
}
}
});
});
Zerion Mini Shell 1.0