Resetting theme in Highchart & Highstock | Jugal Thakkar

http://stackoverflow.com/questions/9871876/changing-a-highcharts-theme-partially-working Jugal Thakkar http://jugal.me/

by J. Albert Bowden

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js"></script>
<div id="container"></div>
<button id="themeA">Theme A</button>
<button id="themeB">Theme B</button>
<button id="themeA2">Theme A With Reset</button>
<button id="themeB2">Theme B With Reset</button>
<button id="themeReset">Reset All Themes</button>

CSS

#container {
    min-width:500px;
}

JavaScript

// Make a copy of the defaults, call this line before any other setOptions call
var HCDefaults = $.extend(true, {}, Highcharts.getOptions(), {});

function ResetOptions() {
    // Fortunately, Highcharts returns the reference to defaultOptions itself
    // We can manipulate this and delete all the properties
    var defaultOptions = Highcharts.getOptions();
    for (var prop in defaultOptions) {
        if (typeof defaultOptions[prop] !== 'function') delete defaultOptions[prop];
    }
    // Fall back to the defaults that we captured initially, this resets the theme
    Highcharts.setOptions(HCDefaults);
}
var themeA = {
    colors: ["#00FF00", "#0000FF"]
}, themeB = {
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 250, 500],
            stops: [
                [0, 'rgb(255, 0, 0)'],
                [1, 'rgb(0, 0, 0)']
            ]
        }
    }
};

$("#themeA").click(function () {
    var defaultOptions = Highcharts.setOptions(themeA);
    createChart();
});

$("#themeA2").click(function () {
    ResetOptions();
    var defaultOptions = Highcharts.setOptions(themeA);
    createChart();
});


$("#themeB").click(function () {
    var defaultOptions = Highcharts.setOptions(themeB);
    createChart();
});

$("#themeB2").click(function () {
    ResetOptions();
    var defaultOptions = Highcharts.setOptions(themeB);
    createChart();
});


$("#themeReset").click(function () {
    ResetOptions();
    createChart();
});
var chart;

function createChart() {
    var chartingOptions = {};
    chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
    chart = new Highcharts.StockChart(chartingOptions);
}
createChart();