6 Replies Latest reply on Nov 1, 2017 7:43 AM by NyameyeO

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

    NyameyeO

      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!