Re: [Google Chart] - Displaying chart in an Axaj Modal Dialog

[Samuel Pelletier]

When using onComplete (and others javascript) bindings, the function need to be 
defined when the javascript objects is created. If you want to call a function 
not already defined, you need to bind to something like "function 
(){drawChart();}" to create an indirection.

Samuel

> Le 2015-05-11 à 11:16, Dev WO  a écrit :
> 
> You are right, it’s clearly more a regular ajax issue than a WO one, so I was 
> already looking towards ajax related comment through a modal dialog.
> Currently, the modal dialog get the correct string representation of the 
> javascript function, and also gets updated correctly (like adjusting the date 
> range to display the data).
> 
> I’m still investigating on the actual drawing of the chart. I’ve put the 
> script function inside an ajaxupdatecontainer and try to use the onComplete 
> which I though would be called when the content of the ajaxupdatecontainer is 
> loaded, but that doesn’t seem to work as I get a javascript error “can’t find 
> variable drawChart (the name of the js function)". So I assume somehow it’s 
> not fully loaded when the update container think onComplete should be called.
> 
> Anyway, this really seems to be a timing issue, I’m investigating this.
> 
> Thanks for your help,
> 
> I’ll try to update that thread if I can find a “nice” way to make it work.
> 
> Xavier
> 
> 
>> On 11 mai 2015, at 14:59, Samuel Pelletier > > wrote:
>> 
>> Xavier,
>> 
>> There is maybe some other dependency or expectation about the execution 
>> context in the graph library that break it outside the normal page rendering 
>> process.
>> 
>> You will need to trace or search on how to use this API inside a modal 
>> dialog with AJAX contents. There is no real difference between using WO or 
>> any other web server technology for these problems.
>> 
>> Samuel
>> 
>>> Le 2015-05-10 à 10:09, Dev WO >> > a écrit :
>>> 
>>> Hi Samuel,
>>> 
>>> I though I did that, but it looks like maybe not:)
>>> I may have been misled as I was actually displaying the graph inline on the 
>>> main content (to see if I actually got stuff to display), and also through 
>>> the modal dialog. When I removed the call in the main content, it wouldn’t 
>>> display in the modal anymore…
>>> So currently I’m generating the javascript inline within the main content, 
>>> and basically just call to draw it in the modal dialog. But I don’t like 
>>> that because I’m spending time generating the javascript chart directly 
>>> inside the main content when it may not get called at all.
>>> 
>>> But I think the call to draw isn’t fully working (or maybe not at the right 
>>> time). Also I’m fighting with data format, it’s really more painful than I 
>>> though to use it.
>>> 
>>> I’ll succeed eventually, but I’m not that confident it will be a “right 
>>> way” to do it;)
>>> 
>>> Thanks for your tips,
>>> 
>>> 
>>> Xavier
>>> 
 On 7 mai 2015, at 17:40, Samuel Pelletier >>> > wrote:
 
 Xavier,
 
 Your function drawChart is never called. I suppose 
 "google.setOnLoadCallback(drawChart);" add some sort of onLoad handler but 
 an Ajax request will never trigger it.
 
 A simple way that should work is to put a script after all the required 
 HTML elements for the graph with this content:
 
 
drawChart();
 
 
 There is probably another way with AMD call back but this is tricky since 
 the function "drawChart" does not exists when the AMD is created.
 
 Samuel
 
> Le 2015-05-04 à 11:48, Dev WO  > a écrit :
> 
> Hi Samuel,
> 
> I didn’t mention the console as there was nothing there.
> 
> Let’s try to give more context:)
> 
> I’ve got a component which is supposed to be the content of the modal 
> dialog, let’s call it “Chart”
> This component is
> 
> TEST
> 
> The $googleChartGenerationString generate something like this for example:
> 
> google.setOnLoadCallback(drawChart);
> function drawChart() {
> var data = new google.visualization.DataTable();
> data.addColumn('datetime', 'Date');
> data.addColumn('number', 'Points');
> data.addRows([
> [new Date(2015, 4, 3, 23, 44, 48), 1247],
> [new Date(2015, 4, 3, 23, 47, 43), 1247],
> [new Date(2015, 4, 4, 0, 24, 43), 1247],
> [new Date(2015, 4, 4, 4, 34, 55), 1247]]);
> var options = {
> curveType: 'none',
> legend: 'none',
> width: 900,
> height: 500
> };
> var chart = new 
> google.charts.Line(document.getElementById('chart_points'));
> chart.draw(data, options);
> }
> 
> 
> If I’m placing this component inline in its parent component (which is 
> called via a regular component action, meaning the parent isn’t called 
> from an ajax request), everything is fine, the chart is displayed.
> 
> If I’m placing th

Re: [Google Chart] - Displaying chart in an Axaj Modal Dialog

[Dev WO]

You are right, it’s clearly more a regular ajax issue than a WO one, so I was 
already looking towards ajax related comment through a modal dialog.
Currently, the modal dialog get the correct string representation of the 
javascript function, and also gets updated correctly (like adjusting the date 
range to display the data).

I’m still investigating on the actual drawing of the chart. I’ve put the script 
function inside an ajaxupdatecontainer and try to use the onComplete which I 
though would be called when the content of the ajaxupdatecontainer is loaded, 
but that doesn’t seem to work as I get a javascript error “can’t find variable 
drawChart (the name of the js function)". So I assume somehow it’s not fully 
loaded when the update container think onComplete should be called.

Anyway, this really seems to be a timing issue, I’m investigating this.

Thanks for your help,

I’ll try to update that thread if I can find a “nice” way to make it work.

Xavier


> On 11 mai 2015, at 14:59, Samuel Pelletier  wrote:
> 
> Xavier,
> 
> There is maybe some other dependency or expectation about the execution 
> context in the graph library that break it outside the normal page rendering 
> process.
> 
> You will need to trace or search on how to use this API inside a modal dialog 
> with AJAX contents. There is no real difference between using WO or any other 
> web server technology for these problems.
> 
> Samuel
> 
>> Le 2015-05-10 à 10:09, Dev WO > > a écrit :
>> 
>> Hi Samuel,
>> 
>> I though I did that, but it looks like maybe not:)
>> I may have been misled as I was actually displaying the graph inline on the 
>> main content (to see if I actually got stuff to display), and also through 
>> the modal dialog. When I removed the call in the main content, it wouldn’t 
>> display in the modal anymore…
>> So currently I’m generating the javascript inline within the main content, 
>> and basically just call to draw it in the modal dialog. But I don’t like 
>> that because I’m spending time generating the javascript chart directly 
>> inside the main content when it may not get called at all.
>> 
>> But I think the call to draw isn’t fully working (or maybe not at the right 
>> time). Also I’m fighting with data format, it’s really more painful than I 
>> though to use it.
>> 
>> I’ll succeed eventually, but I’m not that confident it will be a “right way” 
>> to do it;)
>> 
>> Thanks for your tips,
>> 
>> 
>> Xavier
>> 
>>> On 7 mai 2015, at 17:40, Samuel Pelletier >> > wrote:
>>> 
>>> Xavier,
>>> 
>>> Your function drawChart is never called. I suppose 
>>> "google.setOnLoadCallback(drawChart);" add some sort of onLoad handler but 
>>> an Ajax request will never trigger it.
>>> 
>>> A simple way that should work is to put a script after all the required 
>>> HTML elements for the graph with this content:
>>> 
>>> 
>>> drawChart();
>>> 
>>> 
>>> There is probably another way with AMD call back but this is tricky since 
>>> the function "drawChart" does not exists when the AMD is created.
>>> 
>>> Samuel
>>> 
 Le 2015-05-04 à 11:48, Dev WO >>> > a écrit :
 
 Hi Samuel,
 
 I didn’t mention the console as there was nothing there.
 
 Let’s try to give more context:)
 
 I’ve got a component which is supposed to be the content of the modal 
 dialog, let’s call it “Chart”
 This component is
 
 TEST
 
 The $googleChartGenerationString generate something like this for example:
 
 google.setOnLoadCallback(drawChart);
 function drawChart() {
 var data = new google.visualization.DataTable();
 data.addColumn('datetime', 'Date');
 data.addColumn('number', 'Points');
 data.addRows([
 [new Date(2015, 4, 3, 23, 44, 48), 1247],
 [new Date(2015, 4, 3, 23, 47, 43), 1247],
 [new Date(2015, 4, 4, 0, 24, 43), 1247],
 [new Date(2015, 4, 4, 4, 34, 55), 1247]]);
 var options = {
 curveType: 'none',
 legend: 'none',
 width: 900,
 height: 500
 };
 var chart = new 
 google.charts.Line(document.getElementById('chart_points'));
 chart.draw(data, options);
 }
 
 
 If I’m placing this component inline in its parent component (which is 
 called via a regular component action, meaning the parent isn’t called 
 from an ajax request), everything is fine, the chart is displayed.
 
 If I’m placing the component in the “content” part of an AMD, I can see 
 that it still gets the expected content (using the browser console), but 
 nothing is displayed, even the “TEST” string isn’t removed which is also 
 why I think the javascript isn’t executed at all.
 
 So I’m kind of puzzled as to what could prevent my “manual" javascript 
 from being executed when requested inside an AMD.
 
 I don’t really have much more context than this:(
 
 Xavier
 
 
 
>

Re: [Google Chart] - Displaying chart in an Axaj Modal Dialog

[Samuel Pelletier]

Xavier,

There is maybe some other dependency or expectation about the execution context 
in the graph library that break it outside the normal page rendering process.

You will need to trace or search on how to use this API inside a modal dialog 
with AJAX contents. There is no real difference between using WO or any other 
web server technology for these problems.

Samuel

> Le 2015-05-10 à 10:09, Dev WO  a écrit :
> 
> Hi Samuel,
> 
> I though I did that, but it looks like maybe not:)
> I may have been misled as I was actually displaying the graph inline on the 
> main content (to see if I actually got stuff to display), and also through 
> the modal dialog. When I removed the call in the main content, it wouldn’t 
> display in the modal anymore…
> So currently I’m generating the javascript inline within the main content, 
> and basically just call to draw it in the modal dialog. But I don’t like that 
> because I’m spending time generating the javascript chart directly inside the 
> main content when it may not get called at all.
> 
> But I think the call to draw isn’t fully working (or maybe not at the right 
> time). Also I’m fighting with data format, it’s really more painful than I 
> though to use it.
> 
> I’ll succeed eventually, but I’m not that confident it will be a “right way” 
> to do it;)
> 
> Thanks for your tips,
> 
> 
> Xavier
> 
>> On 7 mai 2015, at 17:40, Samuel Pelletier > > wrote:
>> 
>> Xavier,
>> 
>> Your function drawChart is never called. I suppose 
>> "google.setOnLoadCallback(drawChart);" add some sort of onLoad handler but 
>> an Ajax request will never trigger it.
>> 
>> A simple way that should work is to put a script after all the required HTML 
>> elements for the graph with this content:
>> 
>> 
>>  drawChart();
>> 
>> 
>> There is probably another way with AMD call back but this is tricky since 
>> the function "drawChart" does not exists when the AMD is created.
>> 
>> Samuel
>> 
>>> Le 2015-05-04 à 11:48, Dev WO >> > a écrit :
>>> 
>>> Hi Samuel,
>>> 
>>> I didn’t mention the console as there was nothing there.
>>> 
>>> Let’s try to give more context:)
>>> 
>>> I’ve got a component which is supposed to be the content of the modal 
>>> dialog, let’s call it “Chart”
>>> This component is
>>> 
>>> TEST
>>> 
>>> The $googleChartGenerationString generate something like this for example:
>>> 
>>> google.setOnLoadCallback(drawChart);
>>> function drawChart() {
>>> var data = new google.visualization.DataTable();
>>> data.addColumn('datetime', 'Date');
>>> data.addColumn('number', 'Points');
>>> data.addRows([
>>> [new Date(2015, 4, 3, 23, 44, 48), 1247],
>>> [new Date(2015, 4, 3, 23, 47, 43), 1247],
>>> [new Date(2015, 4, 4, 0, 24, 43), 1247],
>>> [new Date(2015, 4, 4, 4, 34, 55), 1247]]);
>>> var options = {
>>> curveType: 'none',
>>> legend: 'none',
>>> width: 900,
>>> height: 500
>>> };
>>> var chart = new google.charts.Line(document.getElementById('chart_points'));
>>> chart.draw(data, options);
>>> }
>>> 
>>> 
>>> If I’m placing this component inline in its parent component (which is 
>>> called via a regular component action, meaning the parent isn’t called from 
>>> an ajax request), everything is fine, the chart is displayed.
>>> 
>>> If I’m placing the component in the “content” part of an AMD, I can see 
>>> that it still gets the expected content (using the browser console), but 
>>> nothing is displayed, even the “TEST” string isn’t removed which is also 
>>> why I think the javascript isn’t executed at all.
>>> 
>>> So I’m kind of puzzled as to what could prevent my “manual" javascript from 
>>> being executed when requested inside an AMD.
>>> 
>>> I don’t really have much more context than this:(
>>> 
>>> Xavier
>>> 
>>> 
>>> 
>>> 
 On 4 mai 2015, at 16:22, Samuel Pelletier >>> > wrote:
 
 Xavier,
 
 Have look at the javascript console, if there is javascript error, it is 
 probably your problem. If there is nothing there, you should put way more 
 context to explain what you want to achieve and how you tried so far.
 
 Samuel
 
 
> Le 2015-05-04 à 09:28, Dev WO  > a écrit :
> 
> Hi All,
> 
> I’m trying to display a chart generated with Google Chart inside an AMD.
> 
> For the Google Chart part, I’m generating a javascript function which is 
> then “written” into the HTML with a simple wo:string/escape=false 
> directly inside the AMD content.
> 
> If I display it inline with the page, everything is fine. But if I try to 
> display it through an AMD, the javascript isn’t triggered at all.
> It is there, I can see the response (and it works inline for example), 
> but it doesn’t display/execute at all.
> I believe it’s not triggered at all because the js update the content of 
> a div, and when called through the AMD the “default" content