topic Re: External charting script in ArcGIS JavaScript Maps SDK Questions

External charting script

MichelleJean — Thu, 18 May 2017 20:57:39 GMT

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

Re: External charting script

KellyHutchins — Fri, 19 May 2017 18:10:50 GMT

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

Re: External charting script

MichelleJean — Fri, 19 May 2017 18:58:36 GMT

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

Re: External charting script

KellyHutchins — Fri, 19 May 2017 20:17:36 GMT

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.

Re: External charting script

MichelleJean — Mon, 22 May 2017 10:15:57 GMT

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

Re: External charting script

KellyHutchins — Mon, 22 May 2017 18:16:35 GMT

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.

Re: External charting script

MichelleJean — Tue, 23 May 2017 10:17:58 GMT

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

Re: External charting script

KellyHutchins — Tue, 23 May 2017 16:06:20 GMT

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.

Re: External charting script

MichelleJean — Sat, 11 Dec 2021 12:51:08 GMT

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

Re: External charting script

KellyHutchins — Wed, 24 May 2017 16:13:42 GMT

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.