Deliver Awesome UI with the most complete toolboxes for .NET, Web and Mobile development
Automate UI, load and performance testing for web, desktop and mobile
Rapidly develop, manage and deploy business apps, delivered as SaaS in the cloud
Build, protect and deploy apps across any platform and mobile device
Automate decision processes with a no-code business rules engine
A complete cloud platform for an app or your entire digital business
Deploy automated machine learning to accurately predict machine failures with technology optimized for Industrial IoT.
Optimize data integration with high-performance connectivity
Connect to any cloud or on-premises data source using a standard interface
Build engaging multi-channel web and digital experiences with intuitive web content management
If you're looking to enhance your application dashboards, FusionCharts 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 FusionCharts 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 FusionCharts library without any additional fees.
Let’s see how we can create a fusion doughnut chart that looks like the one below:
You can easily use the FusionCharts libraries from Rollbase sources. You only need to add the below scripts to your script component:
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:
// initialize chart
// chart type
// Id of <div> element
// caption for the chart
// the starting angle for the first data value
// radius for the inner ring
// center label for the chart
"Total Points: 120"
// center label when hover on the data plot
// show percent or actual value on tooltip
// show percent or actual value as data value
// round off data values
// display the series name of each dataset
// dataset config
// dataset label
// dataset value
// renders the chart
FusionCharts 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.
Mayank Kumar is a Software Engineer at Progress, specializing in low-code platforms. In the past, he worked on improving Multilingual and RTL support in Rollbase and is currently working on Rollbase UI.
Copyright © 2017 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.