google-chart
google-chart copied to clipboard
Should better support and expose Data features
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>