New Topic

Community Topic Question Chart Builder

Category Chart Builder

Product Version 7.3

JavaScript Charts Loading Issue

Renato Marcello dos Reis shared this question ago

Answered

Hi everyone,

Could you guys help me with a issue that I'm trying to resolve without success?

I've created a JavaScript Chart, using one of the

charts provided by google . The specific chart created was an simple BarChart.

The problem, is that when I'm on creation window, if I jump to preview tab, the chart says that theres something wrong and doesn't load correctly, but if I just return to javascript chart and go back to preview, it loads without any problem.

If I just ignore this and go directly to design tab so I can see how it would be when I save this JavaScript chart, it doesn't load. But it load's if I switch on/off the source table of the created chart. It seems that this is some kind of refresh issue, but I've read the code too many times and I didn't found anything. Maybe it's just a coincidence, but this issue just happens when I use google charts library. It doesn't happen when I'm using github charts.

Can someone help me?

I've attached the code so you guys can see if there's anything I did wrong. There's also two prints showing the chart with error and the chart without error.

Files:

The same question

Replies (2)

Paul Thornton ●

Hi Renato,

Thanks for getting in touch. Custom Javascript Charts are generally seen as more of a technical consultant level of support, but I will see what we can do for you.

So firstly can I get you to try using the google JS chart located here to see if you are getting the same problem please so we might be able to determine if it's the actual code you are using or something else.

Thank you,

Paul

Reply URL

Renato Marcello dos Reis ●

Hi Paul.

Thanks for your help. I'm gonna give it a try and post the results here.

URL

Renato Marcello dos Reis ●

Hi again Paul.

I've finished my tests and realise that the problem only happens with google charts as said before. By using the same methods on other sources, the charts loaded correctly.

The strange thing, is that google chart loads if we just simple switch between tabs, but never at a first try.

Is there any tip you could give to help me resolve this?

URL

Paul Thornton ●

Hi Renato,

Please leave this with me as I will need to seek further assistance with this and will get back to you asap.

Regards,

Paul

Reply URL

Renato Marcello dos Reis ●

Hi Paul,

First of all, thanks a lot for your assistance.

I've solved the problem by doing a simply change in the code I wrote. I'm gonna transcript here so you guys can take notes and maybe for another user who has the same issue.

The original code was like this:

google.charts.load('current', {'packages':['bar']});
var processedDataNew = google.visualization.arrayToDataTable(data);
google.charts.setOnLoadCallback(processedDataNew);
var chart = new google.charts.Bar($chartDiv[0]);
var options =
{
'height': height,
'width': width,
'colors': 'steelblue',
'legend': 'left'
};
chart.draw(processedDataNew, options);

In the following code, I created a function who has all the draw functions in it, and then, called this function on setOnLoadCallback. Tough the Yellowfin does warn us not to do this, it worked well.

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var processedDataNew = google.visualization.arrayToDataTable(data);
var chart = new google.visualization.AreaChart($chartDiv[0]);
var options =
{
'height': height,
'width': width,
'colors': 'steelblue',
'legend': 'left'
};
chart.draw(processedDataNew, options);
}

Thanks a lot.

Hi Paul,

First of all, thanks a lot for your assistance.

I've solved the problem by doing a simply change in the code I wrote. I'm gonna transcript here so you guys can take notes and maybe for another user who has the same issue.

The original code was like this:

google.charts.load('current', {'packages':['bar']});
var processedDataNew = google.visualization.arrayToDataTable(data);
google.charts.setOnLoadCallback(processedDataNew);
var chart = new google.charts.Bar($chartDiv[0]);
var options =
{
'height': height,
'width': width,
'colors': 'steelblue',
'legend': 'left'
};
chart.draw(processedDataNew, options);

In the following code, I created a function who has all the draw functions in it, and then, called this function on setOnLoadCallback. Tough the Yellowfin does warn us not to do this, it worked well.

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var processedDataNew = google.visualization.arrayToDataTable(data);
var chart = new google.visualization.AreaChart($chartDiv[0]);
var options =
{
'height': height,
'width': width,
'colors': 'steelblue',
'legend': 'left'
};
chart.draw(processedDataNew, options);
}

Thanks a lot.

URL

Paul Thornton ●

Hi Renato,

This is great news and thank you very much for providing your own solution. This is a great help and will certainly help others down the track. We really appreciate this in the community.

Regards,

Paul

URL