Using JSON data with the jQuery highcharts plugin [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 10 years ago.

<script type="text/javascript">
    var chart;
    $(document).ready(function() {
        // Define the options
        var options = {
            chart: {
                renderTo: 'container'
            },

            title: {
                text: 'Daily visits at www.highcharts.com'
            },

            subtitle: {
                text: 'Source: Google Analytics'
            },

            xAxis: {
                type: 'datetime',
                tickInterval: 7 * 24 * 3600 * 1000, // One week
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3 
                }
            },

            yAxis: [{ // Left Y axis
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    t开发者_C百科ext: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            }],

            legend: {
                align: 'left',
                verticalAlign: 'top',
                y: 20,
                floating: true,
                borderWidth: 0
            },

            tooltip: {
                shared: true,
                crosshairs: true
            },

            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: this.pageX, 
                                        y: this.pageY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ 
                                        this.y +' visits',
                                    width: 200
                                });
                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            },

            series: [{
                name: 'All visits',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }, {
                name: 'New visitors'
            }]
        }

        // Load data asynchronously using jQuery. On success, add the data
        // to the options and initiate the chart.
        // This data is obtained by exporting a GA custom report to TSV.
        // http://api.jquery.com/jQuery.get/
        jQuery.get('analytics.tsv', null, function(tsv) {
            var lines = [],
                listen = false,
                date,

                // Set up the two data series.
                allVisits = [],
                newVisitors = [];

            try {
            // Split the data return into lines and parse them.
            tsv = tsv.split(/\n/g);
            jQuery.each(tsv, function(i, line) {
                // Listen for data lines between the Graph and Table headers.
                if (tsv[i - 3] == '# Graph') {
                    listen = true;
                } else if (line == '' || line.charAt(0) == '#') {
                    listen = false;
                }

                // All data lines start with a double quote.
                if (listen) {
                    line = line.split(/\t/);
                    date = Date.parse(line[0] +' UTC');

                    allVisits.push([
                        date, 
                        parseInt(line[1].replace(',', ''), 10)
                    ]);
                    newVisitors.push([
                        date, 
                        parseInt(line[2].replace(',', ''), 10)
                    ]);
                }
            });
            } catch (e) { alert(e.message) }
            options.series[0].data = allVisits;
            options.series[1].data = newVisitors;

            chart = new Highcharts.Chart(options);
        });
    });
</script>

Above is example code for a jQuery plugin, 'highcharts'. I am trying to get the data from a JSON file if the JSON string is as: { name: 'allVisits', data: [1, 0, 4] }, { name: 'newVisits', data: [5, 7, 3] }.

The example file is getting the data from a 'tsv' file, so I am trying to get the data from the JSON file instead.

---

From your short JSON example, I would say it's invalid.

{ name: 'allVisits', data: [1, 0, 4] }, { name: 'newVisits', data: [5, 7, 3] }

Should be:

 [{"name":"allVisits", "data": [1, 0, 4] }, {"name": "newVisits", "data": [5, 7, 3] }]

If I recall correctly, jQuery does some JSON validation.

Once your file is valid JSON, you can use jQuery.getJSON instead of jQuery.get.

jQuery.getJSON( 'file.json' , function( data ){

   alert( data[0].name );
   // do your thang with data

});

Test your JSON with JSONLint