Community
Select to view content in your preferred language

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

1691
6
11-30-2010 10:40 AM
K_DRex
by
Occasional Contributor
‎11-30-2010 10:40 AM
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">
        <!--The viewport meta tag is used to improve the presentation and behavior of the samples
              on iOS devices-->
        <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>
0 Kudos
6 Replies
timgogl
by
Deactivated User
‎11-30-2010 12:38 PM
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.
0 Kudos
K_DRex
by
Occasional Contributor
‎12-01-2010 05:10 AM
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.
0 Kudos
timgogl
by
Deactivated User
‎12-01-2010 06:38 AM
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.
0 Kudos
K_DRex
by
Occasional Contributor
‎12-01-2010 12:34 PM
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.
0 Kudos
derekswingley1
by
Deactivated User
‎12-01-2010 01:47 PM
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)));
    }
  }
0 Kudos
K_DRex
by
Occasional Contributor
‎12-02-2010 08:15 AM
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.
0 Kudos