generate chart using google spreadshhet and highstocks chart

Question

I am looking to draw chart using highstocks. I am using google spreadshhet as a data source. Spreadsheet contains around 15000 rows. Getting error 400 bad request. How can I get proper response from google spreadsheet to generate highstock chart? see the fiddle and code is:

**

JS

**
    $(function() {


    $.getJSON('http://spreadsheets.google.com/feeds/feed/0AhWK8Tqp6GNkdENFYjRrOFJxWE1BNFhiZFdIejNxaFE/worksheet/public/basic?alt=json-in-script&gid=4', function(data) {

        // Add a null value for the end date 
        data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
            console.log(data);  
        // create the chart
        $('#container').highcharts('StockChart', {
            chart : {
                type: 'candlestick',
                zoomType: 'x'
            },

            navigator : {
                adaptToUpdatedData: false,
                series : {
                    data : data
                }
            },

            scrollbar: {
                liveRedraw: false
            },

            title: {
                text: 'graph visualization'
            },

            subtitle: {
                text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
            },

            rangeSelector : {
                buttons: [{
                    type: 'hour',
                    count: 1,
                    text: '1h'
                }, {
                    type: 'day',
                    count: 1,
                    text: '1d'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1y'
                }, {
                    type: 'all',
                    text: 'All'
                }],
                inputEnabled: false, // it supports only days
                selected : 4 // all
            },

            xAxis : {
                events : {
                    afterSetExtremes : afterSetExtremes
                },
                minRange: 3600 * 1000 // one hour
            },

            series : [{
                data : data,
                dataGrouping: {
                    enabled: false
                }
            }]
        });
    });
});

**

HTML

**

<div id="container"></div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

Answer 1

A couple of things:

• use https instead of http
• getJSON(), requires JSON, your URL returns script, which need to be executed, ad parameters: alt=json-in-script&callback=? to make it work.
• your URL is just broken, I don't know where did you get that, but should be like this: https://spreadsheets.google.com/feeds/cells/o13394135408524254648.240766968415752635/od6/public/values?alt=json-in-script&callback=?

See: http://jsfiddle.net/vHM6m/1/ (chart is not rendered properly, since demo is using some random spreadsheet).

Anyway, see some demos and google API first: https://developers.google.com/gdata/samples/spreadsheet_sample