External charting script

[MichelleJean]

I am using this Info window with chart ESRI tutorial.

In a scenario where you have a lot of charts and the script becomes larger.

Is it possible to extract from the script the part that creates the charts and move it in another .js file?

So this file loads only if required by the user, not necessarily when loading the map?

Thank you,

Michelle

[KellyHutchins]

What kind of charts are you creating? It requires much less code to create charts using the Popup and media info.  Have you seen this sample in the help: 

Popup | ArcGIS API for JavaScript 3.20 

Documentation about the different types of media info charts that can be created can be found here: 

mediaInfo | ArcGIS for Developers 

[MichelleJean]

Hi Kelly,

My projects require dojox charts, types stacked areas, stacked columns and others.

I would like to extract from the script this part that creates the charts and move it in another .js file.

So it loads only if required by the user, not necessarily when loading the map.

Couldn't find such a tutorial, sample code on ArcGIS API for JavaScript.

So I would like to use this Info window with chart tutorial to understand how this works.

Thank you,

Michelle

[KellyHutchins]

Sure you can move the code to a new file and use require to load the code that creates the chart only when someone clicks on a feature to display the popup. Attached is a zip file with a sample app showing this behavior. 

[MichelleJean]

Hi Kelly,

Thank you  

I followed all your code lines and reproduced the behaviour for a simple web app. 

While it loaded my main.js it did not load the CreateChart.js.

Are there any specifics that make a difference from one web app to another?

Thank you,

Michelle

[KellyHutchins]

There were a few issues in your app that I've fixed in the attached version. It looks like you were combining trying to display the popup in a side panel with the code I sent and the popup code was being executed twice but once without a valid feature.  There were also a few issues in your source code with invalid variables and missing module references.  These are fairly easy to find and fix if you use a tool like JSLint. Most IDE's have a plug-in available that will lint your javascript code and mark any issues that are found. Then when you view your code you'll see the problem areas highlighted. 

[MichelleJean]

Hi Kelly,

A few code lines might be missing in the attachment above.

I can not identify the ones referring to the TabContainer and ContentPanes.

I would like to use them as in the  Info window with chartESRI tutorial and place charts in each cp:

Thank you so much,

Michelle

[KellyHutchins]

I removed the tab container just to simplify the sample since there was only one tab of info showing. You'll need to add the references back in and update the js to use the Tab Container and Content Pane. 

[MichelleJean]

Actually I tried adding them before writing to you 

Here are the lines I added in CreateChart.js :

// ---- NEW --------- //
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
// ------------------ //


createPieChart: function () {

// ---- NEW --------- //
  var tc = new TabContainer({},
    domConstruct.create("div")
  );
  var cp1 = new ContentPane;
  tc.addChild(cp1); 
// ------------------ //

  var hea1_ha = this.graphic.attributes.HeaHa1;
  var hea2_ha = this.graphic.attributes.HeaHa2;
  var hea3_ha = this.graphic.attributes.HeaHa3;
  var c1 = domConstruct.create("div", {}, "chartPanel");
  var chart1 = new Chart2D(c1);
  domClass.add(c1, "chart");
  chart1.addPlot("default", {
  type: "Pie"
  });
  chart1.addSeries("", [hea1_ha, hea2_ha, hea3_ha]);
  chart1.render();
  return chart1;

// ---- NEW --------- //
  cp1.set("content", chart1.node);
  return tc.domNode
// ------------------ //

 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

But the Tab Container and Content Pane are not created.

Michelle

[KellyHutchins]

In your code above there are a few issues. First is that you are missing parenthesis  when  you create your content pane and next you are returning the chart at line 28 so the code at 31 and 32 doesn't execute. I've attached an updated version that includes the TabContainer and ContentPane.