Like what you see? Have a play with our trial version.

Error rendering macro 'rw-search'

null

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

How to Create JavaScript Charts

 

A JavaScript Chart is essentially made up of two components: JavaScript and CSS code. CSS is optional.

For the JavaScript portion, you could write your own or leverage an existing library. We ship with multiple different libraries which you can find in the /js/chartingLibraries/ folder. It is recommended that you add any extra libraries you need to this folder. Note that it is not technically necessary to always use a charting library, you can create anything you like using JavaScript and your report data.

When defining CSS rules, it is recommended that you give them unique names so that they don’t conflict with Yellowfin styling. For example, a good unique name is mycompanyname_chart_ textcolour 


How the generateChart function works

The only function required when creating a JavaScript Chart is generateChart. The other functions provided in the example code are recommendations. Yellowfin will call generateChart to execute your JavaScript code.

All the options and data that you need from Yellowfin will be sent as part of the Options JSON object to the generateChart function.

You will be drawing everything into a provided div (options. divSelector) which the dataset will give you the id for. 


JavaScript Chart Example

This is an example of a very simple piece of JavaScript which will use the width and height sent in via the Options object and set the chart div to be purple. 


Require and Shim

Use Require to load any libraries that you need for your JavaScript Chart. If you are planning to embed via Javascript API or publicly share the report, you will need to use absolute paths. Otherwise, relative paths will be fine. 

To use Require, simply define the path of what you need to load as follows: 


In certain scenarios where a non-AMD Javascript library is used, Shim is required. While the shipped charting libraries within Yellowfin does not require Shim, you might need it for specific libraries sourced from the Web.

For more information about Shim, please see the requireJS documentation. 

 

Here is an example of using Shim to require the non-AMD library VizJS

 

Options JSON object

Example of a data set

We will be using the example shown below in our explanations. Please note that some of the data in this exampleisabbreviated (as shown by . . . . ) 

 

1. divSelector (options.divSelector)

A CSS selector using the ID of the div which the chart should be drawn within. This can be used with jQuery, D3 or any library which uses CSS style selectors.

E.g: to select the chart div in jQuery, you would do the following

var $chartDrawDiv = $(options.divSelector);

 

2. chartId (options.chartId)

The internal Yellowfin ID of the current chart.

 

3. errorCallback (options.errorCallback)

This is a function you can call to show the default Yellowfin error message. Use this if you want errors from the JavaScript Chart to look consistent with Yellowfin styling. It is not required that you use this. This will also print to console the error which occurred.

 

 

  • No labels