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_ textcolor
Chart Data Options
|This panel is used to provide the CSS code.
|You can generate a preview of the your code in this panel.
It is recommended to have your chart developers utilize proper content development and migration strategies in regards to development and testing environments, as well as leveraging our Approval Workflows to ensure governance.
How the generateChart function works
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.
Require and Shim
To use Require, simply define the path of what you need to load as follows:
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 example is abbreviated (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)
4. dataset (options.dataset)
The options.dataset object contains attributes which represent report data as well as some rendering information. It can take any of the properties, functions and events from the Report API and the Filters API to create charts that are fully customized and interactive.
The dataset object contains the following attributes:
4.1 chart_information (options.dataset.chart_information)
An object containing information used for chart rendering.
- title: if a chart title is defined, it will be part of the dataset object.
4.2 metadata (options.dataset.metadata)
Information about the fields in the report. Attribute names are based on the fields in the report (all lowercase with spaces replaced by underscores, and duplicate field names will append numbers to the end of the names). Field names used here correspond to the field names used for the data. Within metadata, these objects below contain the following attributes for each field:
|A string representing the data type of the field (TEXT, NUMERIC, etc).
The formatted name of the field. If translations are switched on, the translated version of the field name for the user’s preferred language will be returned.
<Optional> If a metric color has been set for this field at the view level then there will be a metric_colour attribute which contains the hex code (eg, #FFFFFF)for the selected color.
This returns the ref code name e.g “DEMOGRAPHIC” according to our example above.
The Attributes object contains the actual data for the ref code (e.g sort order, display text, color, etc). See orgrefcode_ definitions below.
4.3 data (options.dataset.data)
An object containing the actual data in the report. As with metadata de ned above, attribute names are based on the elds in the report e.g all lowercase with spaces replaced with underscores. These represent arrays of objects with the following attributes for each field:
The underlying data contained within this field.
The formatted data for this field with prefix, suffix, decimal places, etc.
These data arrays are in the order that the data appears in the report. This means that options.dataset.data.camp_region and options.dataset.data.camp_rating refer to the same row of data.
4.4 attributes (options.dataset.attributes)
An object which contains additional rendering information. This contains the following attributes:
An array of the default chart colors configured on the Administration->Content Settings page. These are also in the order that they are specified within that page.
Contains all the org ref code definitions used by any fields on the report.
This is a map of maps. The key is the org ref code which matches with the org ref code for the field in the metadata object defined earlier above and is keyed by the field name used in the data object.
Each definition contains the color and sort order if they exist, as well as the display text for the org ref code.
Rendering to PDF
Additionally, this causes an asynchronous load which could lead to a chart rendering after the rest of the report, depending on the code written around it.
If blockRenderComplete is called, another part of your JS chart code should also call the renderComplete function to tell the report that the chart has completed.
This function tells the report that this chart has finished rendering and can now trigger the report render complete signal to any process that is listening for it (ie, the PDF renderer).
If blockRenderComplete has not been called at some point in your JS chart this will have no effect on the reports render status. If blockRenderComplete has already been called, renderComplete must also be called.
An example of just adding some text to the $chartDrawDiv element:
After five seconds, the text ‘Hello World’ will be added to the page, this will also prevent the PDF exporter from exporting until this has completed.
An example including a chart library via require:
Behind the scenes operations
- Chart CSS
- Chart Failure Image (used in the Chart error callback)
The CSS is appended to the chart div within a style tag.
All of this logic is wrapped within a try/catch function which will show the standard error message for charts if there is a failure.
Additional Data Processing
Yellowfin simply returns the dataset as you see from the table output in your report.
Below is a very simple example of using a self-defined processData function to aggregate the data by SUM, and returning a dataset which contains demographic and the totals of camp rating:
You can also write your own processData function definitions to either:
- Massage the data further
- Convert it into a suitable grid/array that fits the expected input of your selected chart library
For example, certain D3.js charts (e.g Sunburst, Bubble Cloud, or charts that consume the flare.json example, etc) consume data in a hierarchical object structure. In this example, the Yellowfin report data set within options.dataset.data is further processed by:
- Transposing each column to include its name
- Merging it into an Array
Another example is using the GoogleCharts library - for example, to use this library and draw a bar chart, the library is expecting the dataset to be in an Array that looks like this:
In this scenario, the options.dataset.data can be massaged into this form. Below is a simple example of this being done with a dataset that contains demographic and invoiced amount:
- Add the CSS class ‘jsChartNoOverflow’ Yellowfin has defined to the chart div to stop scrollbars.
This will get logged into your browser’s dev console. You can copy the entire JSON string and view it with a JSON formatter e.g. https://jsonformatter.curiousconcept.com/