Getting Started

This example shows you how to implement intraday chart with realtime data.

Implementation

<!-- Including VobcoCharts js library -->
<script type="text/javascript" src="/js/vobcocharts-{$version}.min.js"></script>
<!-- Including VobcoCharts stylesheet file. Images folder named 'img' also must be copied in same level as vobcocharts stylesheet file. -->
<link href="/css/vobcocharts.css" rel="stylesheet" />
        
<!-- Chart container element -->
<div id="chart_container"></div>

var chart = new VobcoCharts.Chart(document.getElementById("chart_container"), "AAPL");
chart.interval.setDefaultDayToWeekIntervals("data/{$ticker}.json");
chart.create();

var updateData;
$.getJSON("/Content/data/AAPLupdate.json", function(json) {
    updateData = json;
});
var index = 0;
function updateChart() {
    if (index > updateData.date.length - 1) {
        return;
    }
    chart.updateTick(new Date(updateData.date[index]), updateData.close[index], updateData.high[index], updateData.low[index], updateData.open[index], updateData.volume[index]);
    index += 1;
    setTimeout(updateChart, 1000);
}
chart.on("chart_initialized", function () {
    setTimeout(updateChart, 1000);
})

// Parameters for defining JSON data to load into charts
{
'date': [],   // define array of date-formatted string values, e.g. ["02/13/2017 09:30", "02/13/2017 09:31", "02/13/2017 09:32"...]
'open': [],   // define array of decimal/float/double values, e.g. [402.000000, 370.000000, 363.500000...]
'high': [],   // define array of decimal/float/double values, e.g. [419.000000, 372.000000, 375.000000...]
'low': [],    // define array of decimal/float/double values, e.g. [370.020000, 358.000000, 363.020000...]
'close': [],  // define array of decimal/float/double values, e.g. [380.000000, 366.500000, 373.000000...]
'volume': []     // define array of integer values, e.g. [758624, 388931, 237290...]
}