As a develop I want the data in the chart to change in response to other actions on the page

[dbouwman]

Generalized from #12

I zoomed the map to this area. While it is useful to use the popup to query parts of the map,
I really want the chart to instantly tell me something about the data using this map’s extent.

Example: in Urban Observatory, I see three population density maps side by side, but I really want to
know how many people are represented, in total, for each map’s extent

Pseudo code

//assumes we have a map object
var self = this;
Cedar.show(chartObj, function(chart){
  self.chart = chart;
});

map.on('zoom-end', function(evt){
  self.chart.query.bbox = Cedar.extentToBbox(map.extent);
  self.chart.update();
})

Cedar Impact

So, the first part of this would be to hold the mappings in the compiled chart vs actually replacing them in the template.

The second part would be to expose the query as part of the chart, and the ability to call .update(queryParams)

Chart Template Inputs

The inputs define the required

{
  "inputs": [
    {"name": "count", "type": ["numeric","string"], "required": true},
    {"name": "group", "type": ["string"], "required": false},
    {"name": "data", "type": ["url"], "required": true}
  ],
"datasources":[

 ],

...other properties...

}

Compiled Chart Inputs have values stored

{
  "inputs": [
    {"name": "count", "type": ["numeric","string"], "required": true, "value":"ZIP_CODE"},
    {"name": "group", "type": ["string"], "required": false, "value":"TOTAL_STUD_SUM"},
    {"name": "data", "type": ["url"], "required": true, "value":"http://someservice.com/featureserver/2"}
  ],

...other properties...

}

[dbouwman]

In discussions w/ @ajturner we arrived at the idea that the "compiled" template is just the template w/ the mappings attached.

The model shown above also implies that a "cedar chart" is an object w/ state & behavior, thus we should be doing something like:

var mychart = new Cedar(null or templateObject or urlToTemplate);

//expose some means to manipulate properties
mychart.template = templateObject;
mychart.mappings  = {hash of mappings}
mychart.datasource = "http://url-to-service"
mychart.query = {hash of query params}

//show the chart
mychart.show(domId);

//expose events on cedar - these are attached
//when the chart is created
mychart.on('evt', callback)

[ajturner]

query is optional, allowing developers ability to add additional overriding parameters. These are appended to the chart defined queries for aggregations.

So the query may include extent and where filters based on application functionality and the chart requires a group by attribute that populates the query within cedar.

The benefit is that the app developer focuses on functionality and cedar handles aggregations and statistics specific to the chart viz.

[dbouwman]

Agreed. those properties would likely be getter/setter functions so you don't need to specify anything but if you want to see current settings you can get at them. This is more accurate...

var mychart = new Cedar(null or templateObject or urlToTemplate);

//expose getter/setter functions to manipulate properties
//prefer this over `.getFoo()`, `.setFoo()` style properties
mychart.template(); //returns current templateObject;
mychart.mappings( {hash of mappings} ); //sets the mappings
mychart.datasource( "http://url-to-service" ); //sets the datasource - thinking we should make this an obj
mychart.query(); //returns {hash of query params}

//show the chart
mychart.show(domId);

//expose events on cedar - these are attached
//when the chart is created
mychart.on('evt', callback)

[dbouwman]

First steps of this are in #17

[dbouwman]

The plumbing for this is inplace - need to build out an example showing the query being updated based on other ui inputs (map extent or some form elements)

[benheb]

@dbouwman @ajturner this is done right? Even with example of query being set by map extent: http://esridc.github.io/cedar/examples/filter-chart-by-map-extent.html Closing.