mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2025-01-22 03:05:28 +01:00
999 lines
28 KiB
JavaScript
Executable File
999 lines
28 KiB
JavaScript
Executable File
$(function () {
|
|
/* ChartJS */
|
|
|
|
'use strict';
|
|
if ($("#mixed-chart").length) {
|
|
var chartData = {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [{
|
|
type: 'line',
|
|
label: 'Revenue',
|
|
data: ["23", "33", "32", "65", "21", "45", "35"],
|
|
backgroundColor: ChartColor[2],
|
|
borderColor: ChartColor[2],
|
|
borderWidth: 3,
|
|
fill: false,
|
|
}, {
|
|
type: 'bar',
|
|
label: 'Standard',
|
|
data: ["53", "28", "19", "29", "30", "51", "55"],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 2
|
|
}, {
|
|
type: 'bar',
|
|
label: 'Extended',
|
|
data: ["34", "16", "46", "54", "42", "31", "49"],
|
|
backgroundColor: ChartColor[1],
|
|
borderColor: ChartColor[1]
|
|
}]
|
|
};
|
|
var MixedChartCanvas = document.getElementById('mixed-chart').getContext('2d');
|
|
lineChart = new Chart(MixedChartCanvas, {
|
|
type: 'bar',
|
|
data: chartData,
|
|
options: {
|
|
responsive: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Revenue and number of lincences sold',
|
|
fontColor: chartFontcolor
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: true,
|
|
ticks: {
|
|
fontColor: chartFontcolor,
|
|
stepSize: 50,
|
|
min: 0,
|
|
max: 150,
|
|
autoSkip: true,
|
|
autoSkipPadding: 15,
|
|
maxRotation: 0,
|
|
maxTicksLimit: 10
|
|
},
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Number of Sales',
|
|
fontSize: 12,
|
|
lineHeight: 2,
|
|
fontColor: chartFontcolor
|
|
},
|
|
ticks: {
|
|
fontColor: chartFontcolor,
|
|
display: true,
|
|
autoSkip: false,
|
|
maxRotation: 0,
|
|
stepSize: 20,
|
|
min: 0,
|
|
max: 100
|
|
},
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
legendCallback: function (chart) {
|
|
var text = [];
|
|
text.push('<div class="chartjs-legend d-flex justify-content-center mt-4"><ul>');
|
|
for (var i = 0; i < chart.data.datasets.length; i++) {
|
|
console.log(chart.data.datasets[i]); // see what's inside the obj.
|
|
text.push('<li>');
|
|
text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + '</span>');
|
|
text.push(chart.data.datasets[i].label);
|
|
text.push('</li>');
|
|
}
|
|
text.push('</ul></div>');
|
|
return text.join("");
|
|
}
|
|
}
|
|
});
|
|
document.getElementById('mixed-chart-legend').innerHTML = lineChart.generateLegend();
|
|
}
|
|
if ($("#lineChart").length) {
|
|
var lineData = {
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
|
|
datasets: [{
|
|
data: [0, 205, 75, 150, 100, 150, 50, 100, 80],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 3,
|
|
fill: 'false',
|
|
label: "Sales"
|
|
}]
|
|
};
|
|
var lineOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
plugins: {
|
|
filler: {
|
|
propagate: false
|
|
}
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Month',
|
|
fontSize: 12,
|
|
lineHeight: 2,
|
|
fontColor: chartFontcolor
|
|
},
|
|
ticks: {
|
|
fontColor: chartFontcolor,
|
|
stepSize: 50,
|
|
min: 0,
|
|
max: 150,
|
|
autoSkip: true,
|
|
autoSkipPadding: 15,
|
|
maxRotation: 0,
|
|
maxTicksLimit: 10
|
|
},
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
color: 'transparent',
|
|
zeroLineColor: '#eeeeee'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Number of sales',
|
|
fontSize: 12,
|
|
lineHeight: 2,
|
|
fontColor: chartFontcolor
|
|
},
|
|
ticks: {
|
|
fontColor: chartFontcolor,
|
|
display: true,
|
|
autoSkip: false,
|
|
maxRotation: 0,
|
|
stepSize: 100,
|
|
min: 0,
|
|
max: 300
|
|
},
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
legendCallback: function (chart) {
|
|
var text = [];
|
|
text.push('<div class="chartjs-legend"><ul>');
|
|
for (var i = 0; i < chart.data.datasets.length; i++) {
|
|
console.log(chart.data.datasets[i]); // see what's inside the obj.
|
|
text.push('<li>');
|
|
text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + '</span>');
|
|
text.push(chart.data.datasets[i].label);
|
|
text.push('</li>');
|
|
}
|
|
text.push('</ul></div>');
|
|
return text.join("");
|
|
},
|
|
elements: {
|
|
line: {
|
|
tension: 0
|
|
},
|
|
point: {
|
|
radius: 0
|
|
}
|
|
}
|
|
}
|
|
var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: lineData,
|
|
options: lineOptions
|
|
});
|
|
document.getElementById('line-traffic-legend').innerHTML = lineChart.generateLegend();
|
|
}
|
|
if ($("#areaChart").length) {
|
|
var gradientStrokeFill_1 = lineChartCanvas.createLinearGradient(1, 2, 1, 280);
|
|
gradientStrokeFill_1.addColorStop(0, "rgba(20, 88, 232, 0.37)");
|
|
gradientStrokeFill_1.addColorStop(1, "rgba(255,255,255,0.4)")
|
|
var lineData = {
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
|
|
datasets: [{
|
|
data: [0, 205, 75, 150, 100, 150, 50, 100, 80],
|
|
backgroundColor: gradientStrokeFill_1,
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 3,
|
|
fill: true,
|
|
label: "Marketing"
|
|
}]
|
|
};
|
|
var lineOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
plugins: {
|
|
filler: {
|
|
propagate: false
|
|
}
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Month',
|
|
fontColor: chartFontcolor,
|
|
fontSize: 12,
|
|
lineHeight: 2
|
|
},
|
|
ticks: {
|
|
autoSkip: true,
|
|
autoSkipPadding: 35,
|
|
maxRotation: 0,
|
|
maxTicksLimit: 10,
|
|
fontColor: chartFontcolor
|
|
},
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Number of user',
|
|
fontSize: 12,
|
|
fontColor: chartFontcolor,
|
|
lineHeight: 2
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
autoSkip: false,
|
|
maxRotation: 0,
|
|
stepSize: 100,
|
|
min: 0,
|
|
max: 300,
|
|
fontColor: chartFontcolor
|
|
},
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
legendCallback: function (chart) {
|
|
var text = [];
|
|
text.push('<div class="chartjs-legend"><ul>');
|
|
for (var i = 0; i < chart.data.datasets.length; i++) {
|
|
console.log(chart.data.datasets[i]); // see what's inside the obj.
|
|
text.push('<li>');
|
|
text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + '</span>');
|
|
text.push(chart.data.datasets[i].label);
|
|
text.push('</li>');
|
|
}
|
|
text.push('</ul></div>');
|
|
return text.join("");
|
|
},
|
|
elements: {
|
|
line: {
|
|
tension: 0
|
|
},
|
|
point: {
|
|
radius: 0
|
|
}
|
|
}
|
|
}
|
|
var lineChartCanvas = $("#areaChart").get(0).getContext("2d");
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: lineData,
|
|
options: lineOptions
|
|
});
|
|
document.getElementById('area-traffic-legend').innerHTML = lineChart.generateLegend();
|
|
}
|
|
if ($("#barChart").length) {
|
|
var barChartCanvas = $("#barChart").get(0).getContext("2d");
|
|
var barChart = new Chart(barChartCanvas, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
datasets: [{
|
|
label: 'Profit',
|
|
data: [15, 28, 14, 22, 38, 30, 40, 70, 85, 50, 23, 20],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Sales by year',
|
|
fontColor: chartFontcolor,
|
|
fontSize: 12,
|
|
lineHeight: 2
|
|
},
|
|
ticks: {
|
|
fontColor: chartFontcolor,
|
|
stepSize: 50,
|
|
min: 0,
|
|
max: 150,
|
|
autoSkip: true,
|
|
autoSkipPadding: 15,
|
|
maxRotation: 0,
|
|
maxTicksLimit: 10
|
|
},
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'revenue by sales',
|
|
fontColor: chartFontcolor,
|
|
fontSize: 12,
|
|
lineHeight: 2
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
autoSkip: false,
|
|
maxRotation: 0,
|
|
fontColor: chartFontcolor,
|
|
stepSize: 50,
|
|
min: 0,
|
|
max: 150
|
|
},
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
legendCallback: function (chart) {
|
|
var text = [];
|
|
text.push('<div class="chartjs-legend"><ul>');
|
|
for (var i = 0; i < chart.data.datasets.length; i++) {
|
|
console.log(chart.data.datasets[i]); // see what's inside the obj.
|
|
text.push('<li>');
|
|
text.push('<span style="background-color:' + chart.data.datasets[i].backgroundColor + '">' + '</span>');
|
|
text.push(chart.data.datasets[i].label);
|
|
text.push('</li>');
|
|
}
|
|
text.push('</ul></div>');
|
|
return text.join("");
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0
|
|
}
|
|
}
|
|
}
|
|
});
|
|
document.getElementById('bar-traffic-legend').innerHTML = barChart.generateLegend();
|
|
}
|
|
if ($("#stackedbarChart").length) {
|
|
var stackedbarChartCanvas = $("#stackedbarChart").get(0).getContext("2d");
|
|
var stackedbarChart = new Chart(stackedbarChartCanvas, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
|
datasets: [{
|
|
label: "Desktop",
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 1,
|
|
data: [55, 45, 44, 54, 38, 40, 50]
|
|
},
|
|
{
|
|
label: "Mobile",
|
|
backgroundColor: ChartColor[1],
|
|
borderColor: ChartColor[1],
|
|
borderWidth: 1,
|
|
data: [34, 20, 54, 34, 65, 40, 35]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
legend: false,
|
|
categoryPercentage: 0.5,
|
|
stacked: true,
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'User by time',
|
|
fontColor: chartFontcolor,
|
|
fontSize: 12,
|
|
lineHeight: 2
|
|
},
|
|
ticks: {
|
|
fontColor: chartFontcolor,
|
|
stepSize: 50,
|
|
min: 0,
|
|
max: 150,
|
|
autoSkip: true,
|
|
autoSkipPadding: 15,
|
|
maxRotation: 0,
|
|
maxTicksLimit: 10
|
|
},
|
|
gridLines: {
|
|
display: false,
|
|
drawBorder: false,
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Number of users',
|
|
fontColor: chartFontcolor,
|
|
fontSize: 12,
|
|
lineHeight: 2
|
|
},
|
|
ticks: {
|
|
fontColor: chartFontcolor,
|
|
stepSize: 50,
|
|
min: 0,
|
|
max: 150,
|
|
autoSkip: true,
|
|
autoSkipPadding: 15,
|
|
maxRotation: 0,
|
|
maxTicksLimit: 10
|
|
},
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
legendCallback: function (chart) {
|
|
var text = [];
|
|
text.push('<div class="chartjs-legend"><ul>');
|
|
for (var i = 0; i < chart.data.datasets.length; i++) {
|
|
console.log(chart.data.datasets[i]); // see what's inside the obj.
|
|
text.push('<li>');
|
|
text.push('<span style="background-color:' + chart.data.datasets[i].backgroundColor + '">' + '</span>');
|
|
text.push(chart.data.datasets[i].label);
|
|
text.push('</li>');
|
|
}
|
|
text.push('</ul></div>');
|
|
return text.join("");
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0
|
|
}
|
|
}
|
|
}
|
|
});
|
|
document.getElementById('stacked-bar-traffic-legend').innerHTML = stackedbarChart.generateLegend();
|
|
}
|
|
if ($("#radarChart").length) {
|
|
var marksCanvas = document.getElementById("radarChart");
|
|
var marksData = {
|
|
labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
|
|
datasets: [{
|
|
label: "Student A",
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0,
|
|
fill: true,
|
|
radius: 6,
|
|
pointRadius: 5,
|
|
pointBorderWidth: 0,
|
|
pointBackgroundColor: ChartColor[4],
|
|
pointHoverRadius: 10,
|
|
data: [54, 45, 60, 70, 54, 75]
|
|
}, {
|
|
label: "Student B",
|
|
backgroundColor: ChartColor[1],
|
|
borderColor: ChartColor[1],
|
|
borderWidth: 0,
|
|
fill: true,
|
|
radius: 6,
|
|
pointRadius: 5,
|
|
pointBorderWidth: 0,
|
|
pointBackgroundColor: ChartColor[1],
|
|
pointHoverRadius: 10,
|
|
data: [65, 75, 70, 80, 60, 80]
|
|
}]
|
|
};
|
|
|
|
var chartOptions = {
|
|
scale: {
|
|
ticks: {
|
|
beginAtZero: true,
|
|
min: 0,
|
|
max: 100,
|
|
stepSize: 20,
|
|
display: false,
|
|
fontColor: chartFontcolor
|
|
},
|
|
pointLabels: {
|
|
fontSize: 14,
|
|
fontColor: chartFontcolor,
|
|
color: chartGridLineColor
|
|
}
|
|
},
|
|
legend: false,
|
|
legendCallback: function (chart) {
|
|
var text = [];
|
|
text.push('<div class="chartjs-legend"><ul>');
|
|
for (var i = 0; i < chart.data.datasets.length; i++) {
|
|
console.log(chart.data.datasets[i]); // see what's inside the obj.
|
|
text.push('<li>');
|
|
text.push('<span style="background-color:' + chart.data.datasets[i].backgroundColor + '">' + '</span>');
|
|
text.push(chart.data.datasets[i].label);
|
|
text.push('</li>');
|
|
}
|
|
text.push('</ul></div>');
|
|
return text.join("");
|
|
},
|
|
};
|
|
|
|
var radarChart = new Chart(marksCanvas, {
|
|
type: 'radar',
|
|
data: marksData,
|
|
options: chartOptions
|
|
});
|
|
document.getElementById('radar-chart-legend').innerHTML = radarChart.generateLegend();
|
|
}
|
|
if ($("#doughnutChart").length) {
|
|
var doughnutChartCanvas = $("#doughnutChart").get(0).getContext("2d");
|
|
var doughnutPieData = {
|
|
datasets: [{
|
|
data: [20, 80, 83],
|
|
backgroundColor: [
|
|
ChartColor[0],
|
|
ChartColor[1],
|
|
ChartColor[2]
|
|
],
|
|
borderColor: [
|
|
ChartColor[0],
|
|
ChartColor[1],
|
|
ChartColor[2]
|
|
],
|
|
}],
|
|
|
|
// These labels appear in the legend and in the tooltips when hovering different arcs
|
|
labels: [
|
|
'Sales',
|
|
'Profit',
|
|
'Return',
|
|
]
|
|
};
|
|
var doughnutPieOptions = {
|
|
cutoutPercentage: 75,
|
|
animationEasing: "easeOutBounce",
|
|
animateRotate: true,
|
|
animateScale: false,
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
showScale: true,
|
|
legend: false,
|
|
legendCallback: function (chart) {
|
|
var text = [];
|
|
text.push('<div class="chartjs-legend"><ul>');
|
|
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
|
|
text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
|
|
text.push('</span>');
|
|
if (chart.data.labels[i]) {
|
|
text.push(chart.data.labels[i]);
|
|
}
|
|
text.push('</li>');
|
|
}
|
|
text.push('</div></ul>');
|
|
return text.join("");
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
}
|
|
};
|
|
var doughnutChart = new Chart(doughnutChartCanvas, {
|
|
type: 'doughnut',
|
|
data: doughnutPieData,
|
|
options: doughnutPieOptions
|
|
});
|
|
document.getElementById('doughnut-chart-legend').innerHTML = doughnutChart.generateLegend();
|
|
}
|
|
if ($("#pieChart").length) {
|
|
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
|
|
var pieChart = new Chart(pieChartCanvas, {
|
|
type: 'pie',
|
|
data: {
|
|
datasets: [{
|
|
data: [30, 40, 30],
|
|
backgroundColor: [
|
|
ChartColor[0],
|
|
ChartColor[1],
|
|
ChartColor[2]
|
|
],
|
|
borderColor: [
|
|
ChartColor[0],
|
|
ChartColor[1],
|
|
ChartColor[2]
|
|
],
|
|
}],
|
|
labels: [
|
|
'Sales',
|
|
'Profit',
|
|
'Return',
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
animation: {
|
|
animateScale: true,
|
|
animateRotate: true
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
legendCallback: function (chart) {
|
|
var text = [];
|
|
text.push('<div class="chartjs-legend"><ul>');
|
|
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
|
|
text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
|
|
text.push('</span>');
|
|
if (chart.data.labels[i]) {
|
|
text.push(chart.data.labels[i]);
|
|
}
|
|
text.push('</li>');
|
|
}
|
|
text.push('</div></ul>');
|
|
return text.join("");
|
|
}
|
|
}
|
|
});
|
|
document.getElementById('pie-chart-legend').innerHTML = pieChart.generateLegend();
|
|
}
|
|
if ($('#scatterChart').length) {
|
|
var options = {
|
|
type: 'bubble',
|
|
data: {
|
|
datasets: [{
|
|
label: 'John',
|
|
data: [{
|
|
x: 3,
|
|
y: 10,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[0]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 2,
|
|
y: 2,
|
|
r: 10
|
|
}],
|
|
backgroundColor: ChartColor[1],
|
|
borderColor: ChartColor[1],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[1]
|
|
}, {
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 12,
|
|
y: 32,
|
|
r: 13
|
|
}],
|
|
backgroundColor: ChartColor[2],
|
|
borderColor: ChartColor[2],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[2]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 29,
|
|
y: 52,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[0]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 49,
|
|
y: 62,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[1],
|
|
borderColor: ChartColor[1],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[1]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 22,
|
|
y: 22,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[2],
|
|
borderColor: ChartColor[2],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[2]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 23,
|
|
y: 25,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[1],
|
|
borderColor: ChartColor[1],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[1]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 12,
|
|
y: 10,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[1],
|
|
borderColor: ChartColor[1],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[1]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 34,
|
|
y: 23,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[1],
|
|
borderColor: ChartColor[1],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[1]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 30,
|
|
y: 20,
|
|
r: 10
|
|
}],
|
|
backgroundColor: ChartColor[1],
|
|
borderColor: ChartColor[1],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[1]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 12,
|
|
y: 17,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[1],
|
|
borderColor: ChartColor[1],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[1]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 32,
|
|
y: 37,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[0]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 52,
|
|
y: 57,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[0]
|
|
},
|
|
{
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 77,
|
|
y: 40,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[0]
|
|
}, {
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 67,
|
|
y: 40,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[0]
|
|
}, {
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 47,
|
|
y: 20,
|
|
r: 10
|
|
}],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[0]
|
|
}, {
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 77,
|
|
y: 10,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[0]
|
|
}, {
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 57,
|
|
y: 10,
|
|
r: 10
|
|
}],
|
|
backgroundColor: ChartColor[0],
|
|
borderColor: ChartColor[0],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[0]
|
|
}, {
|
|
label: 'Paul',
|
|
data: [{
|
|
x: 57,
|
|
y: 40,
|
|
r: 5
|
|
}],
|
|
backgroundColor: ChartColor[3],
|
|
borderColor: ChartColor[3],
|
|
borderWidth: 0,
|
|
hoverBackgroundColor: ChartColor[3]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
legend: false,
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
display: false,
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor
|
|
},
|
|
ticks: {
|
|
autoSkip: true,
|
|
autoSkipPadding: 45,
|
|
maxRotation: 0,
|
|
maxTicksLimit: 10,
|
|
fontColor: chartFontcolor
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
color: chartGridLineColor,
|
|
zeroLineColor: chartGridLineColor,
|
|
display: true
|
|
},
|
|
ticks: {
|
|
beginAtZero: true,
|
|
stepSize: 25,
|
|
max: 100,
|
|
fontColor: chartFontcolor
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
legendCallback: function (chart) {
|
|
var text = [];
|
|
text.push('<div class="chartjs-legend"><ul>');
|
|
for (var i = 0; i < chart.data.datasets.length; i++) {
|
|
console.log(chart.data.datasets[i]); // see what's inside the obj.
|
|
text.push('<li>');
|
|
text.push('<span style="background-color:' + chart.data.datasets[i].backgroundColor + '">' + '</span>');
|
|
text.push(chart.data.datasets[i].label);
|
|
text.push('</li>');
|
|
}
|
|
text.push('</ul></div>');
|
|
return text.join("");
|
|
},
|
|
}
|
|
}
|
|
|
|
var ctx = document.getElementById('scatterChart').getContext('2d');
|
|
new Chart(ctx, options);
|
|
document.getElementById('scatter-chart-legend').innerHTML = barChart.generateLegend();
|
|
}
|
|
}); |