select box (dropdown list) to load theme script

Question

i'm using highchart and want to use a select list for loading themes. the theme are .js files. i want to acheave something like that:

<select id="theme">
<option value="">Default</option>
<option value="js/theme/theme1.js">theme1</option>
<option value="js/theme/theme2.js">theme2</option>
</select>

in other words, how can i change the src="" tag of the <script></script> in the head of my html using select box!!

thank you!!

Answer 1

If you want to give option of different themes to your users you need to include all highchart theme js scripts in your html. All highcharts theme js files do this:

Highcharts.theme = {
colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],....
....
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

so when you include a js file, it changes the theme of the highcharts.

You can edit these theme js files and change the names of the settings as Highcharts.themeDarkBlue = { ..... , Highcharts.themeLightBlue = { ..... , etc. Then when your user makes a selection from the drop down you need to call whatever theme the user has selected as

Highcharts.setOptions(Highcharts.themeDarkBlue);

and re-populate the chart.

Update:

Can't really generate a fiddle for this so:

Your html:

.....
    <script src='themes/themeDarkBlue.js'></script>
    <script src='themes/themeLightBlue.js'></script>
    <script src='themes/themeBlack.js'></script>
.... //more theme references

In your themes folder you have three js files, themeDarkBlue.js, themeLightBlue.js and themeBlack.js

Your themeDarkBlue.js content:

var darkBlueTheme = {colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798B"....};

Your themeLightBlue.js content:

var lightBlueTheme = {colors: ["#xxxF0D", "#xxxF3B", "#DF5353", "#7798B"....};

Inside your html:

$("#themeDropDown").change(function(){
   if ($(this).val() = 'Dark Blue'){
      Hightcharts.setOptions(darkBlueTheme);
   }
   else if ($(this).val() = 'Light Blue'){
      Hightcharts.setOptions(lightBlueTheme);
   }
   //else if 'Black'
   repopulateHighChart();
});

This should be clear enough.