Visual Builder

Get Involved. Join the Conversation.

Topic

    Sunil Kumar
    How to display Donut Graph using Custom Data Object Defined...
    Topic posted March 6, 2019 by Sunil KumarRed Ribbon: 250+ Points, tagged Action Flows, Custom Code, JET, Layout, UI, Web 
    79 Views, 1 Comment
    Title:
    How to display Donut Graph using Custom Data Object Defined in Module Function
    Summary:
    How to display Donut Graph using Custom Data Object Defined in Module Function
    Content:
    Hi Wizards,
     
    I am trying to display VBCS donut graph using custom data object I created in module function.
     
    To achieve the above task --> I created a PageModule.prototype.graph function with custom object defined below
     
    var pieSeries = [{
            name: "Series 1",
            items: [42]
          },
          {
            name: "Series 2",
            items: [55]
          }];  
      
    return pieSeries;
     
     
    Then I am assigning this variabe (returned by above func) in action chain to a variable lets say graph_data_array of type array.
     
    In UI I dragged the donut graph & assigned the data to graph_data_array.
     
    But some how its not working. There is no error but graph also not coming. Just No data to display is coming  
     
     
    I am able to display data using business object directly to graph (in that case it automatically creates a service data provider variable) , but i want to assign the custom object that i build in module function to graph.
     
    Is there any way possible to achieve this, looks like the approach I used is not right.
     
    Thanks in advance.
     
    Regards
    Sunil
    Version:
    18.4.5

    Comment

     

    • Shay Shmeltzer

      The best approach if your data is coming from a REST service is to bind an SDP or ADP directly to the chart.

      But if you really want data to come back from a function then the following works for me:

      JavaScript function in the page:

      define(['knockout'], function(ko) {
        'use strict';

        var PageModule = function PageModule() {};

        PageModule.prototype.chartData = function() {
          var pieSeries = [{
              name: "Series 1",
              items: [42]
            },
            {
              name: "Series 2",
              items: [55]
            },
            {
              name: "Shay",
              items: [36]
            }
          ];
          var pieSeriesValue = ko.observable(pieSeries)
          return pieSeriesValue;

        }
        
        return PageModule;
      });

      HTML code in the page:

                  <oj-chart series="{{$page.functions.chartData()}}" type="pie" style-defaults.pie-inner-radius="0.9" pie-center.label="Center Label" class="oj-sm-flex-initial oj-flex-item oj-sm-12 oj-md-6" style="max-width:100%;" id="oj-chart-1496517454-2">
                  </oj-chart>