- SAP Managed Tags:
Time and time again I work on something and then forget to save the snippet, document it or even make a note of where I did it. Then after awhile I need it again and have to hunt for it or figure it out again. So today I decided to I'd remember to document it...
I was trying to figure out a quick and easy way to display a chart in an environment that was not based SAPUI5 so did not have the option of using the built in charts.
To demonstrate how I did this, I decided to quickly create a basic table with the names of our core evangelist team and add a bunch of demo data to be able to do a simple service call.
Then the first step was to include the Google Charts script into my page.
After that I needed to add the chart to the page. This was the HTML placeholder where the chart would be inserted.
Now once the page was done loading I needed to call the chart.
Now it's a matter of filling in the "getChart" function and do a call to get my new service.
Now that the chart options are defined and the DataTable is created it's a matter of filling in the DataTable with the rest of the data.
The key here is a single line to add rows to the DataTable.
This was that one bit I kept forgetting and the main thing I wanted to document here. Makes things so easy to continue adding the data to the chart.
From this point it was just a matter of creating either additional functions to call or setting parameters on the xsodata service to make changes to the chart whenever the function was called.
Set the "getChart()" function into a loop and you can automatically update the page and chart(s) whenever new data is added to the table.
Also extremely easy to change the type of chart being displayed. Hopefully this little tip is useful for you. Any tips you want to share we'd love to hear about them!
I was trying to figure out a quick and easy way to display a chart in an environment that was not based SAPUI5 so did not have the option of using the built in charts.
To demonstrate how I did this, I decided to quickly create a basic table with the names of our core evangelist team and add a bunch of demo data to be able to do a simple service call.
Then the first step was to include the Google Charts script into my page.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>After that I needed to add the chart to the page. This was the HTML placeholder where the chart would be inserted.
<div id="chart_div" style="width: 300px; height: 300px;"></div>Now once the page was done loading I needed to call the chart.
<script>
$(document).ready(function () {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(getChart);
});
function getChart(){
...
}
</script>Now it's a matter of filling in the "getChart" function and do a call to get my new service.
var chartOptions = {
is3D: true,
legend: 'none',
pieSliceText: 'label',
title: lv_value
};
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Member');
chartData.addColumn('number', 'Count');Now that the chart options are defined and the DataTable is created it's a matter of filling in the DataTable with the rest of the data.
$.ajax({
url: '/codejam/demo/chartexample/services/sample.xsodata/people?$format=json',
async:false,
dataType: 'json',
success: function(data) {
for(var i = 0; i < data['d']['results'].length; i++) {
chartData.addRow([data['d']['results'][i]['NAME'], parseInt(data['d']['results'][i]['COUNT'])]);
}
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(chartData, chartOptions);
},
failure: function(errMsg) {
console.log(errMsg);
}
}); The key here is a single line to add rows to the DataTable.
chartData.addRow([data['d']['results'][i]['NAME'], parseInt(data['d']['results'][i]['COUNT'])]);This was that one bit I kept forgetting and the main thing I wanted to document here. Makes things so easy to continue adding the data to the chart.
From this point it was just a matter of creating either additional functions to call or setting parameters on the xsodata service to make changes to the chart whenever the function was called.
Set the "getChart()" function into a loop and you can automatically update the page and chart(s) whenever new data is added to the table.
Also extremely easy to change the type of chart being displayed. Hopefully this little tip is useful for you. Any tips you want to share we'd love to hear about them!
