CODEWITHSUNDEEP
jsonhighchartsyahoo-finance
Vishal Lakha
Vishal Lakha

Reputation: 1

how to import JSON data into highstocks candlestick type graph?

I am working on a stock analyzer project ,i ve got all the stock quotes from yahoo finance,and now i want to make dynamic graphs of them.i m using highstock-candlestick from highcharts.com ...i have zero information regarding JSON. i ve seen that there's one code to import data into chart.i ve got the stock quotes using STOCK ANALYZER TUTORIALS OF "THENEWBOSTON"..i jst need to know how to link that data to highstock..

this is the sample data...how can i add real data from yahoo finance website??? Plz help

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highstock Example</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <style type="text/css">
${demo.css}
    </style>
    <script type="text/javascript">
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data) {

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


        rangeSelector : {
            inputEnabled: $('#container').width() > 480,
            selected : 1
        },

        title : {
            text : 'AAPL Stock Price'
        },

        series : [{
            type : 'candlestick',
            name : 'AAPL Stock Price',
            data : data,
            dataGrouping : {
                units : [
                    [
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]
                ]
            }
        }]
    });
});
});

    </script>
</head>
<body>

Upvotes: 0

Views: 1720

Answers (1)

Arnab
Arnab

Reputation: 154

Although its little late, I thought this might be useful for someone looking for similar solution. The JSFiddle example shows stock price of GOOG from Yahoo Fiance using YQL

$(function () {

$.getJSON("https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent("select Date, Open, High, Low, Close from csv where url='http://real-chart.finance.yahoo.com/table.csv?s=GOOG&d=2&e=4&f=2015&g=d&a=2&b=27&c=2014&ignore=.csv' and columns='Date,Open,High,Low,Close,Volume,Adj Close'") + "&format=json&callback=?", function (data) {

    //console.log(data.query.results);
    var data = data.query.results.row;
    data = data.splice(1, data.length);
    //console.log(data);

    var processedData = [];
    $(data).each(function(index, value) {
       //console.log(Date.parse(value.Date).getTime());
       //console.log(Date.parse(value.Date));
        processedData.push([Date.parse(value.Date), parseFloat(value.Open), parseFloat(value.High), parseFloat(value.Low), parseFloat(value.Close)]);
    });
    processedData = processedData.reverse();
    //console.log(processedData);

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


        rangeSelector : {
            selected : 1
        },

        title : {
            text : 'GOOG Stock Price'
        },

        series : [{
            type : 'candlestick',
            name : 'GOOG Stock Price',
            data : processedData,
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});

});

Upvotes: 1

Related Questions