CODEWITHSUNDEEP
javascriptjsonhighchartsstringify
Jakub Werner
Jakub Werner

Reputation: 23

Highcharts Options to stringified JSON

i need to convert the highcharts options to a JSON string. And I'm really struggling with this.

Because it has cuircual structure.

Example: http://jsfiddle.net/8TEKD/

Well I also tried to decycle it with the douglascrockford cycle.js: https://github.com/douglascrockford/JSON-js

If I try to decycle it I get this stacktrace

'Attr.ownerElement' is deprecated and has been removed from DOM4 (http://w3.org/tr/dom). cycle.js:92
'Attr.textContent' is deprecated. Please use 'value' instead. cycle.js:92
'Attr.nodeValue' is deprecated. Please use 'value' instead. cycle.js:92
'HTMLHtmlElement.manifest' is deprecated. The manifest attribute only has an effect during the early stages of document load. cycle.js:92
InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('checkbox') does not support selection.

Well I need this because I want to save the configuration of my Chart and load it later with that configuration.

Is there any way to do this?

Thanks

Upvotes: 1

Views: 1261

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

The problem is that $('#container').highcharts(options); adds a renderTo element to your object that is a DOM element. Before that is added, you don't have a cyclic structure. And, if you truely want to save off your config options for use again, saving the DOM element they are rendered to this time isn't of use to you.

I would recommend saving the json before you create the chart:

$(function () {
    var options = {

        chart: {
            marginRight: 120
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            x: 0,
            y: 100
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    };
    jsonstring = JSON.stringify(options);

    $('#container').highcharts(JSON.parse(jsonstring));  // just to prove it works, obviously you would use the options variable here

});

http://jsfiddle.net/6y2gg6oy/

But, if that isn't an option, you can use JSON.stringify's replacer option to exclude the parts of the options object that you don't want. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_native_JSON#The_replacer_parameter

Upvotes: 3

Related Questions