Getting started

This is simplest example of chart. Only required options are set. Chart minimal configuration needs only 3 lines of javascript code. For more information go to api documentation.

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"), "ticker-A");
chart.interval.setDefaultDayToWeekIntervals("/Content/data/{ticker}.json");
chart.create();
// Parameters for defining JSON data to load into vobcocharts
// Minimal data, OHLC or candlestick won't be available, same as some technical indicators that requires OHLC
{
'date': [],   // define array of date-formatted string values, e.g. ["2007-10-04T22:00:00.000Z", "2007-10-08T22:00:00.000Z", "2007-10-09T22:00:00.000Z"]
'close': [],  // define array of decimal/float/double values, e.g. [380.000000, 366.500000, 373.000000]
}
// With OHLC all technical indicators supported by VobcoCharts are available.
{
'date': [],   // define array of date-formatted string values, e.g. ["2007-10-04T22:00:00.000Z", "2007-10-08T22:00:00.000Z", "2007-10-09T22:00:00.000Z"]
'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. [609831, 134589, 194668]
}
Try out yourself