In your example it looks like you are already defining separate templates for each layer you just need to setup the chart. You can do this using a PopupTemplate. The PopupTemplate has a mediaInfos section that allows you to define a chart. Here's a simplified version of your app that uses feature layers instead of an identify task and defines a separate popup chart for each layer. View a live version of the code below here: http://jsfiddle.net/cUmtj/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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>DVRPC - U.S. Census Data Profiles</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
<style>
html, body {
height: 100%; width: 100%; margin: 0; padding: 0;
}
body{
background-color:white; overflow:hidden; font-family: "Trebuchet MS";
}
#header{
height:40px;
width:100%;
background-color:#0077ac;
}
h1{
color: White;
font-size:120%;
margin:0px 0px 0px 20px;
float:left;
width:360px;
}
.roundedCorners{
-moz-border-radius: 4px;
}
.shadow{
/*slight shadow effect added for browsers that support this functionality*/
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 4px 4px 8px #adadad;
-webkit-box-shadow: 4px 4px 8px #adadad;
-moz-box-shadow: 4px 4px 8px #adadad;
-o-box-shadow: 4px 4px 8px #adadad;
}
#subheader {
font-size:small;
padding-left: 40px;
color: peru;
}
#rightPane{
background-color:white;
color:peru;
margin:5px;
border: solid 2px cornflowerblue;
}
#mapArea, #map {
background-color:white;
border:solid 2px cornflowerblue;
margin:5px;
}
#footer {
border: solid 1px #7EABCD;
background-color:white;color:peru;font-size:10pt; text-align:center; height:40px;
}
</style>
<script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5compact"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.dijit.Popup");
dojo.require("dojo.number");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.TitlePane");
dojo.require("esri.layers.FeatureLayer");
var map;
var initExtent;
var census3, census4;
function zoomExtent() {
map.setExtent(initExtent);
}
function init() {
initExtent = new esri.geometry.Extent({
"xmin": -8502778.91,
"ymin": 4784652.06,
"xmax": -8227605.61,
"ymax": 4968100.93,
"spatialReference": {
"wkid": 102100
}
});
//setup the popup window
var popup = new esri.dijit.Popup({
marginTop: 35,
fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
}, dojo.create("div"));
map = new esri.Map("map", {
infoWindow: popup,
extent: initExtent
});
dojo.connect(map, "onClick", function (evt) {
//dispaly popup when users clicks on census3 or census4 layers
var query = new esri.tasks.Query();
query.geometry = evt.mapPoint;
var def = [];
def.push(census4.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW));
def.push(census3.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW));
map.infoWindow.setFeatures(def);
map.infoWindow.show(evt.mapPoint);
});
dojo.connect(map, "onLoad", mapReady);
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);
var census = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/census/MapServer", {
opacity: .65
});
map.addLayer(census);
//define popup template for census layer 3
var template = new esri.dijit.PopupTemplate({
title: "Name {NAME00}",
mediaInfos: [{
type: "piechart",
value: {
fields: ["AllWhite", "AllBlk", "AllAsian", "HispTot"]
}
}]
});
census3 = new esri.layers.FeatureLayer("http://gis.dvrpc.org/ArcGIS/rest/services/census/MapServer/3", {
mode: esri.layers.FeatureLayer.MODE_SELECTION,
infoTemplate: template,
outFields: ["*"]
});
//define popup template for census layer 4
var template2 = new esri.dijit.PopupTemplate({
title: "Name {NAME}",
description: "Descriptive info can go here ....",
mediaInfos: [{
type: "piechart",
value: {
fields: ["TotMale", "TotFem"]
}
}]
});
census4 = new esri.layers.FeatureLayer("http://gis.dvrpc.org/ArcGIS/rest/services/census/MapServer/4", {
mode: esri.layers.FeatureLayer.MODE_SELECTION,
infoTemplate: template2,
outFields: ["*"]
});
//add census layers to map in selection only mode. These layers will not be displayed unless selected.
map.addLayers([census3, census4]);
}
function mapReady(map) {
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" design="headline" gutters="true" style="width:100%; height:100%;">
<div id="header" class="shadow" dojotype="dijit.layout.ContentPane" region="top">
<h1>U.S. Census Data Profiles<br><font size=2px;>2005-2009 American Community Survey 5-Year Estimates</font> </h1>
</div>
<div id="map" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="center">
</div>
</body>
</html>
