Scroll

DOC : Adding new chart types to askiavista 6.x

DOC : Adding new chart types to askiavista 6.x

Follow
Summary This document details the process of adding new chart type to askiavista 6.x.
Applies to Askiavista
Written for Analysts, Researchers, Project managers, Web developers.
Keywords Askiavista, Vista, chart, charting, Highcharts, Customisation, JavaScript, JSON.

 Documentation note : add entry for this feature and keep a reference to this article to act as an example

Since version 6.0, askiavista provides access to the Highcharts charting library. Because this library is very extensive, we initially decided to only include all the basic chart types in our askiavista releases.

Because of this, you may need a chart type that is not currently shipped with the application.

Disclaimer: certain Highcharts chart types (funnel, gauge, ...) require additional libraries to render (highcharts-more.js, modules/funnel.js, ...). You can download these from the Highcharts File Service page. These additional files will be added by default to askiavista as from version 6.0.3.5 of askiavista.

Adding new chart types to askiavista is a straightforward process:

Pre-requirement

Make sure your askiavista user has access to Chart template management by going to askiavista's Administration, open Authorisations in the accordion control and select the Authorisation assigned to your user.

In the Askiavista 6 tab, the Chart template property must be set to Create in order to allow you (and any other user sharing the same Authorisation) to manage your chart templates.

Download a chart template

  • Connect to your askiavista 6.x instance.
  • Click the More button (gears icon) in the Properties panel toolbar.
  • Select Chart templates, the Manage the chart templates modal window is displayed as below:

  • There, select any currently available chart template from the dropdown menu (located in the modal's toolbar) and click Download.
  • Askiavista will prompt you to download a chartname.zip archive. Download it and unzip it.
  • The archive contains the following elements:
    • chart.json: this JSON is the chart definition file.
    • highcharts.js: the is the Highcharts library that will be used by the chart. Do not tamper with this file
    • index.html: a placeholder HTML file that will be used to test the updated chart.
    • jquery.js: the jQuery library will be used. Do not tamper with this file.

Modifying the chart type

  • In order to ensure that any modification we carry out will render as expected, we must first setup the correct work environment for this new chart type:
  • Copy your previously downloaded chartname folder to the root of your local server (C:\inetpub\wwwroot\ for IIS).
  • Open IIS Manager and add the chartname folder as a new Application. Then, click MIME Types and add a new entry for JSON (if it wasn't already set on your IIS):
    • File extension: .json
    • MIME type: application/json

  • Open your index.html file (via the HTTP protocol) in your browser: you should end up with a URL such as: http://localhost/chartname/index.html.
  • The test page will render some information as well as a preview of the chart you initially downloaded:

  • Now, in order to assign a new chart type to this visualisation, open chart.json in your text editor (Notepad, Sublime Text, Notepad++, ...).
  • Change the value of the chartType node to the chart type you wish to use in askiavista and save the chart.json file:

  • The complete list of available chart types is available here.
  • Note: you may need to check the syntax of your chart.json; to do so, you can validate it online.
  • Refresh your index.html page in your browser in order to view the updated chart type:

Activating the new chart template

  • Once you have achieved to render the chart type you need, go back to askiavista and re-open the Manage the chart templates modal window.
  • There, click New and:
    • Name: assign a type that is relevant to the newly assigned chart type. In this case, it's a Bubble chart.
    • Definition file: select the chart.json file that you modified.
  • Click Save.

  • You can now test your new chart template on real data to ensure that it is relevant to your needs by selecting the new chart type from the Chart dropdown in askiavista's General Properties:

Now that you have added a new chart type to your instance of askiavista, remember to Share this new template so your clients, colleagues, ... can all use it!

To do so, just re-open the Manage the chart templates modal, select the appropriate chart from the dropdown list and click the Share button to display the share settings:

Click Share to activate the asset sharing and you're done ;)

Have more questions? Submit a request

Comments