topic Success! in ArcGIS JavaScript Maps SDK Questions

Creating bar graph using Identify method. Can only get last record in chart.

K_DRex — Tue, 30 Nov 2010 18:40:31 GMT

Hi all.
I have been banging my head to figure out my syntax errors in this javascript. Basically, I used the jssamples - "Show query results with a chart", which brings back a pie chart and the results from one record.
I changed the method to identify and am attempting to show multiple records from one site in a bar chart. I know that I am getting all the records back (I use the console.log for the values to be returned in firebug).
Only the last record shows in the bar chart. My undying gratitude for any assistance. I can't find any examples to emulate.

P.s., zoom to the blue water droplets in Hamilton County, OH.

k.d.

Here is the javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-Type" content=
        "text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7">
        
        <meta name="viewport" content=
        "initial-scale=1, maximum-scale=1,user-scalable=no">

        <title>Water Quality Monitoring Charts</title>
        <link rel="stylesheet" type="text/css" href=
        "http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
<script type="text/javascript" src=
"http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1">
</script>
<script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.identify");
      var map;
      var wd = 275;
      var ht = 110;

dojo.addOnLoad(init);

      function init() {
                   map = new esri.Map("map");
      map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
      map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://gisserver.msdinfo.net/ArcGIS/rest/services/waterquality/MapServer", { opacity:0.5 }));

        dojo.connect(map,"onClick",doIdentify);

        dojo.connect(map.infoWindow, "onHide", function() { map.graphics.clear();   });

        map.infoWindow.resize(275,150);
      }

      function doIdentify(evt) {
        identifyTask = new esri.tasks.IdentifyTask("http://gisserver.msdinfo.net/ArcGIS/rest/services/waterquality/MapServer");
        identifyParams = new esri.tasks.IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
        identifyParams.layerIds = [0];
        identifyParams.layerOptions = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
        identifyParams.width = map.width;
        identifyParams.height = map.height;
        map.graphics.clear();
            identifyParams.geometry = evt.mapPoint;
            identifyParams.mapExtent = map.extent;
            identifyTask.execute(identifyParams, function(idResults)
             { addToMap(idResults, evt);});
      }
function addToMap(idResults, evt){
    for (var i = 0, il = idResults.length; i < il; i++) {
        var idResult = idResults;
        if (idResult.layerId === 0) {

            var feature, attributes, NO3NO2, SAMPLEDATE, graphics;

            feature = idResult.feature;
            attributes = feature.attributes;

            NO3NO2 = parseFloat(attributes.NO3NO2);

            var params = dojo.mixin({
                chf: "a,s,000000CD",
    chbh:"a,4,2",
    chds:"0,20",
    chxr:"0,0,20",
    cht: "bvg",
                chs:"275x110",
    chxt: +SAMPLEDATE +"," +NO3NO2,
    chxl:"0:|2004|2005|2006|2007|2008|2009",
                chd:"t1:" +NO3NO2,
       chco:"A2C180,3D7930",
       chtt:"Water+Quality+Data",

                });

            //create symbol for selected features on the map
          var mySymbol = new esri.symbol.SimpleMarkerSymbol();
              mySymbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
              mySymbol.setSize(10);
              mySymbol.setColor(new dojo.Color([255,255,0,0.5]));


            feature.setSymbol(mySymbol);
            map.graphics.add(feature);
            map.infoWindow.setTitle("NO3NO2")
            console.log(NO3NO2);


      map.infoWindow.setContent("<img src=\"" + "http://chart.apis.google.com/chart?" +
            decodeURIComponent(dojo.objectToQuery(params)) +
            "\" />");

            map.infoWindow.show(map.toScreen(feature.geometry), map.getInfoWindowAnchor(map.toScreen(feature.geometry)))
        }
    }
}


</script>
    </head>

    <body class="claro">
        <span style=
        "font-size:200%; font-weight:bold;">Water Quality Report</span>

        <div id="map" style=
        "width:1000px; height:500px; border:1px solid #000;">
        </div>
    </body>
</html>

Re: Creating bar graph using Identify method. Can only get last record in chart.

timgogl — Sun, 12 Dec 2021 08:11:44 GMT

ok. the thing that stands out to me, comparing your code to the sample code....

the sample has the object defined where the params will be located (chartParams).

var params = dojo.mixin({
              chf:"bg,s,FFFFFF50",
              chs:wd + "x" + ht,
              chd: "t:" + white + "," + black + "," + hispanic + "," + asian + "," + other
            }, chartParams);

in your code this value is blank.

var params = dojo.mixin({
chf: "a,s,000000CD",
chbh:"a,4,2",
chds:"0,20",
chxr:"0,0,20",
cht: "bvg",
chs:"275x110",
chxt: +SAMPLEDATE +"," +NO3NO2,
chxl:"0:|2004|2005|2006|2007|2008|2009",
chd:"t1:" +NO3NO2,
chco:"A2C180,3D7930",
chtt:"Water+Quality+Data",

}  /* should contain a value right here */     );

so i am guessing that dojo doesnt know where to store the information.

heh. i just re-read my post... im not sure i used the correct terminology, but i hope you see what i mean.

Re: Creating bar graph using Identify method. Can only get last record in chart.

K_DRex — Wed, 01 Dec 2010 13:10:23 GMT

Thank you for the reply, Lowgas. The place where "chartParams"" is located, refers to (in the original):

var chartParams = { cht:"p3", chl:"White|Black|Hispanic|Asian|Other" }; - this only tell the chart type and the chart labels.

I made the suggested change, but still only get one value in the chart.

rats. double rats.

Re: Creating bar graph using Identify method. Can only get last record in chart.

timgogl — Wed, 01 Dec 2010 14:38:59 GMT

yeah, i get that.... i still thing somewhere there needs to be a 'global' value, or at least something defined outside of your loop to hold all of the information you want graphed. otherwise all the previous info gets overwritten by latter info.....

heh... im guessing somewhere there is a dojo issue.... i have lost lots of hair to dojo in the last month or so.

Re: Creating bar graph using Identify method. Can only get last record in chart.

K_DRex — Wed, 01 Dec 2010 20:34:00 GMT

Yes, I see that. Somewhere outside the loop I need to create an array to store the data. Since this is the first javascript I have worked on, even that is a bit confusing for me.

More reading and waking in the middle of the night for me.

If anyone can assist, thanks.

K.D.

Re: Creating bar graph using Identify method. Can only get last record in chart.

derekswingley1 — Sun, 12 Dec 2021 08:11:46 GMT

I'm not able to get to your map service but you're right about overwriting your info on each iteration of your loop. Do something like this:

  function addToMap(idResults, evt){
    var chart_html = [];
    for (var i = 0, il = idResults.length; i < il; i++) {
      var idResult = idResults;
      if (idResult.layerId === 0) {
        var feature, attributes, NO3NO2, SAMPLEDATE, graphics;
        feature = idResult.feature;
        attributes = feature.attributes;
        NO3NO2 = parseFloat(attributes.NO3NO2);

        var params = dojo.mixin({
          chf: "a,s,000000CD",
          chbh:"a,4,2",
          chds:"0,20",
          chxr:"0,0,20",
          cht: "bvg",
          chs:"275x110",
          chxt: +SAMPLEDATE +"," +NO3NO2,
          chxl:"0:|2004|2005|2006|2007|2008|2009",
          chd:"t1:" +NO3NO2,
          chco:"A2C180,3D7930",
          chtt:"Water+Quality+Data",
        });

        //create symbol for selected features on the map
        var mySymbol = new esri.symbol.SimpleMarkerSymbol();
        mySymbol.setStyle(esri.symbol.SimpleMarkerSymbol.S TYLE_SQUARE);
        mySymbol.setSize(10);
        mySymbol.setColor(new dojo.Color([255,255,0,0.5]));

        feature.setSymbol(mySymbol);
        map.graphics.add(feature);
        map.infoWindow.setTitle("NO3NO2")
        console.log(NO3NO2);

        
        chart_html.push("<img src='" + "http://chart.apis.google.com/chart?" +
          decodeURIComponent(dojo.objectToQuery(params)) +
          ' />"
        );
      }
      map.infoWindow.setContent(chart_html.join('<hr />'))
      map.infoWindow.show(map.toScreen(identifyParams.geometry) , map.getInfoWindowAnchor(map.toScreen(identifyParams.geometry)));
    }
  }

Success!

K_DRex — Thu, 02 Dec 2010 16:15:44 GMT

GOT IT!!!
I followed the recommendations given.
I placed a
"var chartData = new array();" outside of the "for" statement. Then I used

"chartData.push(NO3NO2)" to get the data into the chartData. That variable is then
sent (along with the other params) to the chart.apis.google. to create a bar graph of NO3NO2 taken at monitoring sites over a time period.

Thank you, swingley and lowgas for your suggestions.

k.d.