Skip to Content

Using Google charts in Web UI

Sep 26, 2017 at 04:45 PM


avatar image


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>
 <script type="text/javascript" src="
 <script type="text/javascript">
 google.charts.load('current', {'packages':['corechart']});
 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.
 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.
 chart.draw(data, options);
 <div id="columnchart_values" style="width: 600px; height: 300px;">

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.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

0 Answers