Skip to Content
Author's profile photo Arun D

Highcharts into sapui page…….

I was trying to implement one of our requirements for the on going project.

Requirement: There should be a graph, preferably line chart which holds the value from the back end and plot accordingly. Also there should be an event handler which can handle the event from the graph so that the graph can be movable at the value points and the graph should change to the new structure.

Obviously it is easy to implement the first part of plotting the graph with the help of either sap.makit or sap.viz. But I could not find any way to implement the second part for capturing the drag/drop any portion of the graph.

So I proceeded with the help of highchart.js.

Where I could find the movable line chart.

By Using sap.ui.core.HTML we can add the required html content to the ui element. Then just add the defined ui element to the ui page.

new sap.ui.core.HTML(“html”,{preferDOM:true,

  content : “<div id=’container’ style=’min-width: 0px; height: 0px; margin: 0 auto’></div>”


By this way we will be able to import the the html and js tricks which many people are familiar into our UI applications.

I am attaching my html and js files along with this code (change the extension to .zip).

If anyone find this is interesting they can download the js files for highcharts (highcahrt.js and draggablepoint.js) from the site and implement the same.

This method we can adopt for any other requirement as well.



Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.