[Vtigercrm-developers] Using Javascript libraries with dashbord widgets

[Jonathan Sardo]

Hello,

I try to create a dashboard widget displaying a chart. I want to use Google
Chart library.

Here the script put in a dashboard widget's tpl file:

*{literal}*

*<script type="text/javascript" src="http://www.google.com/jsapi
<http://www.google.com/jsapi>"></script>*

* <script type="text/javascript">*

*  google.load("visualization", "1", {packages:["corechart"]});*

*  google.setOnLoadCallback(drawChart);*

*  function drawChart() {*

*    var data = google.visualization.arrayToDataTable([*

*      ['Year', 'Sales', 'Expenses'],*

*      ['2004',  1000,      400],*

*      ['2005',  1170,      460],*

*      ['2006',  660,       1120],*

*      ['2007',  1030,      540]*

*    ]);*


*    var options = {*

*      title: 'Company Performance',*

*      vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}*

*    };*


*    var chart = new
google.visualization.BarChart(document.getElementById('chart_div')); *

*    chart.draw(data, options);*

*  }*

*  });*

*</script>*

*{/literal}*

*<div class="dashboardWidgetHeader">*


After displaying the widget, the following line is not present in the
source code:

*<script type="text/javascript" src="http://www.google.com/jsapi
<http://www.google.com/jsapi>"></script>*
So JavaScript console displays this message:

TypeError: Object #<Object> has no method 'load'

#11 http://localhost/VtigerSVN/index.php?module=Home&view=DashBoard:4
<view-source:http://localhost/VtigerSVN/index.php?module=Home&view=DashBoard>

#10 http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11412
HTMLDocument.eval (eval at ()
#9 http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:14765 n()

#8 http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:14980
Object.o.add()
#7 http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:8431
e.fn.e.ready()

#6 http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11412
eval (eval at ()
#5 eval (native)
#4 http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11412

#3 http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11423
Function.e.extend.globalEval()
#2 http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:3292
HTMLScriptElement.br()

#1 http://localhost/VtigerSVN/libraries/jquery/jquery.min.js:2:11819
Function.e.extend.each()


I tried to use HEADERSCRIPT custom link to include the library, but the
result is the same.
Do you have any idea about the way to use JavaScript libraries with
dashboard widgets?

Thanks.

Regards,

Jonathan SARDO
[image: Images intégrées 5]
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.vtigercrm.com/pipermail/vtigercrm-developers/attachments/20140120/768e00c2/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 4223 bytes
Desc: not available
URL: <http://lists.vtigercrm.com/pipermail/vtigercrm-developers/attachments/20140120/768e00c2/attachment-0001.png>