mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-23 12:56:46 +08:00
Completed most of the charts and added tests
This commit is contained in:
Georgie
@@ -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);
|
||||
}
|
||||
593
google.visualization/google.visualization.d.ts
vendored
593
google.visualization/google.visualization.d.ts
vendored
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user