Using Highcharts With Play Framework

Table of contents

Reading Time: 2 minutes

Highcharts is a charting library written in pure HTML5/JavaScript, offering intuitive, interactive charts to your web site or web application.

Highcharts are interactive Javascript charts which you can use very easily with any Play application. Its using graphical representation of your data.

There are 2 types of Highchart API’s :

1. Highcharts API

2. Highstock API

Implementetation of Charts:

1. Adding libraries for Highcharts in main.scala.html


<!-- HighCharts -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script src="http://code.highcharts.com/highcharts-more.js"></script>

2. Adding a div where Highchart is rendered in html file

</pre>
<div class="container">
        
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">@Messages("label.bubble")</h3>
                    </div>
                    <div class="panel-body">
                        <div id="bubbleChart" class="chart-holder"></div>
                    </div>
                </div>

            </div><!-- /span12 -->
            
        </div><!-- /row -->
        
    </div><!-- /container -->

3. Adding javascript code in bubbleChartHandler.js which provides data for rendering chart


$(function () {
$('#bubbleChart').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},

title: {
text: 'Highcharts Bubbles'
},

series: [{
data: [[97,36,79],[94,74,60],[68,76,58],[64,87,56],[68,27,73],[74,99,42],[7,93,87],[51,69,40],[38,23,33],[57,86,31]]
}, {
data: [[25,10,87],[2,75,59],[11,54,8],[86,55,93],[5,3,58],[90,63,44],[91,33,17],[97,3,56],[15,67,48],[54,25,81]]
}, {
data: [[47,47,21],[20,12,4],[6,76,91],[38,30,60],[57,98,64],[61,17,80],[83,60,13],[67,78,75],[64,12,10],[30,77,82]]
}]

});
});

4. Now Adding action in Application.scala


def bubbleChart = Action {
Ok(views.html.bubble(Messages("subheader.bubble")))
}

Check the application and the code base on bellow links:

The live application is currently hosted at : http://highcharts.herokuapp.com/
The Github code for the project is at : https://github.com/supriya19/Highchart-With-Play

This is the start, from next week onwards we would be working on this application to make it grow. We would look at how we can make it reactive, then we would be adding more modules to it together. If you have any changes then feel free to send in pull requests and we would do the merges 🙂 Stay tuned.