VobcoCharts - Tutorials | Initialization

Tutorials

Initialization

This are the steps you need to follow in order to show your first chart.

Include vobcocharts library into HTML file in which you wish to show chart.

Script can be included in head or anywhere in body, only requirement is that it has to be included before creating chart.
```
<script type="text/javascript" src="/js/vobcocharts-{version}.min.js"></script>
```
Add container element in which VobcoCharts will be shown. You don't need to set id to mychart, it can be whatever you like. ID attribute is not even needed for charts at all, you just have to pass parent DOM object to chart initialization.
```
<div id="mychart"> </div>
```
Chart initialization should go to body, you can run it whenever you want. It's only important that vobcocharts library has already been included.
```
<script>
    var container = document.getElementById("mychart")
    var chart = new VobcoCharts.Chart(container, "YourTicker");
    chart.interval.setDefaultDayToWeekIntervals("http://yourdomain.com/chart-data/{ticker}");
    chart.create();
</script>
```
Please note that YourTicker should be replaced with whatever ticker you want to be displayed. {ticker} in your data url will be replaced with your ticker value to, and chart data will load from data url you've set.
See this json example how JSON should be formated to be compatible with default ajax data loader.

In order that tooltip and forms for adding technical indicator has some normal shape you also need to styleize it. Include this css code in your HTML for default VobcoCharts appereance. You can customize it however you want to suits your needs. It's also possible to completelly change HTML structure of all elements, set attributes you need and completelly modify how something will look like.

<style>
            .backdrop {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: block;
            filter: alpha(opacity=60);
            -moz-opacity: 0.6;
            opacity: 0.6;
            background-color: #000000;
        }
        .indicator-form-container {
            position: fixed;
            left: 50%;
            top: 100px;
            width: 450px;
            margin-left: -225px;
            border-radius: 5px;
            background-color: #ffffff;
            border: 2px solid #ffffff;
        }
        .indicator-form-title {
            background-color: #00415D;
            height: 20px;
            color: #fff;
            font-size: 16px;
            line-height: 20px;
            text-indent: 20px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            margin: 0;
            margin-bottom: 20px;
        }
        .indicator-form-container label {
            width: 30%;
            float: left;
            text-align: right;
            margin-right: 10px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
        }
        .indicator-form-container select, .indicator-form-container input {
            width: 60%;
            float: left;
            height: 30px;
            border: 1px solid gray;
            border-radius: 4px;
            margin-bottom: 10px;
            text-indent: 5px;
        }
        .indicator-form-container .draw-button {
            border: 1px solid gray;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            background-color: #228822;
            float: right;
            margin: 10px;
            color: #fff;
        }
        .indicator-form-container .cancel-button, .remove-all-button {
            border: 1px solid gray;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            background-color: #882222;
            float: left;
            margin: 10px;
            color: #fff;
        }
</style>

With all these set you should be able to see your first chart. VobcoCharts suppport many different options, to see how easy it is to configure it move to next tutorial Configuring VobcoCharts.