topic Re: How to query features and populate a line graph in bottom pane with analysis in ArcGIS JavaScript Maps SDK Questions

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

MathewSuran — Fri, 12 Dec 2014 17:06:55 GMT

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!

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

MathewSuran — Thu, 18 Dec 2014 19:11:06 GMT

Anyone have any suggestions or resources to check out?

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

KellyHutchins — Fri, 19 Dec 2014 18:11:34 GMT

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

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

MathewSuran — Tue, 23 Dec 2014 21:35:35 GMT

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.

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

MathewSuran — Wed, 04 Mar 2015 20:10:52 GMT

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!

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

williamcarr — Mon, 24 Aug 2015 11:58:44 GMT

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

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

MathewSuran — Tue, 25 Aug 2015 12:20:50 GMT

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.

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

williamcarr — Tue, 25 Aug 2015 16:25:05 GMT

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.

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

MathewSuran — Tue, 25 Aug 2015 20:58:08 GMT

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.

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

williamcarr — Wed, 26 Aug 2015 12:13:38 GMT

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.

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

MathewSuran — Wed, 26 Aug 2015 12:55:47 GMT

That is actually exactly what I am looking for, great find! Would you suggest utilizing the data store over a query for this application? I may be completely off here but it seems like the query would be pointless to incorporate and the data store with the combo box is the way to go.

Not to get off topic for this thread, check out my other thread I started for setting up the data that I will be using for this webapp. Any suggestions there would be appreciated. Combine line and point feature classes attributes

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

williamcarr — Wed, 26 Aug 2015 14:39:47 GMT

As far as the datastore goes, I'm going to stick with the query for the sole purpose of future relationships that I may or may not incorporate for spatial purposes. My app is still in it's infantile phase so I'm leaving every door open, so I would suggest trying it any and all ways to find the easiest/best solution for your app.

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

MathewSuran — Wed, 26 Aug 2015 14:42:49 GMT

I totally agree. Thanks!