CODEWITHSUNDEEP
javascriptjqueryhtmlhighcharts
RedOne
RedOne

Reputation: 1

select box (dropdown list) to load theme script

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!!

Upvotes: 0

Views: 576

Answers (1)

artm
artm

Reputation: 8584

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.

Upvotes: 1

Related Questions