diff --git a/google.visualization/google.visualization-tests.ts b/google.visualization/google.visualization-tests.ts index 0f0082816..76dbd40a8 100644 --- a/google.visualization/google.visualization-tests.ts +++ b/google.visualization/google.visualization-tests.ts @@ -37,5 +37,309 @@ function test_dataTableAddRow() { dataTable.addRow(['row3', 0]); } +function test_geoChart() { + var data = google.visualization.arrayToDataTable([ + ['Country', 'Population', 'Area Percentage'], + ['France', 65700000, 50], + ['Germany', 81890000, 27], + ['Poland', 38540000, 23], + ]); + var options = { + sizeAxis: { minValue: 0, maxValue: 100 }, + region: '155', // Western Europe + displayMode: 'markers', + colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue + }; + var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); + chart.draw(data, options); +} + +function test_scatterChart() { + var data = google.visualization.arrayToDataTable([ + ['Age', 'Weight'], + [ 8, 12], + [ 4, 5.5], + [ 11, 14], + [ 4, 5], + [ 3, 3.5], + [ 6.5, 7] + ]); + + var options = { + title: 'Age vs. Weight comparison', + hAxis: {title: 'Age', minValue: 0, maxValue: 15}, + vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, + legend: 'none' + }; + + var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); + chart.draw(data, options); +} + +function test_barChart() { + var data = google.visualization.arrayToDataTable([ + ["Element", "Density", { role: "style" } ], + ["Copper", 8.94, "#b87333"], + ["Silver", 10.49, "silver"], + ["Gold", 19.30, "gold"], + ["Platinum", 21.45, "color: #e5e4e2"], + ]); + + var view = new google.visualization.DataView(data); + view.setColumns([0, 1, + { calc: "stringify", + sourceColumn: 1, + type: "string", + role: "annotation" }, + 2]); + + var options = { + title: "Density of Precious Metals, in g/cm^3", + width: 600, + height: 400, + bar: {groupWidth: "95%"}, + legend: { position: "none" } + }; + var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); + chart.draw(view, options); +} + +function test_histogram() { + var data = google.visualization.arrayToDataTable([ + ['Dinosaur', 'Length'], + ['Acrocanthosaurus (top-spined lizard)', 12.2], + ['Albertosaurus (Alberta lizard)', 9.1], + ['Allosaurus (other lizard)', 12.2], + ['Apatosaurus (deceptive lizard)', 22.9], + ['Archaeopteryx (ancient wing)', 0.9], + ['Argentinosaurus (Argentina lizard)', 36.6], + ['Baryonyx (heavy claws)', 9.1], + ['Brachiosaurus (arm lizard)', 30.5], + ['Ceratosaurus (horned lizard)', 6.1], + ['Coelophysis (hollow form)', 2.7], + ['Compsognathus (elegant jaw)', 0.9], + ['Deinonychus (terrible claw)', 2.7], + ['Diplodocus (double beam)', 27.1], + ['Dromicelomimus (emu mimic)', 3.4], + ['Gallimimus (fowl mimic)', 5.5], + ['Mamenchisaurus (Mamenchi lizard)', 21.0], + ['Megalosaurus (big lizard)', 7.9], + ['Microvenator (small hunter)', 1.2], + ['Ornithomimus (bird mimic)', 4.6], + ['Oviraptor (egg robber)', 1.5], + ['Plateosaurus (flat lizard)', 7.9], + ['Sauronithoides (narrow-clawed lizard)', 2.0], + ['Seismosaurus (tremor lizard)', 45.7], + ['Spinosaurus (spiny lizard)', 12.2], + ['Supersaurus (super lizard)', 30.5], + ['Tyrannosaurus (tyrant lizard)', 15.2], + ['Ultrasaurus (ultra lizard)', 30.5], + ['Velociraptor (swift robber)', 1.8]]); + + var options = { + title: 'Lengths of dinosaurs, in meters', + legend: { position: 'none' } + }; + + var chart = new google.visualization.Histogram(document.getElementById('chart_div')); + chart.draw(data, options); +} + +function test_areaChart() { + var data = google.visualization.arrayToDataTable([ + ['Year', 'Sales', 'Expenses'], + ['2013', 1000, 400], + ['2014', 1170, 460], + ['2015', 660, 1120], + ['2016', 1030, 540] + ]); + + var options = { + title: 'Company Performance', + hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, + vAxis: {minValue: 0} + }; + + var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); + chart.draw(data, options); +} + +function test_steppedAreaChart() { + var data = google.visualization.arrayToDataTable([ + ['Director (Year)', 'Rotten Tomatoes', 'IMDB'], + ['Alfred Hitchcock (1935)', 8.4, 7.9], + ['Ralph Thomas (1959)', 6.9, 6.5], + ['Don Sharp (1978)', 6.5, 6.4], + ['James Hawes (2008)', 4.4, 6.2] + ]); + + var options = { + title: 'The decline of \'The 39 Steps\'', + vAxis: {title: 'Accumulated Rating'}, + isStacked: true + }; + + var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div')); + chart.draw(data, options); +} + +function test_lineChart() { + var data = google.visualization.arrayToDataTable([ + ['Year', 'Sales', 'Expenses'], + ['2004', 1000, 400], + ['2005', 1170, 460], + ['2006', 660, 1120], + ['2007', 1030, 540] + ]); + + var options = { + title: 'Company Performance' + }; + + var chart = new google.visualization.LineChart(document.getElementById('chart_div')); + chart.draw(data, options); +} + +function test_pieChart() { + var data = google.visualization.arrayToDataTable([ + ['Task', 'Hours per Day'], + ['Work', 11], + ['Eat', 2], + ['Commute', 2], + ['Watch TV', 2], + ['Sleep', 7] + ]); + + var options = { + title: 'My Daily Activities' + }; + + var chart = new google.visualization.PieChart(document.getElementById('piechart')); + chart.draw(data, options); +} + +function test_bubbleChart() { + var data = google.visualization.arrayToDataTable([ + ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], + ['CAN', 80.66, 1.67, 'North America', 33739900], + ['DEU', 79.84, 1.36, 'Europe', 81902307], + ['DNK', 78.6, 1.84, 'Europe', 5523095], + ['EGY', 72.73, 2.78, 'Middle East', 79716203], + ['GBR', 80.05, 2, 'Europe', 61801570], + ['IRN', 72.49, 1.7, 'Middle East', 73137148], + ['IRQ', 68.09, 4.77, 'Middle East', 31090763], + ['ISR', 81.55, 2.96, 'Middle East', 7485600], + ['RUS', 68.6, 1.54, 'Europe', 141850000], + ['USA', 78.09, 2.05, 'North America', 307007000] + ]); + + var options = { + title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)', + hAxis: {title: 'Life Expectancy'}, + vAxis: {title: 'Fertility Rate'}, + bubble: {textStyle: {fontSize: 11}} + }; + + var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); + chart.draw(data, options); +} + +function test_treemap() { + // Create and populate the data table. + var data = google.visualization.arrayToDataTable([ + ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'], + ['Global', null, 0, 0], + ['America', 'Global', 0, 0], + ['Europe', 'Global', 0, 0], + ['Asia', 'Global', 0, 0], + ['Australia', 'Global', 0, 0], + ['Africa', 'Global', 0, 0], + ['Brazil', 'America', 11, 10], + ['USA', 'America', 52, 31], + ['Mexico', 'America', 24, 12], + ['Canada', 'America', 16, -23], + ['France', 'Europe', 42, -11], + ['Germany', 'Europe', 31, -2], + ['Sweden', 'Europe', 22, -13], + ['Italy', 'Europe', 17, 4], + ['UK', 'Europe', 21, -5], + ['China', 'Asia', 36, 4], + ['Japan', 'Asia', 20, -12], + ['India', 'Asia', 40, 63], + ['Laos', 'Asia', 4, 34], + ['Mongolia', 'Asia', 1, -5], + ['Israel', 'Asia', 12, 24], + ['Iran', 'Asia', 18, 13], + ['Pakistan', 'Asia', 11, -52], + ['Egypt', 'Africa', 21, 0], + ['S. Africa', 'Africa', 30, 43], + ['Sudan', 'Africa', 12, 2], + ['Congo', 'Africa', 10, 12], + ['Zaire', 'Africa', 8, 10] + ]); + + // Create and draw the visualization. + var tree = new google.visualization.TreeMap(document.getElementById('chart_div')); + tree.draw(data, { + minColor: '#f00', + midColor: '#ddd', + maxColor: '#0d0', + headerHeight: 15, + fontColor: 'black', + showScale: true}); +} + +function test_table() { + var data = new google.visualization.DataTable(); + data.addColumn('string', 'Name'); + data.addColumn('number', 'Salary'); + data.addColumn('boolean', 'Full Time Employee'); + data.addRows([ + ['Mike', {v: 10000, f: '$10,000'}, true], + ['Jim', {v:8000, f: '$8,000'}, false], + ['Alice', {v: 12500, f: '$12,500'}, true], + ['Bob', {v: 7000, f: '$7,000'}, true] + ]); + + var table = new google.visualization.Table(document.getElementById('table_div')); + table.draw(data, {showRowNumber: true}); +} + +function test_timeline() { + var container = document.getElementById('example1'); + + var chart = new google.visualization.Timeline(container); + + var dataTable = new google.visualization.DataTable(); + + dataTable.addColumn({ type: 'string', id: 'President' }); + dataTable.addColumn({ type: 'date', id: 'Start' }); + dataTable.addColumn({ type: 'date', id: 'End' }); + + dataTable.addRows([ + [ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ], + [ 'Adams', new Date(1797, 2, 3), new Date(1801, 2, 3) ], + [ 'Jefferson', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]); + + chart.draw(dataTable); +} + +function test_candlestickChart() { + var data = google.visualization.arrayToDataTable([ + ['Mon', 20, 28, 38, 45], + ['Tue', 31, 38, 55, 66], + ['Wed', 50, 55, 77, 80], + ['Thu', 77, 77, 66, 50], + ['Fri', 68, 66, 22, 15] + // Treat first row as data as well. + ], true); + + var options = { + legend:'none' + }; + + var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); + chart.draw(data, options); +} \ No newline at end of file diff --git a/google.visualization/google.visualization.d.ts b/google.visualization/google.visualization.d.ts index 553c8e654..62b2a72d1 100644 --- a/google.visualization/google.visualization.d.ts +++ b/google.visualization/google.visualization.d.ts @@ -130,7 +130,7 @@ declare module google { maxValue?: any; } - function arrayToDataTable(data: any[]): DataTable; + function arrayToDataTable(data: any[], firstRowIsData?: boolean): DataTable; //#endregion //#region DataView @@ -139,27 +139,21 @@ declare module google { export class DataView { constructor(data: DataTable); constructor(data: DataView); - setColumns(columnIndexes: number[]): void; + setColumns(columnIndexes: any[]): void; } //#endregion //#region GeoChart //https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart - export class GeoChart { - constructor(element: Element); - - // https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=fr&csw=1#Methods + export class GeoChart extends ChartBase { draw(data: DataTable, options: GeoChartOptions): void; - getSelection(): GeoChartSelection[]; - setSelection(selection: VisualizationSelectionArray[]): void; - clearChart(): void; } // https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=fr&csw=1#Configuration_Options export interface GeoChartOptions { backgroundColor?: any; - colorAxis?: GeoChartColorAxis; + colorAxis?: ChartColorAxis; datalessRegionColor?: string; displayMode?: string; enableRegionInteractivity?: boolean; @@ -180,12 +174,6 @@ declare module google { minSize?: number; minValue?: number; } - export interface GeoChartColorAxis extends GeoChartAxis { - minValue?: number; - maxValue?: number; - values?: number[]; - colors?: string[]; - } export interface GeoChartTextStyle { color?: string; fontName?: string; @@ -215,6 +203,67 @@ declare module google { //#endregion //#region Common + export interface ChartAnnotations { + boxStyle?: ChartBoxStyle; + textStyle?: ChartTextStyle; + } + + export interface ChartBoxStyle { + stroke?: string; + strokeWidth?: number; + rx?: number; + ry?: number; + gradient?: { + color1: string; + color2: string; + x1: string; + y1: string; + x2: string; + y2: string; + useObjectBoundingBoxUnits?: boolean; + } + } + + export interface ChartTextStyle { + fontName?: string; + fontSize?: number; + bold?: boolean; + italic?: boolean; + color?: string; + auraColor?: string; + opacity?: number; + } + + export interface ChartCrosshair { + color?: string; + focused?: { + color?: string; + opacity?: number; + } + opacity?: number; + orientation?: string; + selected?: { + color?: string; + opacity?: number; + } + trigger?: string; + } + + export interface ChartExplorer { + actions?: string[]; + axis?: string; + keepInBounds?: boolean; + maxZoomIn?: number; + maxZoomOut?: number; + zoomDelta?: number; + } + + export interface ChartStroke { + stroke: string; + strokeWidth: number; + fill: string; + } + export interface ChartArea { top: any; left: any; @@ -222,14 +271,6 @@ declare module google { height: any; } - export interface ChartTextStyle { - color?: string; - fontName?: string; - fontSize?: number; - bold?: boolean; - italic?: boolean; - } - export interface ChartLegend { alignment?: string; maxLines?: number; @@ -298,6 +339,14 @@ declare module google { height: number; } + export interface ChartColorAxis { + minValue?: number; + maxValue?: number; + values?: number[]; + colors?: string[]; + legend?: ChartLegend; + } + export interface ChartLayoutInterface { getBoundingBox(id: string): ChartBoundingBox; getChartAreaBoundingBox(): ChartBoundingBox; @@ -307,34 +356,91 @@ declare module google { getYLocation(position: number, axisIndex?: number): number; } + export interface GroupWidth { + groupWidth: any; // number | string + } + export interface VisualizationSelectionArray { column?: number; row?: number; } + class ChartBase { + constructor(element: Element); + getSelection(): any[]; + setSelection(selection: any[]): void; + clearChart(): void; + getImageURI(): string; + } + + class CoreChartBase extends ChartBase { + getBoundingBox(id: string): ChartBoundingBox; + getChartAreaBoundingBox(): ChartBoundingBox; + getChartLayoutInterface(): ChartLayoutInterface; + getHAxisValue(position: number, axisIndex?: number): number; + getVAxisValue(position: number, axisIndex?: number): number; + getXLocation(position: number, axisIndex?: number): number; + getYLocation(position: number, axisIndex?: number): number; + } + + //#endregion + //#region ScatterChart + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart + export class ScatterChart extends CoreChartBase { + draw(data: DataTable, options?: ScatterChartOptions): void; + draw(data: DataView, options?: ScatterChartOptions): void; + } + + export interface ScatterChartOptions { + aggregationTarget?: string; + animation?: TransitionAnimation; + annotations?: ChartAnnotations; + axisTitlesPosition?: string; // in, out, none + backgroundColor?: any; + chartArea?: ChartArea; + colors?: string[]; + crosshair?: ChartCrosshair; + curveType?: string; + dataOpacity?: number; + enableInteractivity?: boolean; + explorer?: ChartExplorer; + fontSize?: number; + fontName?: string; + forceIFrame?: boolean; + hAxis?: ChartAxis; + height?: number; + legend?: ChartLegend; + lineWidth?: number; + pointSize?: number; + selectionMode?: string; + series?: any; + theme?: string; + title?: string; + titlePosition?: string; + titleTextStyle?: ChartTextStyle; + tooltip?: ChartTooltip; + vAxis?: ChartAxis; + width?: number; + } + //#endregion //#region ColumnChart // https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart - export class ColumnChart { - constructor(element: Element); - - // https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#Methods - draw(data: DataTable, options?: ColumnChartOptions): void; - draw(data: DataView, options?: ColumnChartOptions): void; - getChartLayoutInterface(): ChartLayoutInterface; - getSelection(): any[]; - setSelection(selection: any[]): void; - clearChart(): void; + export class ColumnChart extends CoreChartBase { + draw(data: DataTable, options: ColumnChartOptions): void; + draw(data: DataView, options: ColumnChartOptions): void; } // https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#Configuration_Options export interface ColumnChartOptions { aggregationTarget?: string; animation?: TransitionAnimation; + annotations?: ChartAnnotations; axisTitlesPosition?: string; // in, out, none backgroundColor?: any; - bar?: ColumnChartBarOptions; + bar?: GroupWidth; chartArea?: ChartArea; colors?: string[]; enableInteractivity?: boolean; @@ -358,36 +464,29 @@ declare module google { width?: number; } - export interface ColumnChartBarOptions { - groupWidth: any; - } - //#endregion //#region LineChart // https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart - export class LineChart { - constructor(element: Element); - - // https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#Methods - draw(data: DataTable, options: any): void; - draw(data: DataView, options: any): void; - getChartLayoutInterface(): ChartLayoutInterface; - getSelection(): any[]; - setSelection(selection: any[]): void; - clearChart(): void; + export class LineChart extends CoreChartBase { + draw(data: DataTable, options: LineChartOptions): void; + draw(data: DataView, options: LineChartOptions): void; } // https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#Configuration_Options export interface LineChartOptions { aggregationTarget?: string; animation?: TransitionAnimation; + annotations?: ChartAnnotations; axisTitlesPosition?: string; backgroundColor?: any; chartArea?: ChartArea; colors?: string[]; + crosshair?: ChartCrosshair; curveType?: string; + dataOpacity?: number; enableInteractivity?: boolean; + explorer?: ChartExplorer; focusTarget?: string; fontSize?: number; fontName?: string; @@ -396,6 +495,7 @@ declare module google { interpolateNulls?: boolean; legend?: ChartLegend; lineWidth?: number; + orientation?: string; pointSize?: number; reverseCategories?: boolean; selectionMode?: string // single / multiple @@ -417,9 +517,10 @@ declare module google { export interface BarChartOptions { aggregationTarget?: string; animation?: TransitionAnimation; + annotations?: ChartAnnotations; axisTitlesPosition?: string; // in, out, none backgroundColor?: any; - bar?: ColumnChartBarOptions; + bar?: GroupWidth; chartArea?: ChartArea; colors?: string[]; dataOpacity?: number; @@ -427,6 +528,7 @@ declare module google { focusTarget?: string; fontSize?: number; fontName?: string; + hAxes?: any; hAxis?: ChartAxis; height?: number; isStacked?: boolean; @@ -444,21 +546,388 @@ declare module google { } // https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart - export class BarChart { - constructor(element: Element); + export class BarChart extends CoreChartBase { draw(data: DataTable, options: BarChartOptions): void; draw(data: DataView, options: BarChartOptions): void; - getBoundingBox(id: string): ChartBoundingBox; - getChartAreaBoundingBox(): ChartBoundingBox; - getChartLayoutInterface(): ChartLayoutInterface; - getHAxisValue(position: number, axisIndex?: number): number; - getVAxisValue(position: number, axisIndex?: number): number; - getXLocation(position: number, axisIndex?: number): number; - getYLocation(position: number, axisIndex?: number): number; - getSelection(): any[]; - setSelection(selection: any[]): void; - clearChart(): void; + } + //#endregion + //#region Histogram + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/histogram + export class Histogram extends CoreChartBase { + draw(data: DataTable, options: HistogramOptions): void; + draw(data: DataView, options: HistogramOptions): void; + } + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/histogram#Configuration_Options + export interface HistogramOptions { + animation?: TransitionAnimation; + axisTitlesPosition?: string; // in, out, none + backgroundColor?: any; + bar?: GroupWidth; + chartArea?: ChartArea; + colors?: string[]; + dataOpacity?: number; + enableInteractivity?: boolean; + focusTarget?: string; + fontSize?: number; + fontName?: string; + hAxis?: ChartAxis; + histogram?: HistogramHistogramOptions; + height?: number; + interpolateNulls?: boolean; + isStacked?: boolean; + legend?: ChartLegend; + orientation?: string; + reverseCategories?: boolean; + series?: any; + theme?: string; + title?: string; + titlePosition?: string; + titleTextStyle?: ChartTextStyle; + tooltip?: ChartTooltip; + vAxes?: any; + vAxis?: ChartAxis; + width?: number; + } + + export interface HistogramHistogramOptions { + bucketSize?: number; + hideBucketItems?: boolean; + lastBucketPercentile?: number; + } + + //#endregion + //#region AreaChart + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/areachart + export class AreaChart extends CoreChartBase { + draw(data: DataTable, options: AreaChartOptions): void; + draw(data: DataView, options: AreaChartOptions): void; + } + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/areachart#Configuration_Options + export interface AreaChartOptions { + aggregationTarget?: string; + animation?: TransitionAnimation; + areaOpacity?: number; + axisTitlesPosition?: string; + backgroundColor?: any; + chartArea?: ChartArea; + colors?: string[]; + crosshair?: ChartCrosshair; + dataOpacity?: number; + enableInteractivity?: boolean; + explorer?: ChartExplorer; + focusTarget?: string; + fontSize?: number; + fontName?: string; + hAxis?: ChartAxis; + height?: number; + interpolateNulls?: boolean; + isStacked?: boolean; + legend?: ChartLegend; + lineWidth?: number; + orientation?: string; + pointSize?: number; + reverseCategories?: boolean; + selectionMode?: string // single / multiple + series?: any; + theme?: string; + title?: string; + titlePosition?: string; + titleTextStyle?: ChartTextStyle; + tooltip?: ChartTooltip; + vAxes?: any; + vAxis?: ChartAxis; + width?: number; + } + + //#endregion + //#region SteppedAreaChart + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/areachart + export class SteppedAreaChart extends CoreChartBase { + draw(data: DataTable, options: SteppedAreaChartOptions): void; + draw(data: DataView, options: SteppedAreaChartOptions): void; + } + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/areachart#Configuration_Options + export interface SteppedAreaChartOptions { + aggregationTarget?: string; + animation?: TransitionAnimation; + areaOpacity?: number; + axisTitlesPosition?: string; + backgroundColor?: any; + chartArea?: ChartArea; + colors?: string[]; + connectSteps?: boolean; + enableInteractivity?: boolean; + focusTarget?: string; + fontSize?: number; + fontName?: string; + hAxis?: ChartAxis; + height?: number; + interpolateNulls?: boolean; + isStacked?: boolean; + legend?: ChartLegend; + reverseCategories?: boolean; + selectionMode?: string // single / multiple + series?: any; + theme?: string; + title?: string; + titlePosition?: string; + titleTextStyle?: ChartTextStyle; + tooltip?: ChartTooltip; + vAxes?: any; + vAxis?: ChartAxis; + width?: number; + } + + //#endregion + //#region PieChart + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart + export class PieChart extends CoreChartBase { + draw(data: DataTable, options: PieChartOptions): void; + draw(data: DataView, options: PieChartOptions): void; + } + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#Configuration_Options + export interface PieChartOptions { + backgroundColor?: any; + chartArea?: ChartArea; + colors?: string[]; + enableInteractivity?: boolean; + fontSize?: number; + fontName?: string; + height?: number; + is3D?: boolean; + legend?: ChartLegend; + pieHole?: number; + pieSliceBorderColor?: string; + pieSliceText?: string; + pieSliceTextStyle?: ChartTextStyle; + pieStartAngle?: number; + reverseCategories?: boolean; + pieResidueSliceColor?: string; + pieResidueSliceLabel?: string; + slices?: any; + sliceVisibilityThreshold?: number; + title?: string; + titleTextStyle?: ChartTextStyle; + tooltip?: ChartTooltip; + width?: number; + } + + //#endregion + //#region BubbleChart + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart + export class BubbleChart extends CoreChartBase { + draw(data: DataTable, options?: BubbleChartOptions): void; + draw(data: DataView, options?: BubbleChartOptions): void; + } + + export interface BubbleChartOptions { + animation?: TransitionAnimation; + axisTitlesPosition?: string; // in, out, none + backgroundColor?: any; + bubble?: ChartBubble; + chartArea?: ChartArea; + colors?: string[]; + colorAxis?: ChartColorAxis; + enableInteractivity?: boolean; + explorer?: ChartExplorer; + fontSize?: number; + fontName?: string; + forceIFrame?: boolean; + hAxis?: ChartAxis; + height?: number; + legend?: ChartLegend; + selectionMode?: string; + series?: any; + sizeAxis?: ChartSizeAxis; + sortBubblesBySize?: boolean; + theme?: string; + title?: string; + titlePosition?: string; + titleTextStyle?: ChartTextStyle; + tooltip?: ChartTooltip; + vAxis?: ChartAxis; + width?: number; + } + + export interface ChartBubble { + opacity?: number; + stroke?: string; + textStyle?: ChartTextStyle; + } + + export interface ChartSizeAxis { + maxSize: number; + maxValue: number; + minSize: number; + minValue: number; + } + + //#endregion + //#region TreeMap + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/treemap + export class TreeMap extends ChartBase { + draw(data: DataTable, options?: TreeMapOptions): void; + draw(data: DataView, options?: TreeMapOptions): void; + goUpAndDraw(): void; + getMaxPossibleDepth(): number; + } + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/treemap#Configuration_Options + export interface TreeMapOptions { + fontColor?: string; + fontFamily?: string; + fontSize?: number; + forceIFrame?: boolean; + headerColor?: string; + headerHeight?: number; + headerHighlightColor?: string; + hintOpacity?: number; + maxColor?: string; + maxDepth?: number; + maxHighlightColor?: string; + maxPostDepth?: number; + maxColorValue?: number; + midColor?: string; + midHighlightColor?: string; + minColor?: string; + minHighlightColor?: string; + minColorValue?: number; + showScale?: boolean; + showTooltips?: boolean; + textStyle?: ChartTextStyle; + title?: string; + titleTextStyle?: ChartTextStyle; + useWeightedAverageForAggregation?: boolean; + } + + //#endregion + //#region Table + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/table + export class Table extends ChartBase { + draw(data: DataTable, options?: TableOptions): void; + draw(data: DataView, options?: TableOptions): void; + } + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/table#Configuration_Options + export interface TableOptions { + allowHtml?: boolean; + alternatingRowStyle?: boolean; + cssClassName?: CssClassNames; + firstRowNumber?: number; + height?: string; + page?: string; + pageSize?: number; + rtlTable?: boolean; + scrollLeftStartPosition?: number; + showRowNumber?: boolean; + sort?: string; + sortAscending?: boolean; + sortColumn?: number; + startPage?: number; + width?: string; + } + + export interface CssClassNames { + headerRow?: string; + tableRow?: string; + oddTableRow?: string; + selectedTableRow?: string; + hoverTableRow?: string; + headerCell?: string; + tableCell?: string; + rowNumberCell?: string; + } + + //#endregion + //#region Timeline + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline + export class Timeline { + constructor(element: Element); + draw(data: DataTable, options?: TimelineOptions): void; + draw(data: DataView, options?: TimelineOptions): void; + clearChart(): void; + } + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#Configuration_Options + export interface TimelineOptions { + avoidOverlappingGridLines?: boolean; + backgroundColor?: string; + colors?: string[]; + enableInteractivity?: boolean; + forceIFrame?: boolean; + height?: number; + timeline?: { + barLabelStyle?: LabelStyle; + colorByRowLabel?: boolean; + groupByRowLabel?: boolean; + rowLabelStyle?: LabelStyle; + showRowLabels?: boolean; + singleColor?: string; + } + width?: number; + } + + export interface LabelStyle { + color: string; + fontName: string; + fontSize: string; + } + + //#endregion + //#region CandlestickChart + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart + export class CandlestickChart extends CoreChartBase { + draw(data: DataTable, options: CandlestickChartOptions): void; + draw(data: DataView, options: CandlestickChartOptions): void; + } + + // https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart#Configuration_Options + export interface CandlestickChartOptions { + aggregationTarget?: string; + animation?: TransitionAnimation; + axisTitlesPosition?: string; + backgroundColor?: any; + bar?: GroupWidth; + candlestick?: { + hollowIsRising?: boolean; + fallingColor?: ChartStroke; + risingColor?: ChartStroke; + } + chartArea?: ChartArea; + colors?: string[]; + enableInteractivity?: boolean; + focusTarget?: string; + fontSize?: number; + fontName?: string; + hAxis?: ChartAxis; + height?: number; + legend?: ChartLegend; + orientation?: string; + reverseCategories?: boolean; + selectionMode?: string // single / multiple + series?: any; + theme?: string; + title?: string; + titlePosition?: string; + titleTextStyle?: ChartTextStyle; + tooltip?: ChartTooltip; + vAxes?: any; + vAxis?: ChartAxis; + width?: number; } //#endregion