on 09-26-2017 5:45 PM
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.
User | Count |
---|---|
8 | |
1 | |
1 | |
1 | |
1 | |
1 | |
1 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.