diff --git a/Gemfile b/Gemfile
index bcc2164..0aaa799 100644
--- a/Gemfile
+++ b/Gemfile
@@ -45,6 +45,9 @@ gem "pg", "~> 0.17.0"
 # Twitter Bootstrap for layout
 gem "twitter-bootstrap-rails", "~> 2.2.8"
 
+# Chart generation
+gem "gruff", "~> 0.5.1"
+
 group :doc do
   # bundle exec rake doc:rails generates the API under doc/api.
   gem 'sdoc', require: false
diff --git a/Gemfile.lock b/Gemfile.lock
index 732926f..9c3bc80 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -88,6 +88,8 @@ GEM
       railties (>= 3.0.0)
     gherkin (2.12.2)
       multi_json (~> 1.3)
+    gruff (0.5.1)
+      rmagick
     gyoku (1.1.0)
       builder (>= 2.1.2)
     highline (1.6.20)
@@ -165,6 +167,7 @@ GEM
     ref (1.0.5)
     rest-client (1.6.7)
       mime-types (>= 1.16)
+    rmagick (2.13.2)
     rspec-core (2.14.7)
     rspec-expectations (2.14.4)
       diff-lcs (>= 1.1.3, < 2.0)
@@ -257,6 +260,7 @@ DEPENDENCIES
   database_cleaner
   devise (~> 3.2.0)
   factory_girl_rails (~> 4.3.0)
+  gruff (~> 0.5.1)
   jbuilder (~> 1.2)
   jquery-rails
   kalibro_entities (~> 0.0.1.rc6)
diff --git a/README.rdoc b/README.rdoc
index 36ebcca..8820d16 100644
--- a/README.rdoc
+++ b/README.rdoc
@@ -12,7 +12,7 @@ platform with Mezuro Plugin actived to access Kalibro Web Service.
   3. <tt>cap deploy:setup</tt> will install the ruby correct ruby version, the gemset and all the directories tree;
   4. <tt>cap deploy:migrations</tt> deploys the code and run all the migrations
 
-* System dependencies
+* System dependencies (Ubuntu package names)
 
   * build-essential
 
@@ -28,6 +28,12 @@ platform with Mezuro Plugin actived to access Kalibro Web Service.
 
   * PhantomJS 1.9.1 (http://phantomjs.org/)
 
+  * imagemagick
+
+  * libmagickcore-dev
+
+  * libmagickwand-dev
+
 * Ruby version
 
   2.0.0-p247
diff --git a/app/assets/images/loader.gif b/app/assets/images/loader.gif
new file mode 100644
index 0000000..d0bce15
Binary files /dev/null and b/app/assets/images/loader.gif differ
diff --git a/app/assets/javascripts/graphics.js b/app/assets/javascripts/graphics.js
deleted file mode 100644
index c3bb917..0000000
--- a/app/assets/javascripts/graphics.js
+++ /dev/null
@@ -1,51 +0,0 @@
-function chart_of_the_historic_of_metric (json_params, dinamic_values)
-{
-  container_id = json_params['container_id'];
-  metric_name = json_params['metric_name'];
-  module_name = json_params['module_name'];
-  dates = dinamic_values['dates'];
-  metric_values = dinamic_values['values'];
-
-  $('#tr_container_' + container_id).hide();
-  $(function () {
-    $('#container_'+container_id).highcharts({
-      chart: {
-        marginBottom: 80,
-        width: 600,
-        style: {margin: '0 auto'}
-      },
-      title: {
-        text: metric_name,
-        x: -20 //center
-      },
-      subtitle: {
-        text: module_name,
-        x: -20
-      },
-      xAxis: {
-        categories: dates
-      },
-      yAxis: {
-        title: {
-          text: 'Value'
-        },
-        labels: {
-        align: 'left',
-        x: 0,
-        y: -2
-      },
-      plotLines: [{
-        value: 0,
-        width: 1,
-        color: '#808080'
-      }]
-      },
-      series: [{
-        name: 'Metric value',
-        data: metric_values
-      }]
-    });
-  });
-
-  $('#tr_container_' + container_id).show("slow");
-}
\ No newline at end of file
diff --git a/app/assets/javascripts/module/graphic.js.coffee b/app/assets/javascripts/module/graphic.js.coffee
new file mode 100644
index 0000000..4a5ff2a
--- /dev/null
+++ b/app/assets/javascripts/module/graphic.js.coffee
@@ -0,0 +1,21 @@
+@Module = { }
+
+class Module.Graphic
+  constructor: (@container, @metric_name, @module_id) ->
+    $('tr#'+@container).slideDown('slow')
+    this.load()
+
+  load: ->
+    # Those two var are necessary so the jQuery callback can use them
+    # Otherwise the scope of the callback function is isolated
+    container = @container 
+    display = this.display
+
+    $.get '/modules/metric_history',
+          metric_name: @metric_name
+          module_id: @module_id
+          (data) ->
+            display(data,container)
+
+  display: (data, container) ->
+    $('div#'+container).html('<img src="data:image/png;base64,' + data + '" />')
diff --git a/app/assets/stylesheets/boilerplate/graphic.css b/app/assets/stylesheets/boilerplate/graphic.css
new file mode 100644
index 0000000..b6750bf
--- /dev/null
+++ b/app/assets/stylesheets/boilerplate/graphic.css
@@ -0,0 +1,3 @@
+div.graphic_container {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/app/controllers/modules_controller.rb b/app/controllers/modules_controller.rb
index f931d8a..ffe5b88 100644
--- a/app/controllers/modules_controller.rb
+++ b/app/controllers/modules_controller.rb
@@ -1,4 +1,3 @@
-require 'json'
 class ModulesController < ApplicationController
 
   # GET /modules/metric_history
@@ -11,7 +10,25 @@ class ModulesController < ApplicationController
       dates.push date
       values.push metric_history[date]
     end
-    render :json => {dates: dates, values: values}.to_json
+    
+    send_data(Base64.encode64(graphic_for(values, dates)), type: 'image/png', filename: "#{params[:module_id]}-#{params[:metric_name]}.png")
+  end
+
+  private
+
+  def graphic_for(values, dates)
+    graphic = Gruff::Line.new(400)
+    graphic.hide_title = true
+    graphic.hide_legend = true
+    graphic.theme = {
+      :background_colors => 'transparent'
+    }
+
+    graphic.labels = Hash[dates.each_with_index.map{ |date, index| [index, date.to_s]}]
+
+    graphic.data('Values', values)
+
+    graphic.to_blob
   end
 
 end
\ No newline at end of file
diff --git a/app/views/repositories/_metric_result.html.erb b/app/views/repositories/_metric_result.html.erb
index 0cc1a4e..0ccbc69 100644
--- a/app/views/repositories/_metric_result.html.erb
+++ b/app/views/repositories/_metric_result.html.erb
@@ -5,22 +5,17 @@
   %>
   <tr>
     <td><%= link_to metric_name, "#metric_#{module_result.id}", 
-      onclick: "$.get('/modules/metric_history',
-                      { metric_name: \"#{metric_name}\", 
-                        module_id: \"#{module_result.id}\"}
-                      ).done(function( data ) {
-                          json_params = JSON.parse('{\"container_id\": \"#{metric_result.id}\", \"metric_name\": \"#{metric_name}\", \"module_name\": \"#{module_result.module.name}\"}');
-                          chart_of_the_historic_of_metric (json_params, data); 
-                      });",
-      id: "metric_#{module_result.id}",
-      remote: true %></td>
+              onclick: "new Module.Graphic('container#{metric_result.id}', '#{metric_name}', '#{module_result.id}')",
+              id: "metric_#{module_result.id}",
+              remote: true %>
+    </td>
     <td><%= format_grade(metric_result.value) %></td>
     <td><%= metric_configuration_snapshot.weight %></td>
     <td><span style="color: #<%= range_snapshot.color %>"><%= range_snapshot.label %></span></td>
   </tr>
-  <tr id="tr_container_<%= metric_result.id %>" style="display: none">
+  <tr id="container<%= metric_result.id %>" style="display: none">
     <td colspan="4">
-      <div id="container_<%= metric_result.id %>"></div>
+      <div id="container<%= metric_result.id %>" class="graphic_container"><%= image_tag 'loader.gif' %> Loading data. Please, wait.</div>
     </td>
   </tr>
 <% end %>
\ No newline at end of file
--
libgit2 0.21.2