AnsweredAssumed Answered

Integrating JavaScript Library/Custom Directive (Angular-nvD3) into PI Vision?

Question asked by NyameyeO on Oct 30, 2017
Latest reply on Feb 14, 2019 by Maccaferri

Hello developers of PI Square!

 

I've ran into some trouble while attempting to develop a symbol which uses this Angular Directive (which in turn is based off of the D3 Library - nvD3).

 

I have placed all of the required files (D3.js, nv.d3.js, nv.d3.css, angular-nvd3.js and ofcourse Angular.js is also running), I have then followed this steps on this page Angular-nvD3 e.g.

In the sym-template I have

 

 

And in my sym-js I ave the following code in the .init function.

scope.options = {
    chart: {
        type: 'discreteBarChart',
        height: 450,
        margin : {
            top: 20,
            right: 20,
            bottom: 60,
            left: 55
        },
        x: function(d){ return d.label; },
        y: function(d){ return d.value; },
        showValues: true,
        valueFormat: function(d){
            return d3.format(',.4f')(d);
        },
        transitionDuration: 500,
        xAxis: {
            axisLabel: 'X Axis'
        },
        yAxis: {
            axisLabel: 'Y Axis',
 axisLabelDistance: 30
        }
    }
};



 

scope.data = [{
    key: "Cumulative Return",
    values: [
        { "label" : "A" , "value" : -29.765957771107 },
        { "label" : "B" , "value" : 0 },
        { "label" : "C" , "value" : 32.807804682612 },
        { "label" : "D" , "value" : 196.45946739256 },
        { "label" : "E" , "value" : 0.19434030906893 },
        { "label" : "F" , "value" : -98.079782601442 },
        { "label" : "G" , "value" : -13.925743130903 },
        { "label" : "H" , "value" : -5.1387322875705 }
        ]
    }]


However, the symbol does not appear in the PI Vision Display, or even throw any errors, if I drag it onto the Display with a Sinusoid tag, it is a large transparent box with no functionality whatsoever :-

 

I believe it has something to do with the way PI Vision Processes these files or my files being in the wrong folder, however I have tried various fixes to no avail. Any help given would be greatly appreciated.

Thanks in advance!

Outcomes