cancel
Showing results for 
Search instead for 
Did you mean: 

Using Google charts in Web UI

Former Member
0 Kudos

Hello,

I have a task to display some customer data as a Chart.

I have created a custom component ZCHART and added it to BP_HEAD overview page.

The following code has been added to the HTM page of Chart view:

<!doctype html>
 <head>
 <script type="text/javascript" src="https://www.gstatic.com
   /charts/loader.js"></script>
 <script type="text/javascript">
 google.charts.load('current', {'packages':['corechart']});
 </script>
 <script>
 google.charts.setOnLoadCallback(drawChart);
 function drawChart() {
<%
 controller->get_data_source( IMPORTING et_data = data(lt_data) ).
 data(lv_rows) = lines( lt_data ).
%>
var data = new google.visualization.DataTable( );
data.addColumn('string', 'Month');
data.addColumn('number', 'Spend');
data.addRows(<%= lv_rows%>);
<%
 data(lv_count) = 0.
 loop at lt_data into data(ls_data).
%>
data.setCell(<%= lv_count%>, 0, '<%= ls_data-month %>');
data.setCell(<%= lv_count%>, 1, '<%= ls_data-amount %>');
<%
 add 1 to lv_count.
 endloop.
%>
 var view = new google.visualization.DataView(data);
 var options = { title: "Spend By Month",
 animation:{ startup: true,
 duration: 1000,
 easing: 'out',
 },
 width: 600,
 height: 300,
 bar: {groupWidth: "60%"},
 legend: { position: "none" },
 };
 var chart = new google.visualization.ColumnChart(document.
   getElementById("columnchart_values"));
 chart.draw(data, options);
 }
 </script>
 </head>
 <body>
 <div id="columnchart_values" style="width: 600px; height: 300px;">
</div>
 </body>
</html>

So here is the issue I am currently dealing with, when navigating from BP search component to BP overview I am getting "google. is not defined exception" and chart view is blank.

However chart is displayed on a second attempt.

I've tried using differnet JS libraries but result stays the same.

Accepted Solutions (0)

Answers (0)