Using AmCharts in Play Framework 2 with Java

In this post, I am going to show you how you can use AmCharts in Play Framework 2 using Java.

First create a new Play Framework 2 Java project and download the Javascript libraries for AmCharts. download. After you uncompress the file, you see that there are a lot of files in that folder. You really don't need all of it. To start with, I just chose some of them and put them in the public folder in my Play Framework 2 project:

Make things easier you can also download jQuery.

<script src="@routes.Assets.at("javascripts/jquery-1.11.1.min.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/amcharts/amcharts.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/amcharts/themes/dark.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/amcharts/serial.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/amcharts/pie.js")" type="text/javascript"></script>

Now let's create a template file called graph.scala.html and add two empty divs. One for the graph itself and the other for the legend. Also, for the ease of presentation, we put the javascript to handle the graph drawing in this template, but outside the main:

@main("Graphs"){

<div id="test-chart"></div>
<div id="test-legend"></div>

}
<script type="text/javascript">
   // code to handle the graph drawing goes here
</script>

Make sure that the tag ids match. Meaning the first section of the id on both tags should be the same: xxxx-chart, xxxx-legend.

Next, I will talk show you how to draw the actual graph in Javascript. As a rule of thumb, any code related to the AmCharts should be written between:

AmCharts.ready(function(){
   // code goes here
}

Please not that you might see other variations of initialization above across other websites.

Now, let's put the actual code inside the initialization function, for now we use some fake data to show the graph:

      var chart = AmCharts.makeChart("test-chart", {
                    "type": "pie", // type of the graph
                    "theme": "dark", // the theme
                    "legend": { // settings for legend
                         "markerType": "circle",
                         "position": "right",
                         "marginRight": 80,
                         "autoMargins": false
                    },
                    "dataProvider": [{
                         "country": "Czech Republic",
                         "litres": 256.9
                    }, {
                         "country": "Ireland",
                         "litres": 131.1
                    }, {
                         "country": "Germany",
                         "litres": 115.8
                    }, 
                    "valueField": "litres", // field name to get the value from
                    "titleField": "country" // field name to get the title from
                });

Put the route in the 'routes' file, and Implement an action in a controller to show the page:

public class Application extends Controller {

    public static Result showGraph() {
            return ok(graph.render(""));
    }

}

The final and a very important step is to give an initial width size to your div. Create a css file called main.css in public/stylesheets folder and put the following in it:

   #test-chart {
 width  : 100%;
 height  : 500px;
 font-size : 11px;
  }

Make sure you add it to your header in the main.scala.html file:

 <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

Now, run the project and go to the url that you defined in the routes file. You should see something like: