diff --git a/chartjs/chart-tests.ts b/chartjs/chart-tests.ts index 585770334..58dead8f9 100644 --- a/chartjs/chart-tests.ts +++ b/chartjs/chart-tests.ts @@ -1,3 +1,48 @@ +/// + +Chart.defaults.global = { + animation: true, + animationSteps: 60, + animationEasing: "easeOutQuart", + showScale: true, + scaleOverride: false, + scaleSteps: null, + scaleStepWidth: null, + scaleStartValue: null, + scaleLineColor: "rgba(0,0,0,.1)", + scaleLineWidth: 1, + scaleShowLabels: true, + scaleLabel: "<%=value%>", + scaleIntegersOnly: true, + scaleBeginAtZero: false, + scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", + scaleFontSize: 12, + scaleFontStyle: "normal", + scaleFontColor: "#666", + responsive: false, + maintainAspectRatio: true, + showTooltips: true, + tooltipEvents: ["mousemove", "touchstart", "touchmove"], + tooltipFillColor: "rgba(0,0,0,0.8)", + tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", + tooltipFontSize: 14, + tooltipFontStyle: "normal", + tooltipFontColor: "#fff", + tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", + tooltipTitleFontSize: 14, + tooltipTitleFontStyle: "bold", + tooltipTitleFontColor: "#fff", + tooltipYPadding: 6, + tooltipXPadding: 6, + tooltipCaretSize: 8, + tooltipCornerRadius: 6, + tooltipXOffset: 10, + tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>", + multiTooltipTemplate: "<%= value %>", + onAnimationProgress: function () { }, + onAnimationComplete: function () { } +} + var lineData: LinearChartData = { labels: ['03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00'], datasets: [ @@ -24,6 +69,32 @@ var lineData: LinearChartData = { ] }; +var myLineChart = new Chart(ctx).Line(lineData, { + scaleShowGridLines: true, + scaleGridLineColor: "rgba(0,0,0,.05)", + scaleGridLineWidth: 1, + bezierCurve: true, + bezierCurveTension: 0.4, + pointDot: true, + pointDotRadius: 4, + pointDotStrokeWidth: 1, + pointHitDetectionRadius: 20, + datasetStroke: true, + datasetStrokeWidth: 2, + datasetFill: true, + legendTemplate: "" +}); + +var myLineChartLegend: string = myLineChart.generateLegend(); +var myLineChartImage: string = myLineChart.toBase64Image(); +myLineChart.addData([1, 2, 3, 4, 5, 6, 7], 'new'); +myLineChart.clear(); +myLineChart.removeData(); +myLineChart.resize(); +myLineChart.update(); +myLineChart.stop(); +myLineChart.destroy(); + var barData: LinearChartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ @@ -46,7 +117,27 @@ var barData: LinearChartData = { ] }; -var myBarChart = new Chart(ctx).Bar(barData); +var myBarChart = new Chart(ctx).Bar(barData, { + scaleBeginAtZero: true, + scaleShowGridLines: true, + scaleGridLineColor: "rgba(0,0,0,.05)", + scaleGridLineWidth: 1, + barShowStroke: true, + barStrokeWidth: 2, + barValueSpacing: 5, + barDatasetSpacing: 1, + legendTemplate: "" +}); + +var myBarChartLegend: string = myBarChart.generateLegend(); +var myBarChartImage: string = myBarChart.toBase64Image(); +myBarChart.addData([1, 2, 3, 4, 5, 6, 7], 'new'); +myBarChart.clear(); +myBarChart.removeData(); +myBarChart.resize(); +myBarChart.update(); +myBarChart.stop(); +myBarChart.destroy(); var radarData: LinearChartData = { labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], @@ -74,7 +165,36 @@ var radarData: LinearChartData = { ] }; -var myRadarChart = new Chart(ctx).Radar(radarData); +var myRadarChart = new Chart(ctx).Radar(radarData, { + scaleShowLine: true, + angleShowLineOut: true, + scaleShowLabels: false, + scaleBeginAtZero: true, + angleLineColor: "rgba(0,0,0,.1)", + angleLineWidth: 1, + pointLabelFontFamily: "'Arial'", + pointLabelFontStyle: "normal", + pointLabelFontSize: 10, + pointLabelFontColor: "#666", + pointDot: true, + pointDotRadius: 3, + pointDotStrokeWidth: 1, + pointHitDetectionRadius: 20, + datasetStroke: true, + datasetStrokeWidth: 2, + datasetFill: true, + legendTemplate: "" +}); + +var myRadarChartLegend: string = myRadarChart.generateLegend(); +var myRadarChartImage: string = myRadarChart.toBase64Image(); +myRadarChart.addData([1, 2, 3, 4, 5, 6, 7], 'new'); +myRadarChart.clear(); +myRadarChart.removeData(); +myRadarChart.resize(); +myRadarChart.update(); +myRadarChart.stop(); +myRadarChart.destroy(); var polarAreaData: CircularChartData[] = [ { @@ -110,7 +230,37 @@ var polarAreaData: CircularChartData[] = [ ]; -var myPolarAreaChart = new Chart(ctx).PolarArea(polarAreaData); +var myPolarAreaChart = new Chart(ctx).PolarArea(polarAreaData, { + 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: "" +}); + +var myPolarAreaChartLegend: string = myPolarAreaChart.generateLegend(); +var myPolarAreaChartImage: string = myPolarAreaChart.toBase64Image(); +myPolarAreaChart.addData([{ + value: 120, + color: "#4D5360", + highlight: "#616774", + label: "Dark Grey" +}], 0); +myPolarAreaChart.clear(); +myPolarAreaChart.removeData(0); +myPolarAreaChart.resize(); +myPolarAreaChart.update(); +myPolarAreaChart.stop(); +myPolarAreaChart.destroy(); var pieData: CircularChartData[] = [ { @@ -134,7 +284,57 @@ var pieData: CircularChartData[] = [ ]; // For a pie chart -var myPieChart = new Chart(ctx[0]).Pie(pieData); +var myPieChart = new Chart(ctx[0]).Pie(pieData, { + segmentShowStroke: true, + segmentStrokeColor: "#fff", + segmentStrokeWidth: 2, + percentageInnerCutout: 0, + animationSteps: 100, + animationEasing: "easeOutBounce", + animateRotate: true, + animateScale: false, + legendTemplate: "" +}); + +var myPieChartLegend: string = myPieChart.generateLegend(); +var myPieChartImage: string = myPieChart.toBase64Image(); +myPieChart.addData([{ + value: 120, + color: "#4D5360", + highlight: "#616774", + label: "Dark Grey" +}], 0); +myPieChart.clear(); +myPieChart.removeData(0); +myPieChart.resize(); +myPieChart.update(); +myPieChart.stop(); +myPieChart.destroy(); // And for a doughnut chart -var myDoughnutChart = new Chart(ctx[1]).Doughnut(pieData); +var myDoughnutChart = new Chart(ctx[1]).Doughnut(pieData, { + segmentShowStroke: true, + segmentStrokeColor: "#fff", + segmentStrokeWidth: 2, + percentageInnerCutout: 50, + animationSteps: 100, + animationEasing: "easeOutBounce", + animateRotate: true, + animateScale: false, + legendTemplate: "" +}); + +var myDoughnutChartLegend: string = myDoughnutChart.generateLegend(); +var myDoughnutChartImage: string = myDoughnutChart.toBase64Image(); +myPieChart.addData([{ + value: 120, + color: "#4D5360", + highlight: "#616774", + label: "Dark Grey" +}], 0); +myDoughnutChart.clear(); +myDoughnutChart.removeData(0); +myDoughnutChart.resize(); +myDoughnutChart.update(); +myDoughnutChart.stop(); +myDoughnutChart.destroy();