<div dir="ltr">Hello,<div><br></div><div>I try to create a dashboard widget displaying a chart. I want to use Google Chart library.</div><div><br></div><div>Here the script put in a dashboard widget's tpl file:</div><div>
<br></div><div>
<p class=""><i>{literal}</i></p><p class=""><i><span class=""><script type=</span>"text/javascript" <span class="">src=</span>"<a href="http://www.google.com/jsapi">http://www.google.com/jsapi</a>"<span class="">></script></span></i></p>
<p class=""><i><span class=""> </span><span class=""><script type=</span>"text/javascript"<span class="">></span></i></p><p class=""><i><span class=""> google.load</span><span class="">(</span>"visualization"<span class="">, </span>"1"<span class="">, </span><span class="">{</span><span class="">packages:</span><span class="">[</span>"corechart"<span class="">]})</span><span class="">;</span></i></p>
<p class=""><i> google.setOnLoadCallback<span class="">(</span>drawChart<span class="">)</span>;</i></p><p class=""><i><span class=""> </span>function <span class="">drawChart</span>() {</i></p><p class=""><i><span class=""> var </span>data <span class="">= </span>google.visualization.arrayToDataTable<span class="">([</span></i></p>
<p class=""><i><span class=""> [</span>'Year'<span class="">, </span>'Sales'<span class="">, </span>'Expenses'<span class="">]</span><span class="">,</span></i></p><p class=""><i> <span class="">[</span><span class="">'2004'</span>, <span class="">1000</span>, <span class="">400</span><span class="">]</span>,</i></p>
<p class=""><i> <span class="">[</span><span class="">'2005'</span>, <span class="">1170</span>, <span class="">460</span><span class="">]</span>,</i></p><p class=""><i> <span class="">[</span><span class="">'2006'</span>, <span class="">660</span>, <span class="">1120</span><span class="">]</span>,</i></p>
<p class=""><i> <span class="">[</span><span class="">'2007'</span>, <span class="">1030</span>, <span class="">540</span><span class="">]</span></i></p><p class=""><i> ])<span class="">;</span></i></p>
<p class=""><i> <span class="">var </span>options <span class="">= </span><span class="">{</span><br></i></p><p class=""><i><span class=""> </span><span class="">title: </span>'Company Performance'<span class="">,</span></i></p>
<p class=""><i> vAxis: <span class="">{</span>title: <span class="">'Year'</span>, titleTextStyle: <span class="">{</span>color: <span class="">'red'</span><span class="">}}</span></i></p><p class="">
<i> }<span class="">;</span></i></p><p class=""><i> <span class="">var </span>chart <span class="">= new </span>google.visualization.BarChart<span class="">(</span><span class="">document</span>.getElementById<span class="">(</span><span class="">'chart_div'</span><span class="">))</span>;<br>
</i></p><p class=""><i> chart.draw<span class="">(</span>data, options<span class="">)</span>;</i></p><p class=""><i> <span class="">}</span></i></p><p class=""><i> })<span class="">;</span></i></p><p class=""><i></script></i></p>
<p class=""><i>{/literal}</i></p><p class=""><i><span class=""><div class=</span>"dashboardWidgetHeader"<span class="">></span></i><br></p><p class=""><span class=""><br></span></p><p class=""><span class="">After displaying the widget, the following line is not present in the source code:</span></p>
<p class=""><span class=""><i><span class=""><script type=</span>"text/javascript" <span class="">src=</span>"<a href="http://www.google.com/jsapi">http://www.google.com/jsapi</a>"<span class="">></script></span></i><br>
</span></p></div><div><div><div dir="ltr"><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.727272033691406px;background-color:rgb(255,255,255)"><div>So JavaScript console displays this message:</div>
<div><br></div><div><pre style="white-space:nowrap;width:784px;padding:2px;margin-top:0px;margin-bottom:0px;color:rgb(0,0,0)"><span id="errors" style="color:red">TypeError: Object #<Object> has no method 'load'<br>
#11 <a href="view-source:http://localhost/VtigerSVN/index.php?module=Home&view=DashBoard" target="_blank" style="color:red;text-decoration:none">http://localhost/VtigerSVN/index.php?module=Home&view=DashBoard:4</a><br>
#10 <a href="http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11412">http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11412</a> HTMLDocument.eval (eval at ()<br>#9 <a href="http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:14765">http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:14765</a> n()<br>
#8 <a href="http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:14980">http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:14980</a> Object.o.add()<br>#7 <a href="http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:8431">http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:8431</a> e.fn.e.ready()<br>
#6 <a href="http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11412">http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11412</a> eval (eval at ()<br>#5 eval (native) <br>#4 <a href="http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11412">http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11412</a> <br>
#3 <a href="http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11423">http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11423</a> Function.e.extend.globalEval()<br>#2 <a href="http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:3292">http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:3292</a> HTMLScriptElement.br()<br>
#1 <a href="http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11819">http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11819</a> Function.e.extend.each()</span></pre></div><div><br></div><div>I tried to use HEADERSCRIPT custom link to include the library, but the result is the same.</div>
<div>Do you have any idea about the way to use JavaScript libraries with dashboard widgets?</div><div><br></div><div>Thanks.</div><div><br></div><div>Regards,</div><div><br></div><div><div><font color="#666666">Jonathan SARDO</font></div>
<div></div><div style="color:rgb(136,136,136)"><img src="cid:ii_13df029e6cb01b67" alt="Images intégrées 5"><br></div><div style="color:rgb(136,136,136)"><span style="color:rgb(0,0,0);font-family:arial;font-size:small"><a value="+33699455047" style="color:rgb(17,85,204)"><br>
</a></span></div></div></div></div></div>
</div></div>