google-chart icon indicating copy to clipboard operation
google-chart copied to clipboard

Should better support and expose Data features

Open wesalvaro opened this issue 8 years ago • 0 comments

Some ideas below...

google-chart-data.output is a google.visualization.DataView google-chart-data.input is a URL, DataTable format object, or DataTable object.

This google-chart-data element is created inside the google-chart element to work with today's approach.

Example with current data (in addition to current approach)

<google-chart-data input="[[myData]]" output="{{output}}"></google-chart-data>
<google-chart data="[[output]]"></google-chart>

Example with rows and columns DataTable format objects

<google-chart-data
    rows="[[myRows]]"
    cols="[[myCols]]"
    output="{{output}}"></google-chart-data>
<google-chart data="[[output]]"></google-chart>

Example with new data features

Some google-chart-format elements may be nested to format the columns of the chart. Passing selection back into the google-chart-data element will set the value attribute with the selected rows from the DataTable. The show-rows and show-cols attributes can be calculated from the input data.

<google-chart-data
    input="[[myData]]"
    output="{{output}}"
    selection="[[selection]]"
    value="{{value}}"
    show-rows="[[rowsToShowArray]]"
    show-cols="[[colsToShowArray]]">
  <google-chart-format
      type="number" col="3" options="[[changeColumnOptions]]"></google-chart-format>
  <google-chart-format
      type="string" col="4" options="[[nameColumnOptions]]"></google-chart-format>
</google-chart-data>
<google-chart data="[[output]]" selection="{{selection}}"></google-chart>

Example with Query

The resulting DataTable from a google-chart-query may be directly passed into a google-chart or can be manipulated via an intermediate google-chart-data element.

<google-chart-query
    href="/data"
    table="{{dataTable}}"
    params="[[params]]"
    refresh="300"></google-chart-query>
<google-chart data="[[dataTable]]"></google-chart>
<google-chart-data input="[[dataTable]]" output="{{output}}">
  <google-chart-format
      type="number" col="3" options="[[changeColumnOptions]]"></google-chart-format>
</google-chart-data>
<google-chart data="[[output]]"></google-chart>

wesalvaro avatar Sep 06 '16 05:09 wesalvaro