Using Highcharts With Play Framework


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:

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.

 

 

 

 

 

 

 

About Supriya Srivastava

Software Engineer at Rklick Software LLC. She is having over 3.5 year of working experience in Java, Grails/Groovy and Scala language, Play, Slick & Spark. I am also well versed with Javascript, JQuery and CSS. I have completed MCA from GBTU. She wants to work with upcoming new technologies and is making Scala my current passion. As a Developer, Supriya is in active collaboration with development and maintenance of several project with Scala and Java. She has been enjoying Scala for more than 2 year now.
This entry was posted in Scala. Bookmark the permalink.

One Response to Using Highcharts With Play Framework

  1. Sham Bairagi says:

    Why demo link show message ‘No such app’?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s