Tutorials

Dependency Injection

VobcoCharts include some "dummy" implementation of dependency injection. This assures you can change almost every component with your own.

VobcoCharts is written in typescript and we have some interfaces defined but some are still missing. To change class without interface you can allways extend our own class and override method(s) you want with your own implementation. Biggest help here should be our api reference which is allways up to date with code.

Since javascript itself does not support reflection complete DI system is not really possible, that's why it is written "dummy implementation of dependency injection". Idea behind coding this library is to have set of decoupled classes and being able to customize behaviour of charts as much as possible. This is implemented in way that you have DI container where all classes are initialized. For different Container (changing it) you should look at ContainerFactory code:

{
    namespace VobcoCharts
    {
        'use strict';
        import Settings = VobcoCharts.Settings.Settings;
        export class ContainerFactory implements IContainerFactory
        {
            /**
             * @@param canvas
             * @@param settings
             * @@returns {VobcoCharts.Container}
             */
            public create(canvas: HTMLCanvasElement, settings: Settings): Container
            {
                var container = new Container();
                container.canvas = canvas;
                container.settings = settings;
                container.context = canvas.getContext('2d');
                container.drawUtils = new DrawUtils(container.context, settings.theme);
                container.translator = new Translator(settings.language);
                container.chartInterval = new ChartInterval(container.data, container.settings);
                return container;
            }
        }
    }
}

Please note that VobcoCharts.Chart object receives ContainerFactory as dependency and if you pass him one you can change implementation of various classes there. We're working hard on it to extend it and to support it for almost every class but that can take some time. In this way you can change behaviour on almost anything on your chart. If you get into trouble you can always contact us.

In this example we will show you how to change data loader class.

First create your own DataLoader class either from scratch implementing IDataLoader or by modifying default.

Typescript implementation

• New class
• Extending default

//file: MyDataLoader.ts
namespace YourNamespace
{
    import IDataLoader = VobcoCharts.DataLoaders.IDataLoader;
    import Data = VobcoCharts.Data;
    export class MyDataLoader implements IDataLoader
    {
        public load(callback: (data: Data) => void): void 
        { 
            //your implementation
        }
    }
}

//file: MyDataLoader.ts
namespace YourNamespace
{
    import Data = VobcoCharts.Data;
    import AjaxDataLoader = VobcoCharts.DataLoaders.AjaxDataLoader;
    export class MyDataLoader extends AjaxDataLoader
    {
        public load(callback: (data: Data) => void): void
        {
            //your implementation
        }
    }
}

Javascript implementation

• New class

//file: MyDataLoader.js
var YourNamespace;
(function (YourNamespace) {
    var MyDataLoader = (function () {
        function MyDataLoader() {
        }
        MyDataLoader.prototype.load = function (callback) {
            //your implementation
        };
        return MyDataLoader;
    }());
    YourNamespace.MyDataLoader = MyDataLoader;
})(YourNamespace || (YourNamespace = {}));

//file: MyDataLoader.js
//not sure yet