How to query features and populate a line graph in bottom pane with analysis

[MathewSuran]

Does anyone know how to be able to query a specific amount of features (ex. say 4 max) and populate a line graph in a separate window pane, for example at the bottom?  I know you can populate a graph in a pop-up window, but I want to instead have it show up in a bottom pane.  I also want to have an analysis box next to the chart that displays a volume change of the features queried.  I have the layout already, I just need to fill in these parts.  Thanks!

[MathewSuran]

Anyone have any suggestions or resources to check out?

[KellyHutchins · Accepted solution]

Here's a simple example that queries a feature layer and displays a chart of wind speed at the bottom of the app:

http://jsbin.com/kupibo/1/

In the example above I used the dojo charting tools to generate the bar chart. You can find out more info on the various charts available using the following link:

Dojo Charting - The Dojo Toolkit 

[MathewSuran]

Thanks for the link.  After adding the line graph into my template, one issue I am running into is trying to get the Legend to work for the line graph.  It seems like the chart Legend is conflicting with the map Legend and I keep getting an error in Google's inspect element tool that the "chart" is undefined. 

The chart Legend ends up appearing but the map Legend does not (which has the map layers attached).

Any ideas?

Let me know if you need me to post any code.

[MathewSuran]

Kelly,

In your example, you only use one feature layer and one query feature.  Can you elaborate on how to define multiple feature layers and multiple query features in your example?

Also, how to only query from a specific "checked" feature layer in the TOC?

Thanks!

[williamcarr]

Mathew, are you still working on this? I have a few examples if you are.

[MathewSuran]

Hey William,

Yes I am still working on this.  I figured out how to add the suggestion from Kelly into my webapp.  The only problem is that her example only utilizes one feature layer and one query.  I am currently working on trying to add multiple steps to the query to add multiple lines to the graph.

For example:

Selecting a feature opens a text box to type in a year then type in spring or fall.  This will then populate the line graph for those criteria.  I want to be able to do this up to 3 times for a max of 3 populated lines.  Hope this makes sense.

I am open to suggestions though.

[williamcarr]

Do you plan to query the year and spring and fall separately?

Also, I followed her example as well, but went with a queryTask rather than queryFeatures. Then I access it through the showResults array.

//I also query both the feature type, in this case an array, with a date query at the same time.

             query.where = "NAMELSAD = '" + looper+ "'" + "AND " + "Date > '" + dstart+ "'";

          queryTask.execute(query, showResults);

Once I get the features returned in the showResults, I can access them (in my case sort them by date) before pushing them into separate arrays, which I suppose you could query again.

function showResults (results) {

//--------------------------------sort by date so they are addressed in ascending order in the chart.

                    results.features.sort(function(a, b) {return  a.attributes.Date - b.attributes.Date;});

          for (var j = 1; j < results.features.length; j++) {_covDate = new Date(results.features.attributes.Date);

          _covDateStr = dojo.date.locale.format(_covDate, {selector: 'date',datePattern: 'MM/yyyy'}); 

    console.log(_covDateStr);

    banana1.push(_covDateStr ); 

//--------------------------------push to separate county arrays...........................

  if (results.features.attributes.NAMELSAD == "Christian County"){

          Christian= "Christian County";

  CChristian.push(results.features);

  CChristianT.push(results.features.attributes.TotalUsage ); };

  if (results.features.attributes.NAMELSAD == "Clay County"){

          Clay = "Clay County";     

  CClay.push(results.features);

  CClayT.push(results.features.attributes.TotalUsage ); };

          Did you get past adding the multiple lines to the graph? That gave me some issues as well that I might be able to help with.

[MathewSuran]

Thanks for all of that.  I want to be able to select a feature (line) and then apply a query to the selected feature.  I thought of check boxes with all of the years and spring/fall but that would be too space hungry, so I thought that 2 text boxes to fill in would be easiest.  In the first box, enter the year.  In the second box, enter either fall or spring.  Those are the 2 attributes I want to query to populate the line graph.

As far as adding multiple lines, I want to be able to do the above process total 2-3 times, depending on how cluttered the graph looks.  I can manually give values for each line to populate multiple, but haven't tried the above example since they tie into each other.

Is there a way to reset the query if you want to display new attributes?  I was thinking of turning the symbol in the graph legend into a movable and deletable object.  Movable so you can rearrange the order of the lines and deletable to add a new query/line.

[williamcarr]

Will these lines have multiple date ranges? Such as 2006 - 2011, then 2008 - 2010 for the newly added series. I ran into issue trying to align multiple series points with there coinciding dates on the x axis. Something to keep in mind.

I would take a look at this demo Dojo: The Definitive Guide » dojox.charting . This demo changes the series manually from a drop down box, and changes them on the fly with a check box. There is also a few bits on adding a legend that allow you to toggle layers on and off if you haven't checked that out yet.

I'm still working on the rest myself.