How to use CSS with Google Org Chart using JavascriptCharts?

Hi Ingo,

Thanks for reaching out to Yellowfin support.

I have shared one wiki page below that explains the yellowfin javascript chart.
https://wiki.yellowfinbi.com/display/yfcurrent/JavaScript+Charts

https://wiki.yellowfinbi.com/pages/viewpage.action?pageId=9502816

Currently, Yellowfin has this functionality. You can style the chart using CSS. If you have any unique requests, do let me know (please include a screen shot of the style you need). I'll check into it and get back to you.

Regards,

Sri Vamsi

Hi Ingo,

Hope things are good on your end. Just wanted to check in to make sure you had what you needed here.

Regards,

Sri Vamsi

Hi Sri,

Thank you for your help. I knew about those documentation pages. I was more after a working example with Google Org-Charts, as I could not get the CSS styling to work with it.

Best regards,

Ingo

Hi Ingo,

Thanks for your response.

I would like to ask steps on how exactly is the google org chart is being implemented? we have searched the market place, I could find two connectors:

Could you please let us know if are using this connectors to connect to Datasource and then creating chart from this data>? or is it a separate plugin ? or a JavaScript library that is included?

Regards,

Sri Vamsi

Hi Sri,

we are importing the library in the JavascriptCharts, just like in the examples. We are just not able to make the CCS part work and haven't found a solution or example, yet.

At the bottom you will find some code that we use and that does render an org chart.

Best regards,

Ingo

//generateChart is a required function which will be called to generate your Javascript chart
generateChart = function(options) {
    
    
    
    require(['https://www.gstatic.com/charts/loader.js'], function() {
        var errorFunction = options.errorCallback;
        // This is the div you draw your chart into
        var $chartDrawDiv = $(options.divSelector);
              

    
            google.charts.load('current', {packages:["orgchart"]});
           
       
            // This will trigger a breakpoint in your browser debugger so you can debug your javascript
            //debugger;
            
               
            // To stop scrollbars in any portlets regardless of your javascript, use this css class
              // $chartDrawDiv.addClass('jsChartNoOverflow');
            
               // This gets the height and width from the dataset. Use these when creating your chart so that
               // it will fit the dashboard, canvas and storyboard correctly
              // var height = options.dataset.chart_information.height;
              // var width = options.dataset.chart_information.width;
            
               // Convert the raw data JSON to the format required for the chart if required.
               var processedData = processData(options.dataset.data);
            
               // Do the actual drawing of the chart into $chartDiv.
               //google.charts.setOnLoadCallback(doDrawing(processedData, $chartDrawDiv, height, width));
            google.charts.setOnLoadCallback(doDrawing(processedData, $chartDrawDiv, options.dataset.chart_information.height, options.dataset.chart_information.width, options.dataset.attributes.default_colours));

    });
},


processData = function(dataset) {

   // Data is in the dataset in a column based format, where each column has an array of data
   // eg. dataset.column_name[0].raw_data, dataset.column_name[0].formatted_data
  
       var data =[['kpi_name','parent_kpi','change_abs']] ;
       let j = 0 ;
       while(j < dataset.kpi_name.length-2){
          for ( var i=j;i<j+3;i++){
              if(parseFloat(dataset.change_abs[i].formatted_data)>=0){
             data.push([
                {'v':dataset.kpi_name[i].formatted_data, 'f':dataset.kpi_name[i].raw_data +'<div style="color:green; font-style:italic">'+ dataset.change_abs[i].raw_data + dataset.abs_suffix[i].formatted_data+'</div>'},
                dataset.parent_kpi[i].raw_data,
                dataset.change_abs[i].formatted_data ,
                ])}
                else {
                  data.push([
                {'v':dataset.kpi_name[i].formatted_data, 'f':dataset.kpi_name[i].raw_data +'<div style="color:red; font-style:italic">'+ dataset.change_abs[i].raw_data + dataset.abs_suffix[i].formatted_data+'</div>'},
                dataset.parent_kpi[i].raw_data,
                dataset.change_abs[i].formatted_data ,
                ])  
                }
          };
              
        j=j+1;
            
        }
       
       
        
      return new google.visualization.arrayToDataTable(data);
},

doDrawing = function(data, $chartDiv, height, width) {

   
   var chart = new google.visualization.OrgChart($chartDiv[0]);
   
       var options = {
           
           height : height,
           width : width,
           legend : 'left',
           allowHtml: true,
           compactRows: false
       };
       
       chart.draw(data,options);
  
}

Hi Ingo,

Greetings of the Day!

I would like to have a remote session with you regarding this issue. I'll be available in between 9 PM IST to 6 AM IST. Could your please let me know your available time to schedule a meeting?

Regards,

Sri Vamsi

Hi Sri,

9pm IST today should be fine as that is 5pm CEST.

Regards,

Ingo

Hi Ingo,

Can we connect at 6PM CEST or else please let me know if we can connect tomorrow at 5PM CEST. I'll share you the meeting invite.

Regards,

Sri Vamsi

Hi Sri,

now is fine, too. Do you have my contact details?

Best regards,

Ingo

Hi Ingo,

Thanks for your response.

Could you please join the meeting invite to discuss further.

Teams Meeting

Regards,

Sri Vamsi

I'm waiting in the meeting lobby.

Hi Ingo,

Thanks for joining the call, Can you please share the info.jsp file as well.

To access this page, just append info.jsp to your YF URL.

E.g. http://localhost:8080/info.jsp

Regards,

Sri Vamsi

Hi Vamsi,

Here are the information the rest I won't paste into a public topic.

Best regards,

Ingo

Operating Environment System Properties

Hi Ingo,

Thanks for sharing the details. As discussed, I have raised a Jira task to our product team. I'll get back to you once I receive an update from them.

Regards,

Sri Vamsi

Hello Ingo,

Greetings for the Day!We have a good news from the Product team regarding this case. We would like to inform you that, this issue has been addressed and fixed in our 9.10 version which was released on 11th November 2023. You can find release notes and downloads here - https://portal.yellowfinbi.com/public/releases/homeFor now, we will go ahead and mark this ticket as "Defect Fixed" for the time being. If you require any assistance, feel free to reach out to us.

Regards,

Sri Vamsi

Hi,

Could you please point me to the part of the release notes or give me some more information to what is fixed in regards to this topic? I can't really find anything.

Thanks,

Ingo

Hello Ingo,

Greetings of the Day!
Could you please go through the attached screenshot which Address an issue with some Javascript Charting libraries over-writing the injected Chart styles.

Regards,

Sri Vamsi

Great thanks...did not catch that one!