286 lines
9.5 KiB
JavaScript
286 lines
9.5 KiB
JavaScript
Chart.defaults.global = {
|
|
animation: true,
|
|
animationSteps: 60,
|
|
animationEasing: "easeOutIn",
|
|
showScale: true,
|
|
scaleOverride: false,
|
|
scaleSteps: null,
|
|
scaleStepWidth: null,
|
|
scaleStartValue: null,
|
|
scaleLineColor: "#eeeeee",
|
|
scaleLineWidth: 1,
|
|
scaleShowLabels: true,
|
|
scaleLabel: "<%=value%>",
|
|
scaleIntegersOnly: true,
|
|
scaleBeginAtZero: false,
|
|
scaleFontSize: 12,
|
|
scaleFontStyle: "normal",
|
|
scaleFontColor: "#717171",
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
showTooltips: true,
|
|
multiTooltipTemplate: "<%= value %>",
|
|
tooltipFillColor: "#333333",
|
|
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
|
|
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
|
|
tooltipFontSize: 14,
|
|
tooltipFontStyle: "normal",
|
|
tooltipFontColor: "#fff",
|
|
tooltipTitleFontSize: 16,
|
|
TitleFontStyle : "Raleway",
|
|
tooltipTitleFontStyle: "bold",
|
|
tooltipTitleFontColor: "#ffffff",
|
|
tooltipYPadding: 10,
|
|
tooltipXPadding: 10,
|
|
tooltipCaretSize: 8,
|
|
tooltipCornerRadius: 6,
|
|
tooltipXOffset: 5,
|
|
onAnimationProgress: function() {},
|
|
onAnimationComplete: function() {}
|
|
};
|
|
var barData = {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
fillColor: "rgba(36, 105, 92, 0.4)",
|
|
strokeColor: vihoAdminConfig.primary,
|
|
highlightFill: "rgba(36, 105, 92, 0.6)",
|
|
highlightStroke: vihoAdminConfig.primary,
|
|
data: [35, 59, 80, 81, 56, 55, 40]
|
|
}, {
|
|
label: "My Second dataset",
|
|
fillColor: "rgba(186, 137, 93, 0.4)",
|
|
strokeColor: vihoAdminConfig.secondary,
|
|
highlightFill: "rgba(186, 137, 93, 0.6)",
|
|
highlightStroke: vihoAdminConfig.secondary,
|
|
data: [28, 48, 40, 19, 86, 27, 90]
|
|
}]
|
|
};
|
|
var barOptions = {
|
|
scaleBeginAtZero: true,
|
|
scaleShowGridLines: true,
|
|
scaleGridLineColor: "rgba(0,0,0,0.1)",
|
|
scaleGridLineWidth: 1,
|
|
scaleShowHorizontalLines: true,
|
|
scaleShowVerticalLines: true,
|
|
barShowStroke: true,
|
|
barStrokeWidth: 2,
|
|
barValueSpacing: 5,
|
|
barDatasetSpacing: 1,
|
|
};
|
|
var barCtx = document.getElementById("myBarGraph").getContext("2d");
|
|
var myBarChart = new Chart(barCtx).Bar(barData, barOptions);
|
|
var polarData = [
|
|
{
|
|
value: 300,
|
|
color: vihoAdminConfig.primary,
|
|
highlight: "rgba(36, 105, 92, 1)",
|
|
label: "Yellow"
|
|
}, {
|
|
value: 50,
|
|
color: vihoAdminConfig.secondary,
|
|
highlight: "rgba(186, 137, 93, 1)",
|
|
label: "Sky"
|
|
}, {
|
|
value: 100,
|
|
color: "#222222",
|
|
highlight: "rgba(34,34,34,1)",
|
|
label: "Black"
|
|
}, {
|
|
value: 40,
|
|
color: "#717171",
|
|
highlight: "rgba(113, 113, 113, 1)",
|
|
label: "Grey"
|
|
}, {
|
|
value: 120,
|
|
color: "#e2c636",
|
|
highlight: "#616774",
|
|
label: "Dark Grey"
|
|
}
|
|
];
|
|
var polarOptions = {
|
|
scaleShowLabelBackdrop: true,
|
|
scaleBackdropColor: "rgba(255,255,255,0.75)",
|
|
scaleBeginAtZero: true,
|
|
scaleBackdropPaddingY: 2,
|
|
scaleBackdropPaddingX: 2,
|
|
scaleShowLine: true,
|
|
segmentShowStroke: true,
|
|
segmentStrokeColor: "#fff",
|
|
segmentStrokeWidth: 2,
|
|
animationSteps: 100,
|
|
animationEasing: "easeOutBounce",
|
|
animateRotate: true,
|
|
animateScale: false,
|
|
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
|
|
};
|
|
var polarCtx = document.getElementById("myPolarGraph").getContext("2d");
|
|
var myPolarChart = new Chart(polarCtx).PolarArea(polarData, polarOptions);
|
|
var lineGraphData = {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
fillColor: "rgba(36, 105, 92, 0.5)",
|
|
strokeColor: vihoAdminConfig.primary,
|
|
pointColor: vihoAdminConfig.primary,
|
|
pointStrokeColor: "#fff",
|
|
pointHighlightFill: "#fff",
|
|
pointHighlightStroke: "#000",
|
|
data: [10, 59, 80, 81, 56, 55, 40]
|
|
}, {
|
|
label: "My Second dataset",
|
|
fillColor: "rgba(186, 137, 93, 0.3)",
|
|
strokeColor: vihoAdminConfig.secondary,
|
|
pointColor: vihoAdminConfig.secondary,
|
|
pointStrokeColor: "#fff",
|
|
pointHighlightFill: "#000",
|
|
pointHighlightStroke: "rgba(30, 166, 236, 1)",
|
|
data: [28, 48, 40, 19, 86, 27, 90]
|
|
}]
|
|
};
|
|
var lineGraphOptions = {
|
|
scaleShowGridLines: true,
|
|
scaleGridLineColor: "rgba(0,0,0,.05)",
|
|
scaleGridLineWidth: 1,
|
|
scaleShowHorizontalLines: true,
|
|
scaleShowVerticalLines: true,
|
|
bezierCurve: true,
|
|
bezierCurveTension: 0.4,
|
|
pointDot: true,
|
|
pointDotRadius: 4,
|
|
pointDotStrokeWidth: 1,
|
|
pointHitDetectionRadius: 20,
|
|
datasetStroke: true,
|
|
datasetStrokeWidth: 2,
|
|
datasetFill: true,
|
|
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
|
|
};
|
|
var lineCtx = document.getElementById("myGraph").getContext("2d");
|
|
var myLineCharts = new Chart(lineCtx).Line(lineGraphData, lineGraphOptions);
|
|
var radarData = {
|
|
labels: ["Ford", "Chevy", "Toyota", "Honda", "Mazda"],
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
fillColor: "rgba(36, 105, 92, 0.4)",
|
|
strokeColor: vihoAdminConfig.primary,
|
|
pointColor: vihoAdminConfig.primary,
|
|
pointStrokeColor: vihoAdminConfig.primary,
|
|
pointHighlightFill: vihoAdminConfig.primary,
|
|
pointHighlightStroke: "rgba(68, 102, 242, 0.4)",
|
|
data: [12, 3, 5, 18, 7]
|
|
}]
|
|
};
|
|
var radarOptions = {
|
|
scaleShowGridLines: true,
|
|
scaleGridLineColor: "rgba(0,0,0,.2)",
|
|
scaleGridLineWidth: 1,
|
|
scaleShowHorizontalLines: true,
|
|
scaleShowVerticalLines: true,
|
|
bezierCurve: true,
|
|
bezierCurveTension: 0.4,
|
|
pointDot: true,
|
|
pointDotRadius: 3,
|
|
pointDotStrokeWidth: 1,
|
|
pointHitDetectionRadius: 20,
|
|
datasetStroke: true,
|
|
datasetStrokeWidth: 2,
|
|
datasetFill: true,
|
|
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
|
|
};
|
|
var radarCtx = document.getElementById("myRadarGraph").getContext("2d");
|
|
var myRadarChart = new Chart(radarCtx).Radar(radarData, radarOptions);
|
|
var pieData = [
|
|
{
|
|
value: 300,
|
|
color: vihoAdminConfig.primary,
|
|
highlight: vihoAdminConfig.primary,
|
|
label: "Primary"
|
|
},
|
|
{
|
|
value: 50,
|
|
color: vihoAdminConfig.secondary,
|
|
highlight: vihoAdminConfig.secondary,
|
|
label: "Secondary"
|
|
},
|
|
{
|
|
value: 100,
|
|
color: "#d22d3d",
|
|
highlight: "#d22d3d",
|
|
label: "Danger"
|
|
}
|
|
];
|
|
var pieOptions = {
|
|
segmentShowStroke: true,
|
|
segmentStrokeColor: "#fff",
|
|
segmentStrokeWidth: 2,
|
|
percentageInnerCutout: 0,
|
|
animationSteps: 100,
|
|
animationEasing: "easeOutBounce",
|
|
animateRotate: true,
|
|
animateScale: false,
|
|
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
|
|
};
|
|
|
|
|
|
var doughnutData = [
|
|
{
|
|
value: 300,
|
|
color: vihoAdminConfig.primary,
|
|
highlight: vihoAdminConfig.primary,
|
|
label: "Primary"
|
|
},
|
|
{
|
|
value: 50,
|
|
color: vihoAdminConfig.secondary,
|
|
highlight: vihoAdminConfig.secondary,
|
|
label: "Secondary"
|
|
},
|
|
{
|
|
value: 100,
|
|
color: "#222222",
|
|
highlight: "#222222",
|
|
label: "Success"
|
|
}
|
|
];
|
|
var doughnutOptions = {
|
|
segmentShowStroke: true,
|
|
segmentStrokeColor: "#fff",
|
|
segmentStrokeWidth: 2,
|
|
percentageInnerCutout: 50,
|
|
animationSteps: 100,
|
|
animationEasing: "easeOutBounce",
|
|
animateRotate: true,
|
|
animateScale: false,
|
|
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
|
|
};
|
|
var doughnutCtx = document.getElementById("myDoughnutGraph").getContext("2d");
|
|
var myDoughnutChart = new Chart(doughnutCtx).Doughnut(doughnutData, doughnutOptions);
|
|
var myLineChart = {
|
|
labels: ["","10", "20", "30", "40", "50", "60", "70", "80"],
|
|
datasets: [{
|
|
fillColor: "rgba(113, 113, 113, 0.2)",
|
|
strokeColor: "#717171",
|
|
pointColor: "#717171",
|
|
data: [10, 20, 40, 30, 0, 20, 10, 30, 10]
|
|
},{
|
|
fillColor: "rgba(186, 137, 93, 0.2)",
|
|
strokeColor: vihoAdminConfig.secondary,
|
|
pointColor: vihoAdminConfig.secondary,
|
|
data: [20, 40, 10, 20, 40, 30, 40, 10, 20]
|
|
}, {
|
|
fillColor: "rgb(36, 105, 92, 0.2)",
|
|
strokeColor: vihoAdminConfig.primary,
|
|
pointColor: vihoAdminConfig.primary,
|
|
data: [60, 10, 40, 30, 80, 30, 20, 90, 0]
|
|
}]
|
|
}
|
|
var ctx = document.getElementById("myLineCharts").getContext("2d");
|
|
var LineChartDemo = new Chart(ctx).Line(myLineChart, {
|
|
pointDotRadius: 2,
|
|
pointDotStrokeWidth: 5,
|
|
pointDotStrokeColor: "#ffffff",
|
|
bezierCurve: false,
|
|
scaleShowVerticalLines: false,
|
|
scaleGridLineColor: "#eeeeee"
|
|
});
|