KB Article 15367

Contact Tech Support

 Email Tech Support
 (250) 655-1766
 [7:30 - 5:00 PST]
Your Meeting ID will be Provided by a Rep.
Tech Support
Tech Support Home
Software Updates
Knowledge Base Search
Recent KB Articles
Product FAQs
Code Samples
Tech Blog
System Requirements
Installation Instructions
Support Testimonials
Contact us to...
Create a Ticket
Request a Free Demo
Suggest a New Feature
Submit Feedback
Upload a Large File
Other Services
Software Training
Professional Services

Creating a chart on a Presto screen using JavaScript and the FusionCharts API

Product: SmartCharts Type: How to

As of version 6.8, Presto comes with FusionCharts 3.7.1.

If you are looking to add a special chart, or use options that aren't available to you in the Visual Editor or Presto.Insert, you can try adding the chart directly with a JavaScript transformation. The benefit of doing things this way is  that you'll be able to take full advantage of all the functionality in the FusionCharts 3.7.1 documentation.


1. Create a container in the visual editor (or in a JavaScript transformation, up to you)



2. Create a JavaScript transformation with the following code:




 var revenueChart = new FusionCharts({


"renderAt": "xlg0001",

"width": "500",

"height": "300",

"dataFormat": "json",








This is the base for creating a SmartChart with pure JavaScript. The chart will inherit the div's position in the Visual Editor, but you can adjust the chart type, target ID (the ID of the div we want to render to, which is xlg0001 in this case), width, and height by modifying their respective values (bolded above).


3. Populate "type" and "dataSource" with the data from the appropriate chart

You can find sample data in the FusionCharts documentation. For example, you can grab the data from this page to generate a multi-series chart: http://docs.fusioncharts.com/archive/3.7.1/chart-attributes.html?chart=msbar3d




The JavaScript alias is added to the "type" field, and the JSON code is added to the "dataSource" field. Once this is done, you will effectively have the sample chart inside Presto.



4. At this point, you can modify the sample code to load your own data. You can use Presto's JavaScript placeholders and populate the chart with values from the screen, but it is also possible to populate an array with Presto.ExecuteSql and use the returned data to populate the chart.

Provided you have a means to retrieve your chart data, it is also possible to use this method with WebSmart, or even a plain HTML page.

Here's what the JavaScript will look like, once it is complete.

Rate This Article

Did this example help you to achieve your goal?
 Yes  No  Don't Know

Enter additional comments below.   If you want to hear back from us, include your contact information.

Email Address:
Please enable JavaScript in order to rate this page.