Dynamic data in Highcharts waterfall using Rails3

Question

Here is the answer just in case if it helps out anyone. This is the example with dynamic data. http://www.highcharts.com/demo/waterfall .In the controller file

class GraphsController < ApplicationController

def index
defaults = [:name=>'Positive Balance', :isIntermediateSum=>'true', :color=>'Highcharts.getOptions().colors[1]']  #array for positive balance which would automatically be calculated once we pass the correct values in the json format 
defaults_final = [:name=>'Balance', :isSum=>'true', :color=>'Highcharts.getOptions().colors[1]']  #array for final balance
positivegraph = Graph.all(:conditions =>'y > 0') # for the positive values
negativegraph = Graph.all(:conditions =>'y < 0') # for the negative values
positive_graph = positivegraph.collect{|graph| {:name=>graph.name, :y=>graph.y}} # form an array of positive values
negative_graph = negativegraph.collect{|graph| {:name=>graph.name, :y=>graph.y}} # form an array of negative values
@user_hash_array = positive_graph.concat(defaults) #concat arrays successively
@user_hash_array = @user_hash_array.concat(negative_graph)
@user_hash_array = @user_hash_array.concat(defaults_final).to_json 
end
end

In the view file I have

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'jquery.min' %>
<%= javascript_include_tag 'highcharts' %> <!--[if IE]> <%= javascript_include_tag 'excanvas.compiled' %> <![endif]-->
<%= javascript_include_tag 'highcharts-more' %>
<%= javascript_include_tag 'exporting' %>
<title>Highcharts Example</title>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
    chart: {
        type: 'waterfall'
    },

    title: {
        text: 'Highcharts Waterfall'
    },

    xAxis: {
        type: 'category'
    },

    yAxis: {
        title: {
            text: 'USD'
        }
    },

    legend: {
        enabled: false
    },

    tooltip: {
        pointFormat: '<b>${point.y:,.2f}</b> USD'
    },

    series: [{
        upColor: Highcharts.getOptions().colors[2],
        color: Highcharts.getOptions().colors[3],
        data: 
          <%= raw @user_hash_array %>
          ,
        dataLabels: {
            enabled: true,
            formatter: function () {
                return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
            },
            style: {
                color: '#FFFFFF',
                fontWeight: 'bold',
                textShadow: '0px 0px 3px black'
            }
        },
        pointPadding: 0
    }]
});
});

</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>

</body>
</html>

In the database I have two fields 1 is the name field and the other field is y which has the integer values.