topic Re: Styling Dojo Chart in Popup in ArcGIS JavaScript Maps SDK Questions

Styling Dojo Chart in Popup

SimonJackson — Sat, 11 Dec 2021 09:09:39 GMT

I have a dojox bar chart on my app, that is populated from a QueryTask everytime the extent changes.

[ATTACH=CONFIG]20188[/ATTACH]

I am making use of the Tufte theme (the only one that has a transparent background), and overriding the bar colours/outlines when i populate the chart:

chart1.setTheme(dojox.charting.themes.Tufte);
    chart1.addSeries("Languages", [
     { y: pctArabic, fill: "#C23A00", stroke: null, tooltip: ctArabic + " in Arabic },
     { y: pctMalay, fill: "#6BAE11", stroke: null, tooltip: ctMalay + " in Malay" },
        ....
 ]);
    chart1.render();

I have also been using this sample as a reference, and have successfuly added a popup to my map which shows some totals per suburb in a dojox piechart:

[ATTACH=CONFIG]20189[/ATTACH]

My codes is identical to the sample, bar the fields have been swapped out.

template = new esri.dijit.PopupTemplate({
          title: "Tweet Languages in {SA2_NAME}",
          mediaInfos: [
            {
              type: "piechart",
              value: { 
                fields: [ 
                  "TotArabic", "TotMalay",
                 ....
                ],
                theme: "Tufte"
              }
            }
          ]
        });

My problem:

How do I force the pie segments to be specific colours, as per my bar chart example?
When I look at the API reference for Popup, mediainfos does not look like it has this level of control over the chart?

How do I override the tooltips with an alias like I did with my bar chart example?

I will also need to style the popup to have a similar dark grey background to my chart background, but I believe that won't be related to the chart, and should be achievable via styling the popup with CSS.

Re: Styling Dojo Chart in Popup

Anonymous User — Wed, 02 Jan 2013 23:09:19 GMT

Original User: Kelly

Using mediaInfos to define the chart doesn't provide many customization options. If you need more control over how the chart looks and behaves take a look at this sample that shows how to display a pie chart in a popup. IN this example we use the setContent method on the infoWindow to define a function that will build the chart when the feature is clicked.

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_infowindowchart/index.html

Re: Styling Dojo Chart in Popup

SimonJackson — Sat, 05 Jan 2013 01:23:52 GMT

Thanks Kelly.
Think im making a rookie mistake here, but why is my chart not appearing in the popup? (JSFiddle)

I also see that that sample you reference makes use of dojo.addClass which I understand will be deprecated.
Is this entirely necessary and how would one go about not having this in there? Just want to learn how to make this app as futureproof as poss.

My end goal: Return a pie chart from a user click on the map within an info window.
As it is a dynamic map service and not a featurelayer (complex geoms), need to run a querytask to return some info from a field to populate the chart by.

Thanks in advance for any help you can offer.

Re: Styling Dojo Chart in Popup

Anonymous User — Mon, 07 Jan 2013 14:59:33 GMT

Original User: Kelly

Hi Simon,

You don't need the dojo.addClass unless you want to dynamically append a style to the chart.

Have you tried calling chart.render - maybe after you set the chart content using infoWindow.setContent?

Positioning Seriesname in Dojochart

SaradaSwain — Wed, 19 Jun 2013 03:47:19 GMT

Hi,

I have few dojocharts and the Seriesname added to the dojocharts are coming on the top of the chart. But I want it to come at bottom of my chart. How to achieve this please ?

My code is something as below.

chart1.addSeries("Free / Total", jsonFreeData, { stroke: { color: "#1AD03E" } });

Please suggest.Thanks in advance.

Gap Between Dojocharts

Anonymous User — Wed, 19 Jun 2013 04:51:37 GMT

Original User: sswain5

Hi,

I have three Dojocharts in one page. All three needs to come in same label .Two charts are coming in same label but third chart is coming above the other two charts.I want all three to come in same vertical position means same label.How to achieve this please ?

I also want to keep some Gap between all the chart i.e. chart1 some space chart2 some space chart3 should come.How to achieve this please ?

Thanks in advance.