Highcharts not rendering

Question

So I wrote a python app to get stock data for highcharts. I get this in terminal

127.0.0.1 - - [28/Mar/2013 13:47:02] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [28/Mar/2013 13:47:02] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [28/Mar/2013 13:47:15] "GET /json/msft/?startdate=2010-01-01?enddate=2011-01-01 HTTP/1.1" 200 -

Here is my javascript code

<script type="text/javascript">
function stock() {
console.log('pass 1')
url = 'http://127.0.0.1:5000/json/' + document.getElementById("ticker").value + '/?startdate=' + document.getElementById("startdate").value + '?enddate=' + document.getElementById("enddate").value
$.getJSON(url, function(data) {
    console.log('pass 2')
    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        dataLength = data.length;

    for (i = 0; i < dataLength; i++) {
        ohlc.push([
            data[i]["date"], // the date
            data[i]["open"], // open
            data[i]["high"], // high
            data[i]["low"], // low
            data[i]["close"] // close
        ]);

        volume.push([
            data[i]["date"], // the date
            data[i]["volume"] // the volume
        ])
    }

    // set the allowed units for data grouping
    var groupingUnits = [[
        'week',                         // unit name
        [1]                             // allowed multiples
    ], [
        'month',
        [1, 2, 3, 4, 6]
    ]];

    // create the chart
    $('#container').highcharts('StockChart', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Historical'
        },

        yAxis: [{
            title: {
                text: 'OHLC'
            },
            height: 200,
            lineWidth: 2
        }, {
            title: {
                text: 'Volume'
            },
            top: 300,
            height: 100,
            offset: 0,
            lineWidth: 2
        }],

        series: [{
            type: 'candlestick',
            name: 'AAPL',
            data: ohlc,
            dataGrouping: {
                units: groupingUnits
            }
        }, {
            type: 'column',
            name: 'Volume',
            data: volume,
            yAxis: 1,
            dataGrouping: {
                units: groupingUnits
            }
        }]
    });
});
}
</script>

and my python code for the json request

@app.route('/json/<ticker>/', methods = ['GET'])
def json_route(ticker):
startdate = request.args.get('startdate','')
enddate = request.args.get('enddate','')
check = datecheck(startdate,enddate)
if check != 'pass':
    return check
check = datacheck(ticker,startdate,enddate)
if check != 'got data':
        urldata(ticker)
print '-----------------data-----------------'
conn = engine.connect()
entries = conn.execute(select([Stocks]).where(Stocks.symbol == ticker ).where(Stocks.date.between(startdate,enddate))).fetchall()
stocklist = []
print entries
for x in entries:
    stocklist.append({
        'volume': float('%f' %x[7]),
        'high': float('%.2f' %x[4]),
        'open': float('%.2f' %x[3]),
        'low': float('%.2f' %x[5]),
        'close': float('%.2f' %x[6]),
        'date': str(x[2]),
        'stock': x[1],
                     })
conn.close()
return json.dumps(stocklist)

What am I doing wrong? I assumed getjson would be doable if its on the same domain localhost. only console.log('pass one') works and shows up in the console when inspecting the element. Pass two is never hit.

Answer 1

Judging by the error message "only supported for HTTP", it wants an HTTP URL. Have you tried:

url = 'http://127.0.0.1:5000/json/...