Integration of Highcharts

Modified on Wed, 01 Dec 2021 at 10:29 AM

Prerequisites : Currently it is only possible to copy/paste JSON configurations created via http://editor.highcharts.com/full.html. At the moment this means that no API, JAVA, HTML, or CSS files are possible.


A demo of highcharts can be found here: https://www.highcharts.com/demo


Getting started

Import your dataset to the Highcharts Editor. There are several possibilities to do so:

  • Upload .csv or excel file (drag and drop or via the button)
  • Directly type some values into the grid
  • Use available test data: Click the "Import" button in the bottom tight corner of the editor and import your data


Choose templates / choose chart

  • You can choose between different chart types. There will be various templates with a small example image on the right.
  • This chart type can easily be changed in the JSON later on, e.g. from "bar" to "line".


Please visit https://www.highcharts.com/demo for an overview of all visualizations that are currently possible.


Customize the Chart

The Highcharts editor also has some configuration options for the charts, under the "Customize Chart" tab. There you can customize the chart in two different interfaces: Simple and Advanced.



 

Export JSON

After finishing the customization, there are two different ways of exporting the JSON to ONE DATA:

  1. Copy & paste the JSON (or at least the necessary parts of it) from "PREVIEW OPTIONS"
  2. Copy & paste the JSON (or at least the necessary parts of it) from "EXPORT"


Import at correct position within ONE DATA APPS

It is very important that you insert the JSON at exactly the right place within APPS.

The exported code belongs to the config property of a certain Highcharts Element, and can be copy-pasted there.



Be careful what you really need to copy. For example, if you designed the chart with random test data, that does not match the data in the App, then it would not make sense to copy & paste the "series" property from the preview in the Highcharts-Editor.


Visit Getting Started for an introduction about how to work with APPS or the ODML documentation articles for in-depth information.



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article