Adding D3 chart to InfoWindow Pop Up

LisCollins · ‎05-18-2015

Hello,

Does anyone have experience using D3 charts with ESRI maps?

I'm having issues getting a D3 chart to show up in my infowindow pop up on my web map.

What I want to happen:

I want my D3 Chart to show up in the custom info window template of my pop up that I created.

Error

-When I click on a county boundary, the D3 graph refuses to show in the info template div I created for my pop up. The result is just blank.

What is working:

The sample D3 graph shows in a random class I created for testing on the left side of the map called "chart".

Also, the sample D3 data variable shows in the pop up though the d3 graph refuses too. I'm using this tutorial to try to make a simple D3 bar chart: Let’s Make a Bar Chart

What I have tried:

I tried using Dojo charts but dojo is very complicated to use for me and there aren't too many tutorials explaining how to use the stacked bar chart. ESRI's native charts do no meet my needs either as eventually I want to use a dynamic stacked column chart. ->Seen here: Stacked Bar Chart

Right now, I'm just testing with a simple D3 bar chart and can't even get that too work.

Code here:

Edit fiddle - JSFiddle - Check out the JSFIddle for the whole code though it's not showing in the re...

JS part

// infotemplate formatting functions need to be in the global scope to work
      var map;
      var showChart;
      var theme = "Wetland";


      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        
         "esri/dijit/InfoWindow",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "dojo/dom",
        "dojo/number",
        "dojo/on",
        "dojo/parser",
        "esri/Color",
        
        
        //charts
        //"dojo/charting/plot2d/StackedColumns",
        "dojox/charting/Chart",
        //"dojox/charting/themes/" + theme,
        "dojox/charting/plot2d/Lines",
        "dojox/charting/plot2d/Columns",
        "dojox/charting/plot2d/StackedColumns",
        "dojox/charting/axis2d/Default",
        "dojo/dom-class",

        
      "esri/tasks/QueryTask",
      "esri/tasks/query",
"esri/symbols/SimpleMarkerSymbol",

        
        
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojox/layout/ExpandoPane",
        "dijit/layout/TabContainer",
        "dojox/charting/Chart2D", "dojox/charting/plot2d/Pie", 
        "dojox/charting/action2d/Highlight",
        "dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip",
        "dojo/dom-construct", "dojo/number",
        "dojox/charting/themes/" + theme,

        
        "dojo/domReady!"
      ],
        function (
          Map, ArcGISDynamicMapServiceLayer, InfoWindow, InfoTemplate, FeatureLayer, SimpleRenderer, SimpleFillSymbol,
          SimpleLineSymbol, dom, number, on, parser, Color, 
          //dojochart
        Chart, 
        //dojoxTheme,        
        Lines,
        Columns,
        StackedColumns,
        Default,
        domClass,
        
        //for query
        QueryTask, Query, SimpleMarkerSymbol,
        
          BorderContainer,
        ContentPane,
        ExpandoPane,
        TabContainer,
         Chart2D, Pie, 
        Highlight,
        MoveSlice, Tooltip,
        domConstruct, number, dojoxTheme

          
      ) {

          parser.parse();

          // Use the info window instead of the popup.
        var infoWindow = new InfoWindow(null, domConstruct.create("div"));
        infoWindow.startup();

          
//base map, centering, and zooming; add to div
          map = new Map("mapDiv", {
            basemap: "gray",
            center: [-76.796, 38.13],
            zoom: 8
          });

  map.infoWindow.resize(475, 475);
         
var data = [4, 8, 15, 16, 23, 42];


    //the long way
var chart = d3.select(".chart");
var bar = chart.selectAll("div");
var barUpdate = bar.data(data); //join data
var barEnter = barUpdate.enter().append("div");
barEnter.style("width", function(d) { return d * 10 + "px"; });
barEnter.text(function(d) { return d; });
    
    
          //infotemplate
          var infoTemplate = new InfoTemplate();
          infoTemplate.setTitle("County: ${COUNTY}");
          //infoTemplate.setContent("<div id='d3code2' class='d3Pop'> </div>");
          infoTemplate.setContent(getTextContent);
          
         //selects chart container 


d3.select(".d3Pop")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return d * 10 + "px"; })
    .text(function(d) { return d; });    

 function getTextContent(graphic) {
 console.log("in get text content function")
        
/*        var body = d3.select(".d3Pop");
          console.log(body);
var div = body.append("div");
console.log(div);
div.html("Hello, world!"); */
var chart = d3.select(".d3Pop1");
var bar = chart.selectAll("div");
var barUpdate = bar.data(data); //join data
console.log(barUpdate);
var barEnter = barUpdate.enter().append("div");
barEnter.style("width", function(d) { return d * 10 + "px"; });
barEnter.text(function(d) { return d; });
console.log(barEnter);    

return "<div class='d3Pop1'>" + bar + data + "</div>";
}

    //add county layer to map
                                  
       var counties = new FeatureLayer("http://geodata.md.gov/imap/rest/services/Boundaries/MD_PoliticalBoundaries/MapServer/1", {
            mode: FeatureLayer.MODE_ONDEMAND,
            infoTemplate: infoTemplate,
            outFields: [
             "COUNTY"
            ]
          });
        
        map.addLayer(counties);
          
        });

HTML

Sorry, I'm having a hard time getting my HTML to display. It won't show in the Jfiddle here either: Edit fiddle - JSFiddle

This is the rest of my HTML code written out that's not in the script tag within <head>

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>D3 Chart test</title>

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

.chart div, .d3Pop1 div {

font: 10px sans-serif;

background-color: steelblue;

text-align: right;

padding: 3px;

margin: 1px;

color: white;

}

</style>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script src="http://js.arcgis.com/3.10/"></script>

</head>

<body class="soria">

<div data-dojo-type="dijit/layout/BorderContainer"

data-dojo-props="design:'headline', gutters:true"

style="width: 100%; height: 100%; margin: 0;">

<div data-dojo-type="dojox/layout/ExpandoPane"

data-dojo-props="duration:300, title:'Details', region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'"

style="width:220px;">

<p>

Click a county to view the population change between 2000 and 2007.<br/> <br/>

<b>Change the info template:</b> Template 1 displays the percentage growth (or decline) in population. The values are color-coded green for population increase and red for decline in population. Template 2 creates a new calculated field called diff that displays the population difference. <br/>

</p>

<div id="d3code" class="chart"></div>

</div>

</div>

</body>

</html>

My Background

-Novice JavaScript Web Developer

-Using ESRI JavaScript 3.10 API and 3.10 CSS

-Test web map template code from ESRI samples

Can anyone figure out why my D3 charts won't display in the popup infowindow template?

Thanks for your help!

RobertScheitlin__GISP · ‎05-18-2015

Lis,

I think D3 needs a dom node that is already part of the documents dom.