| Index: packages/charted/examples/charts/renderers/demo_cartesian_renderers.dart
|
| diff --git a/packages/charted/examples/charts/renderers/demo_cartesian_renderers.dart b/packages/charted/examples/charts/renderers/demo_cartesian_renderers.dart
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..e027d5b34d379bf4cf645ac6846b03bfd75fe551
|
| --- /dev/null
|
| +++ b/packages/charted/examples/charts/renderers/demo_cartesian_renderers.dart
|
| @@ -0,0 +1,210 @@
|
| +/*
|
| + * Copyright 2014 Google Inc. All rights reserved.
|
| + *
|
| + * Use of this source code is governed by a BSD-style
|
| + * license that can be found in the LICENSE file or at
|
| + * https://developers.google.com/open-source/licenses/bsd
|
| + */
|
| +
|
| +library charted.demo.charts.cartesian_renderers;
|
| +
|
| +import 'dart:html';
|
| +import 'package:charted/core/text_metrics.dart' as tm;
|
| +import 'package:charted/charts/charts.dart';
|
| +
|
| +import '../demo_charts.dart';
|
| +
|
| +List<ChartDemo> charts = [];
|
| +
|
| +class ChartDemo {
|
| + final List<ChartBehavior> behaviors;
|
| + final ChartConfig config;
|
| + final ChartData data;
|
| + final bool useTwoDimensions;
|
| + final Element host;
|
| + final String title;
|
| + final bool isLayout;
|
| +
|
| + ChartArea area;
|
| +
|
| + ChartDemo(this.title, this.host, this.config, this.data,
|
| + { this.useTwoDimensions: false, this.behaviors: const [],
|
| + this.isLayout: false }) {
|
| + var wrapper = document.createElement('div')..className = "chart-wrapper",
|
| + titleWrap = document.createElement('div')
|
| + ..className = "chart-title-wrapper",
|
| + titleContainer = document.createElement('div')
|
| + ..className = 'chart-title'
|
| + ..text = title,
|
| + chartHostWrapper =
|
| + document.createElement('div')..className = "chart-host-wrapper",
|
| + chartAreaHost = document.createElement('div')
|
| + ..className = "chart-host"
|
| + ..attributes['dir'] = 'ltr',
|
| + chartLegendHost =
|
| + document.createElement('div')..className = "chart-legend-host",
|
| + state = new ChartState();
|
| +
|
| + titleWrap.append(titleContainer);
|
| + chartHostWrapper
|
| + ..append(chartAreaHost)
|
| + ..append(chartLegendHost);
|
| + wrapper
|
| + ..append(titleWrap)
|
| + ..append(chartHostWrapper);
|
| + host.append(wrapper);
|
| +
|
| + config.legend = new ChartLegend(chartLegendHost, showValues: isLayout);
|
| + area = isLayout
|
| + ? new LayoutArea(chartAreaHost, data, config, state: state)
|
| + : new CartesianArea(chartAreaHost, data, config,
|
| + autoUpdate: false, useTwoDimensionAxes: useTwoDimensions,
|
| + state: state);
|
| +
|
| + behaviors.forEach((behavior) {
|
| + area.addChartBehavior(behavior);
|
| + });
|
| +
|
| + area.addChartBehavior(new Hovercard(isMultiValue: true));
|
| + if (!isLayout) {
|
| + area.addChartBehavior(new AxisLabelTooltip());
|
| + }
|
| + }
|
| +
|
| + void setTheme(ChartTheme theme) {
|
| + area.theme = theme;
|
| + }
|
| +
|
| + void draw() => area.draw(preRender: data.rows.isEmpty);
|
| +}
|
| +
|
| +draw_charts() {
|
| + // Line chart
|
| + var line_series = new ChartSeries("one", [2, 3], new LineChartRenderer()),
|
| + line_config = new ChartConfig([line_series], [0]),
|
| + line_data = new ChartData(
|
| + ORDINAL_DATA_COLUMNS, ORDINAL_DATA),
|
| + line_demo = new ChartDemo('Line chart',
|
| + querySelector('.line-chart'), line_config, line_data);
|
| + charts.add(line_demo);
|
| +
|
| + // Bar chart
|
| + var bar_series = new ChartSeries("one", [2], new BarChartRenderer()),
|
| + bar_config = new ChartConfig([bar_series], [0]),
|
| + bar_data = new ChartData(
|
| + ORDINAL_DATA_COLUMNS, ORDINAL_DATA),
|
| + bar_demo = new ChartDemo('Bar chart',
|
| + querySelector('.bar-chart'), bar_config, bar_data);
|
| + charts.add(bar_demo);
|
| +
|
| + // Grouped bar chart
|
| + var grouped_bar_series =
|
| + new ChartSeries("one", [2, 3], new BarChartRenderer()),
|
| + grouped_bar_config = new ChartConfig([grouped_bar_series], [0]),
|
| + grouped_bar_data = new ChartData(
|
| + ORDINAL_DATA_COLUMNS, ORDINAL_DATA),
|
| + grouped_bar_demo = new ChartDemo('Group bar chart',
|
| + querySelector('.grouped-bar-chart'),
|
| + grouped_bar_config, grouped_bar_data);
|
| + charts.add(grouped_bar_demo);
|
| +
|
| + // Stacked bar chart
|
| + var stacked_series =
|
| + new ChartSeries("one", [2, 3], new StackedBarChartRenderer()),
|
| + stacked_config = new ChartConfig([stacked_series], [0]),
|
| + stacked_data = new ChartData(
|
| + ORDINAL_DATA_COLUMNS, ORDINAL_DATA),
|
| + stacked_demo = new ChartDemo('Stacked bar chart',
|
| + querySelector('.stacked-bar-chart'), stacked_config, stacked_data);
|
| + charts.add(stacked_demo);
|
| +
|
| + // Horizontal bar chart
|
| + var horiz_bar_series =
|
| + new ChartSeries("one", [2], new BarChartRenderer()),
|
| + horiz_bar_config = new ChartConfig([horiz_bar_series], [0])
|
| + ..isLeftAxisPrimary = true,
|
| + horiz_bar_data = new ChartData(
|
| + ORDINAL_DATA_COLUMNS, ORDINAL_DATA),
|
| + horiz_bar_demo = new ChartDemo('Horizontal bar chart',
|
| + querySelector('.horiz-bar-chart'), horiz_bar_config,
|
| + horiz_bar_data);
|
| + charts.add(horiz_bar_demo);
|
| +
|
| + // Horizontal grouped bar chart
|
| + var horiz_grouped_bar_series =
|
| + new ChartSeries("one", [2, 3], new BarChartRenderer()),
|
| + horiz_grouped_bar_config =
|
| + new ChartConfig([horiz_grouped_bar_series], [0])
|
| + ..isLeftAxisPrimary = true,
|
| + horiz_grouped_bar_data = new ChartData(
|
| + ORDINAL_DATA_COLUMNS, ORDINAL_DATA),
|
| + horiz_grouped_bar_demo = new ChartDemo('Horizontal group bar chart',
|
| + querySelector('.horiz-grouped-bar-chart'),
|
| + horiz_grouped_bar_config, horiz_grouped_bar_data);
|
| + charts.add(horiz_grouped_bar_demo);
|
| +
|
| + // Horizontal stacked bar chart
|
| + var horiz_stacked_series =
|
| + new ChartSeries("one", [2, 3], new StackedBarChartRenderer()),
|
| + horiz_stacked_config = new ChartConfig([horiz_stacked_series], [0])
|
| + ..isLeftAxisPrimary = true,
|
| + horiz_stacked_data = new ChartData(
|
| + ORDINAL_DATA_COLUMNS, ORDINAL_DATA),
|
| + horiz_stacked_demo = new ChartDemo('Horizontal stacked bar chart',
|
| + querySelector('.horiz-stacked-bar-chart'),
|
| + horiz_stacked_config, horiz_stacked_data);
|
| + charts.add(horiz_stacked_demo);
|
| +
|
| + // Combo chart
|
| + var combo_bar_series =
|
| + new ChartSeries("one", [2, 3], new BarChartRenderer()),
|
| + combo_line_series = new ChartSeries("two", [1], new LineChartRenderer()),
|
| + combo_config =
|
| + new ChartConfig([combo_bar_series, combo_line_series], [0]),
|
| + combo_data = new ChartData(
|
| + ORDINAL_DATA_COLUMNS, ORDINAL_DATA),
|
| + combo_demo = new ChartDemo('Combo chart - bar and line',
|
| + querySelector('.combo-chart'), combo_config, combo_data);
|
| + charts.add(combo_demo);
|
| +
|
| + // Combo chart
|
| + var combo2_bar_series =
|
| + new ChartSeries("one", [2, 3], new StackedBarChartRenderer()),
|
| + combo2_line_series = new ChartSeries("two", [1], new LineChartRenderer()),
|
| + combo2_config =
|
| + new ChartConfig([combo2_bar_series, combo2_line_series], [0]),
|
| + combo2_data = new ChartData(
|
| + ORDINAL_DATA_COLUMNS, ORDINAL_DATA),
|
| + combo2_demo = new ChartDemo('Combo chart - stacked and line',
|
| + querySelector('.combo2-chart'), combo2_config, combo2_data);
|
| + charts.add(combo2_demo);
|
| +
|
| + charts.forEach((ChartDemo x) => x.draw());
|
| +}
|
| +
|
| +main() {
|
| + new tm.TextMetrics(fontStyle: '14px Roboto');
|
| + draw_charts();
|
| +
|
| + Element chartsContainer = querySelector('.demos-container');
|
| + InputElement useRTLScriptCheckBox = querySelector('#rtl-use-script'),
|
| + switchAxesForRTLCheckBox = querySelector('#rtl-switch-axes'),
|
| + useRTLLayoutCheckBox = querySelector('#rtl-use-layout');
|
| +
|
| + useRTLLayoutCheckBox.onChange.listen((_) {
|
| + bool isRTL = useRTLLayoutCheckBox.checked;
|
| + charts.forEach((ChartDemo x) => x.config.isRTL = isRTL);
|
| + chartsContainer.attributes['dir'] = isRTL ? 'rtl' : 'ltr';
|
| + });
|
| +
|
| + useRTLScriptCheckBox.onChange.listen((_) {
|
| + bool isRTL = useRTLScriptCheckBox.checked;
|
| + Iterable DATA_SOURCE = isRTL
|
| + ? ORDINAL_DATA_RTL
|
| + : ORDINAL_DATA;
|
| + charts.forEach((ChartDemo x) {
|
| + x.area.data = new ChartData(ORDINAL_DATA_COLUMNS, DATA_SOURCE);
|
| + x.draw();
|
| + });
|
| + });
|
| +}
|
|
|