Changing theme in ESRI tutorial

MichelleJean

Hi everybody,

Two questions regarding a ESRI tutorial.

1) The tutorial uses a Wetland theme for it's dojox charts.

<SPAN class="keyword token">var</SPAN> theme <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Wetland"</SPAN><SPAN class="punctuation token">;</SPAN> ‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

This is Wetland.js (from dojox website😞

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"../SimpleTheme"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"./common"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>SimpleTheme<SPAN class="punctuation token">,</SPAN> themes<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 themes<SPAN class="punctuation token">.</SPAN>Wetland <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleTheme</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 colors<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
 <SPAN class="string token">"#bfbc64"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"#737130"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"#73373b"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"#7dafca"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"#8d3c42"</SPAN>
 <SPAN class="punctuation token">]</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">return</SPAN> themes<SPAN class="punctuation token">.</SPAN>Wetland<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I would like to replace Wetland.js with my own customTheme.js. But I cannot manage to reference the external file customTheme.js 

Any support with a sample code (compatible with the tutorial code) would be very helpful.

2) The links in Wetland.js reference local stored files:

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"../SimpleTheme"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"./common"</SPAN><SPAN class="punctuation token">]</SPAN>‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Do I need to replace these with http://  links in order to create a customTheme.js file?

Thank you,

Michelle

rscheitlin

Michelle,

   Attached is a working example.

It is just a matter of properly referencing the theme file in your code:

&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>script type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/javascript"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> dojoConfig <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; packages<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"themes"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; location<SPAN class="punctuation token">:</SPAN> location<SPAN class="punctuation token">.</SPAN>pathname<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/\/[^/]+$/</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"/themes"</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

and setting a more complete path to the dojox libraries in your theme code:

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojox/charting/SimpleTheme"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojox/charting/themes/common"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>SimpleTheme<SPAN class="punctuation token">,</SPAN> themes<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>

&nbsp;&nbsp;&nbsp; themes<SPAN class="punctuation token">.</SPAN>MyTheme <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleTheme</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; colors<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"#FF0000"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"#e0e860"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"#0000FF"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"#999999"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"#636563"</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">]</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> themes<SPAN class="punctuation token">.</SPAN>MyTheme<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Charting.zip