[progress News] [progress Openedge Abl] Creating Rollbase Dashboards With Custom Fusioncharts

Status
Not open for further replies.
M

Mayank Kumar

Guest
If you're looking to enhance your application dashboards, Fusion Charts can be an invaluable tool. In this blog, we show you how to create Fusion Charts and add them to your Rollbase applications and dashboards.

Progress Rollbase supports most of the widely used fusion chart types: Area, Bar, Column 2D/3D, Doughnut 2D/3D, Pie 2D/3D, Line and Grid. Please find more details on how to create charts in Rollbase. But you may also need some more chart styles from the Fusion Charts library, based on your application context and requirements. And, for dashboards or portal pages, you may want to add some more properties or attributes to your fusion charts. This can be achieved by writing some custom script.

In this blog, we will show you how to write custom code to create Fusion Charts and add them to Rollbase application pages and dashboards. Note that with Rollbase you have access to all the powerful features of Fusion Charts library without any additional fees.

Adding Script Components from Page Designer

  1. Create a new section to your dashboard. This gives you the responsive feature when the screen size changes.
  2. Add an HTML component to this section. Add a <div> element and give an ID to this div. Note that this ID is to be used to render the chart.
  3. Add a script component to the section in which you can add your code to initialize and render Fusion Charts or gauges.

Let’s see how we can create a fusion doughnut chart that looks like the one below:






Libraries to Be added


You can easily use the Fusion Chart libraries from Rollbase sources. You only need to add the below scripts to your script component:

<script src="../js/fusioncharts.js" ></script>
<
script src="../js/fusioncharts.charts.js" ></script>


For a grid type fusion chart such as ssgrid, you need to add a separate script from fusion charts:

<script src="../js/fusioncharts.ssgrid.js" ></script>


Code to Initialize Fusion Charts


The below code block will initialize and render the Fusion Chart in the <div> we created in step 2 above. In this sample, we have used some of the most common attributes for a fusion doughnut chart. The brief usage of these attributes is mentioned as a comment above each attribute:

<script >
FusionCharts.ready(
function() {
var chartPointsDone = new FusionCharts({// initialize chart
type: 'doughnut2d', // chart type
renderAt: 'chart-container', // Id of <div> element
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
// caption for the chart
"caption": "Points Done",
"captionFontSize": "14",
"subCaption": "(Current Week)",
// the starting angle for the first data value
"startingAngle": "310",
"bgColor": "FFFFFF",
// radius for the inner ring
"pieRadius": "120",
// center label for the chart
"defaultCenterLabel": "Total Points: 120",
// center label when hover on the data plot
"centerLabel": "$label: $value",
"centerLabelBold": "1",
// show percent or actual value on tooltip
"showPercentInTooltip": "0",
// show percent or actual value as data value
"showPercentValues": "1",
// round off data values
"decimals": "0",
// display the series name of each dataset
"showLegend": "1",
"legendBorderAlpha": "0",
"legendShadow": "0",
},
// dataset config
"data": [{
"color": "43A700",
"label": "Completed",// dataset label
"value": "30"// dataset value
}, {
"color": "FFB419",
"label": "In-Progress",
"value": "40"
}, {
"color": "D5D5D8",
"label": "Not Started",
"value": "50"
}]
}
}).render();// renders the chart
});
</script>


Fusion Chart Types and Attributes



Fusion Charts support more than 90 chart types and many other useful configurations that can help you configure the charts best suited for your application. Please note that not all the properties are applicable to all types of charts. For example, there are a few properties like canvas background color that are not applicable to doughnut and pie charts. You can find more details about these chart types and configuration options at Fusion chart types and configurations.

In conclusion, Rollbase provides users with tremendous value by offering up access to any of the Fusion Charts capabilities without any additional fees. After reading this blog, you should have a better understanding of how you can use some simple JavaScript code to embed Fusion Widgets in the Rollbase automatic responsive system.

Continue reading...
 
Status
Not open for further replies.
Top