JS chart error

Hello,

You may need to reference the data object as:

option.dataset.data['camp_region'].length

If this works, this format should be used for all data objects.

you can test what an object returns by writing to the console log:

consol.log([data object])

I hope this helps!

Best regards,

Pete

Hi Peter,

Thanks for the reply, even then it is showing the same issue.

This is the complete code which is explained in the above mentioned vedio.I wanted to know whether I need to add any other files in the Root/js/chartinglibraries.

generateChart = function(options) {

var $chartDrawDiv = $(options.divSelector);

// console.log(JSON.stringify(options));

var height = options.dataset.chart_information.height;

var width = options.dataset.chart_information.width;

var colours=options.dataset.attributes.default_colours;

require(['https://www.gstatic.com/charts/loader.js'], function(d3) {

google.charts.load('current', {packages: ['bar']});

google.charts.setOnLoadCallback(function(){

var processedData = processData(options.dataset.data);

// debugger;

doDrawing(processedData, $chartDrawDiv, height, width,colours);

});

});

},

processData = function(dataset) {

//debugger;

var ds=[['Region','Invoiced','Invoice Estimate']];

for(var i=0;i<dataset.camp_region.length;i++){

// console.log([camp_region]);

ds.push([

dataset.camp_region[i].formatted_data,

parseFloat(dataset.invoiced[i].raw_data),

parseFloat(dataset.invoice_estimate[i].raw_data)

]);

}

return google.visualization.arrayToDataTable(ds);

},

doDrawing = function(data, $chartDrawDiv, height, width,colours) {

var chart=new google.charts.Bar($chartDrawDiv[0]);

var options={

height:height,

width:width,

colors:colours,

legend:'left'

};

chart.draw(data.options);

};

Hi Madhurima,

I was able to get your code to work by changing these two lines:

• parseFloat(dataset.invoiced[i].raw_data), - unless you have changed the column name this should be invoiced_amount
• chart.draw(data.options); - this is supposed to be "data, options" as the google chart draw requires you to pass in both data and the table definitions

Please let me know if this works for you.

Regards,

Nathan

Thank you Nathan,

Its working fine. Suppose when we add Gender column in report data, automatically camp-region column splits say Asia comes in two rows for male and female. Then in chart level also same repetition occurs. How to resolve this? Mean while i would like to add Gender column as user interactive filter. How can I achieve this. can you please explain this

Hi Madhurima,

Content creation and tweaking for JS charts fall more under the realm of paid services than support, but for the time being, I will give you some broad answers.

The duplication when a new column is added: This will need to be accounted for in your processData function by adding something such as: if already in table, dont use.

Regarding filters: There are some JS charts that will do this, but Yellowfin's normal filters will do this as well. I would suggest simply using a normal YF filter here. The data that is passed to your JS chart is the final product so any advanced functions, filtering, etc is done prior to the JS chart.

Let me know if this makes sense.

Regards,

Nathan

Hi Madhurima,

I am going to set this ticket to closed for now, but if there is anything else I can do to help here, please just let me know and the case will be re-opened!

Regards,

Nathan

Yeah sure. you can close the ticket