From 802b27946a68d0456916ec1832323e03f24f9bee Mon Sep 17 00:00:00 2001 From: Steve Fenton Date: Mon, 29 Sep 2014 08:17:34 +0100 Subject: [PATCH 1/6] Create chart.d.ts --- chartjs/chart.d.ts | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 chartjs/chart.d.ts diff --git a/chartjs/chart.d.ts b/chartjs/chart.d.ts new file mode 100644 index 000000000..6fdfbacc8 --- /dev/null +++ b/chartjs/chart.d.ts @@ -0,0 +1,46 @@ +// Type definitions for Chart.js +// Project: https://github.com/nnnick/Chart.js +// Definitions by: Steve Fenton +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +interface ChartDataSet { + label: string; + fillColor: string; + strokeColor: string; + /* Line, Radar */ + pointColor?: string; + pointStrokeColor?: string; + pointHighlightFill?: string; + pointHighlightStroke?: string; + + /* Bar */ + highlightFill?: string; + highlightStroke?: string; + data: number[]; +} + +interface LinearChartData { + labels: string[]; + datasets: ChartDataSet[]; +} + +interface CircularChartData { + value: number; + color: string; + highlight: string; + label: string; +} + +interface Chart { + new (context: CanvasRenderingContext2D): Chart; + Line(data: LinearChartData, options?: {}); + Bar(data: LinearChartData, options?: {}); + Radar(data: LinearChartData, options?: {}); + + PolarArea(data: CircularChartData[], options?: {}); + Pie(data: CircularChartData[], options?: {}); + Doughnut(data: CircularChartData[], options?: {}); + +} + +declare var Chart: Chart; From 975a3b10b6d665366a53b3b7d8604219ab979411 Mon Sep 17 00:00:00 2001 From: Steve Fenton Date: Mon, 29 Sep 2014 08:18:39 +0100 Subject: [PATCH 2/6] Create chart-tests.ts --- chartjs/chart-tests.ts | 140 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 chartjs/chart-tests.ts diff --git a/chartjs/chart-tests.ts b/chartjs/chart-tests.ts new file mode 100644 index 000000000..585770334 --- /dev/null +++ b/chartjs/chart-tests.ts @@ -0,0 +1,140 @@ +var lineData: LinearChartData = { + labels: ['03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00'], + datasets: [ + { + label: 'Accepted', + fillColor: 'rgba(220,220,220,0.2)', + strokeColor: 'rgba(220,220,220,1)', + pointColor: 'rgba(220,220,220,1)', + pointStrokeColor: '#fff', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(220,220,220,1)', + data: [65, 59, 80, 81, 56, 55, 40] + }, + { + label: 'Quarantined', + fillColor: 'rgba(151,187,205,0.2)', + strokeColor: 'rgba(151,187,205,1)', + pointColor: 'rgba(151,187,205,1)', + pointStrokeColor: '#fff', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(151,187,205,1)', + data: [28, 48, 40, 19, 86, 27, 90] + } + ] +}; + +var barData: LinearChartData = { + labels: ["January", "February", "March", "April", "May", "June", "July"], + datasets: [ + { + label: "My First dataset", + fillColor: "rgba(220,220,220,0.5)", + strokeColor: "rgba(220,220,220,0.8)", + highlightFill: "rgba(220,220,220,0.75)", + highlightStroke: "rgba(220,220,220,1)", + data: [65, 59, 80, 81, 56, 55, 40] + }, + { + label: "My Second dataset", + fillColor: "rgba(151,187,205,0.5)", + strokeColor: "rgba(151,187,205,0.8)", + highlightFill: "rgba(151,187,205,0.75)", + highlightStroke: "rgba(151,187,205,1)", + data: [28, 48, 40, 19, 86, 27, 90] + } + ] +}; + +var myBarChart = new Chart(ctx).Bar(barData); + +var radarData: LinearChartData = { + labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], + datasets: [ + { + label: "My First dataset", + fillColor: "rgba(220,220,220,0.2)", + strokeColor: "rgba(220,220,220,1)", + pointColor: "rgba(220,220,220,1)", + pointStrokeColor: "#fff", + pointHighlightFill: "#fff", + pointHighlightStroke: "rgba(220,220,220,1)", + data: [65, 59, 90, 81, 56, 55, 40] + }, + { + label: "My Second dataset", + fillColor: "rgba(151,187,205,0.2)", + strokeColor: "rgba(151,187,205,1)", + pointColor: "rgba(151,187,205,1)", + pointStrokeColor: "#fff", + pointHighlightFill: "#fff", + pointHighlightStroke: "rgba(151,187,205,1)", + data: [28, 48, 40, 19, 96, 27, 100] + } + ] +}; + +var myRadarChart = new Chart(ctx).Radar(radarData); + +var polarAreaData: CircularChartData[] = [ + { + value: 300, + color: "#F7464A", + highlight: "#FF5A5E", + label: "Red" + }, + { + value: 50, + color: "#46BFBD", + highlight: "#5AD3D1", + label: "Green" + }, + { + value: 100, + color: "#FDB45C", + highlight: "#FFC870", + label: "Yellow" + }, + { + value: 40, + color: "#949FB1", + highlight: "#A8B3C5", + label: "Grey" + }, + { + value: 120, + color: "#4D5360", + highlight: "#616774", + label: "Dark Grey" + } + +]; + +var myPolarAreaChart = new Chart(ctx).PolarArea(polarAreaData); + +var pieData: CircularChartData[] = [ + { + value: 300, + color: "#F7464A", + highlight: "#FF5A5E", + label: "Red" + }, + { + value: 50, + color: "#46BFBD", + highlight: "#5AD3D1", + label: "Green" + }, + { + value: 100, + color: "#FDB45C", + highlight: "#FFC870", + label: "Yellow" + } +]; + +// For a pie chart +var myPieChart = new Chart(ctx[0]).Pie(pieData); + +// And for a doughnut chart +var myDoughnutChart = new Chart(ctx[1]).Doughnut(pieData); From c3da47bb1faa7c83ed3ec3541f9db29ef5b7c0d6 Mon Sep 17 00:00:00 2001 From: Steve Fenton Date: Mon, 29 Sep 2014 10:03:33 +0100 Subject: [PATCH 3/6] Update chart.d.ts --- chartjs/chart.d.ts | 181 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 170 insertions(+), 11 deletions(-) diff --git a/chartjs/chart.d.ts b/chartjs/chart.d.ts index 6fdfbacc8..7364c6525 100644 --- a/chartjs/chart.d.ts +++ b/chartjs/chart.d.ts @@ -7,6 +7,7 @@ interface ChartDataSet { label: string; fillColor: string; strokeColor: string; + /* Line, Radar */ pointColor?: string; pointStrokeColor?: string; @@ -31,16 +32,174 @@ interface CircularChartData { label: string; } -interface Chart { - new (context: CanvasRenderingContext2D): Chart; - Line(data: LinearChartData, options?: {}); - Bar(data: LinearChartData, options?: {}); - Radar(data: LinearChartData, options?: {}); - - PolarArea(data: CircularChartData[], options?: {}); - Pie(data: CircularChartData[], options?: {}); - Doughnut(data: CircularChartData[], options?: {}); - +interface ChartSettings { + animation: boolean; + animationSteps: number; + animationEasing: string; + showScale: boolean; + scaleOverride: boolean; + scaleSteps: number; + scaleStepWidth: number; + scaleStartValue: number; + scaleLineColor: string; + scaleLineWidth: number; + scaleShowLabels: boolean; + scaleLabel: string; + scaleIntegersOnly: boolean; + scaleBeginAtZero: boolean; + scaleFontFamily: string; + scaleFontSize: number; + scaleFontStyle: string; + scaleFontColor: string; + responsive: boolean; + maintainAspectRatio: boolean; + showTooltips: boolean; + tooltipEvents: string[]; + tooltipFillColor: string; + tooltipFontFamily: string; + tooltipFontSize: number; + tooltipFontStyle: string; + tooltipFontColor: string; + tooltipTitleFontFamily: string; + tooltipTitleFontSize: number; + tooltipTitleFontStyle: string; + tooltipTitleFontColor: string; + tooltipYPadding: number; + tooltipXPadding: number; + tooltipCaretSize: number; + tooltipCornerRadius: number; + tooltipXOffset: number; + tooltipTemplate: string; + multiTooltipTemplate: string; + onAnimationProgress: () => any; + onAnimationComplete: () => any; } -declare var Chart: Chart; +interface ChartOptions { + scaleShowGridLines?: boolean; + scaleGridLineColor?: string; + scaleGridLineWidth?: number; + legendTemplate?: string; +} + +interface PointsAtEvent { + value: number; + label: string; + datasetLabel: string; + strokeColor: string; + fillColor: string; + highlightFill: string; + highlightStroke: string; + x: number; + y: number; +} + +interface ChartInstance { + clear: () => void; + stop: () => void; + resize: () => void; + destroy: () => void; + toBase64Image: () => string; + generateLegend: () => string; +} + +interface LinearInstance extends ChartInstance { + getPointsAtEvent: (event: Event) => PointsAtEvent[]; + update: () => void; + addData: (valuesArray: number[], label: string) => void; + removeData: () => void; +} + +interface CircularInstance extends ChartInstance { + getSegmentsAtEvent: (event: Event) => {}[]; + update: () => void; + addData: (valuesArray: CircularChartData[], index: number) => void; + removeData: (index: number) => void; +} + +interface LineChartOptions extends ChartOptions { + bezierCurve?: boolean; + bezierCurveTension?: number; + pointDot?: boolean; + pointDotRadius?: number; + pointDotStrokeWidth?: number; + pointHitDetectionRadius?: number; + datasetStroke?: boolean; + datasetStrokeWidth?: number; + datasetFill?: boolean; +} + +interface BarChartOptions extends ChartOptions { + scaleBeginAtZero?: boolean; + barShowStroke?: boolean; + barStrokeWidth?: number; + barValueSpacing?: number; + barDatasetSpacing?: number; +} + +interface RadarChartOptions { + scaleShowLine?: boolean; + angleShowLineOut?: boolean; + scaleShowLabels?: boolean; + scaleBeginAtZero?: boolean; + angleLineColor?: string; + angleLineWidth?: number; + pointLabelFontFamily?: string; + pointLabelFontStyle?: string; + pointLabelFontSize?: number; + pointLabelFontColor?: string; + pointDot?: boolean; + pointDotRadius?: number; + pointDotStrokeWidth?: number; + pointHitDetectionRadius?: number; + datasetStroke?: boolean; + datasetStrokeWidth?: number; + datasetFill?: boolean; + legendTemplate?: string; +} + +interface PolarAreaChartOptions { + scaleShowLabelBackdrop?: boolean; + scaleBackdropColor?: string; + scaleBeginAtZero?: boolean; + scaleBackdropPaddingY?: number; + scaleBackdropPaddingX?: number; + scaleShowLine?: boolean; + segmentShowStroke?: boolean; + segmentStrokeColor?: string; + segmentStrokeWidth?: number; + animationSteps?: number; + animationEasing?: string; + animateRotate?: boolean; + animateScale?: boolean; + legendTemplate?: string; +} + +interface PieChartOptions { + segmentShowStroke?: boolean; + segmentStrokeColor?: string; + segmentStrokeWidth?: number; + percentageInnerCutout?: number; + animationSteps?: number; + animationEasing?: string; + animateRotate?: boolean; + animateScale?: boolean; + legendTemplate?: string; +} + +interface Chart { + Line(data: LinearChartData, options?: LineChartOptions): LinearInstance; + Bar(data: LinearChartData, options?: BarChartOptions): LinearInstance; + Radar(data: LinearChartData, options?: RadarChartOptions): LinearInstance; + + PolarArea(data: CircularChartData[], options?: PolarAreaChartOptions): CircularInstance; + Pie(data: CircularChartData[], options?: PieChartOptions): CircularInstance; + Doughnut(data: CircularChartData[], options?: PieChartOptions): CircularInstance; +} + +declare var Chart: { + new (context: CanvasRenderingContext2D): Chart; + defaults: { + global: ChartSettings; + } +}; From a03690e46efc245e3cb85cfa2480f05a7759cca2 Mon Sep 17 00:00:00 2001 From: Steve Fenton Date: Mon, 29 Sep 2014 10:03:53 +0100 Subject: [PATCH 4/6] Update chart-tests.ts --- chartjs/chart-tests.ts | 210 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 205 insertions(+), 5 deletions(-) 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: "
    -legend\"><% for (var i=0; i
  • \"><%if(datasets[i].label){%><%=datasets[i].label%><%}%>
    • <%}%>
" +}); + +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: "
    -legend\"><% for (var i=0; i
  • \"><%if(datasets[i].label){%><%=datasets[i].label%><%}%>
    • <%}%>
" +}); + +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: "
    -legend\"><% for (var i=0; i
  • \"><%if(datasets[i].label){%><%=datasets[i].label%><%}%>
    • <%}%>
" +}); + +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: "
    -legend\"><% for (var i=0; i
  • \"><%if(segments[i].label){%><%=segments[i].label%><%}%>
    • <%}%>
" +}); + +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: "
    -legend\"><% for (var i=0; i
  • \"><%if(segments[i].label){%><%=segments[i].label%><%}%>
    • <%}%>
" +}); + +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: "
    -legend\"><% for (var i=0; i
  • \"><%if(segments[i].label){%><%=segments[i].label%><%}%>
    • <%}%>
" +}); + +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(); From 8da8bce0b120440a080842e5d4289eed120499ef Mon Sep 17 00:00:00 2001 From: Steve Fenton Date: Mon, 29 Sep 2014 10:07:57 +0100 Subject: [PATCH 5/6] Update chart-tests.ts --- chartjs/chart-tests.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/chartjs/chart-tests.ts b/chartjs/chart-tests.ts index 58dead8f9..79a2692c2 100644 --- a/chartjs/chart-tests.ts +++ b/chartjs/chart-tests.ts @@ -1,5 +1,7 @@ /// +var ctx = canvas.getContext('2d'); + Chart.defaults.global = { animation: true, animationSteps: 60, @@ -284,7 +286,7 @@ var pieData: CircularChartData[] = [ ]; // For a pie chart -var myPieChart = new Chart(ctx[0]).Pie(pieData, { +var myPieChart = new Chart(ctx).Pie(pieData, { segmentShowStroke: true, segmentStrokeColor: "#fff", segmentStrokeWidth: 2, @@ -312,7 +314,7 @@ myPieChart.stop(); myPieChart.destroy(); // And for a doughnut chart -var myDoughnutChart = new Chart(ctx[1]).Doughnut(pieData, { +var myDoughnutChart = new Chart(ctx).Doughnut(pieData, { segmentShowStroke: true, segmentStrokeColor: "#fff", segmentStrokeWidth: 2, From ad1e185b4c4ea3c122f918f66e604dd91e44c926 Mon Sep 17 00:00:00 2001 From: Steve Fenton Date: Mon, 29 Sep 2014 10:10:51 +0100 Subject: [PATCH 6/6] Update chart-tests.ts --- chartjs/chart-tests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/chartjs/chart-tests.ts b/chartjs/chart-tests.ts index 79a2692c2..2374b6228 100644 --- a/chartjs/chart-tests.ts +++ b/chartjs/chart-tests.ts @@ -1,5 +1,6 @@ /// +var canvas = document.getElementById('example-chart'); var ctx = canvas.getContext('2d'); Chart.defaults.global = {