jqplot using rails not rendering pie chart - jqplot

Question

I am trying to create a pie chart in jqplot. I am not sure if i am missing anything here but the chart is not rendering at all.
Below is one of my action method in dashboard_controller in Rails:
def index
#trans = Transaction.joins(:category).group("categories.name").sum(:amount)
respond_to do |format|
format.html # index.html.erb
format.json { render json: #trans }
end
end
here is the json data i got after executing the action method.
{"Bills & Utilities":1019.11,"Uncategorized":196.57,"Home":30.29,"Entertainment":300.0,"Food & Dining":465.45,"Personal Care":63.92,"Auto & Transport":571.44}
Here is my html and javascript
<script type="text/javascript" src="/assets/jqplot/jqplot.js"></script>
<script type="text/javascript" src="/assets/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="/assets/jqplot/plugins/jqplot.ciParser.js"></script>
<script type="text/javascript" src="/assets/jqplot/plugins/jqplot.json2.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/jqplot/jqplot.css" />
<div id="chart10" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
<script class="code" type="text/javascript">
$(document).ready(function() {
$.getJSON('/dashboard/index.json', function(data){
//var data = [['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14]];
plot = jQuery.jqplot('chart10', data, {
title: ' ',
//dataRenderer: $.jqplot.ciParser,
seriesDefaults: {
shadow: true,
renderer: $.jqplot.PieRenderer,
rendererOptions: {
fill: false,
sliceMargin: 4,
showDataLabels: true
}
},
legend: { show:true }
});
});
}); // document.ready
</script>
Any ideas what could be wrong?

Answer 1

Am I missing something? Your json return variable data looks like this:
{"Bills & Utilities":1019.11,"Uncategorized":196.57,"Home":30.29,"Entertainment":300.0,"Food & Dining":465.45,"Personal Care":63.92,"Auto & Transport":571.44}
While jqPlot wants it like this:
[["Bills & Utilities",1019.11],["Uncategorized",196.57],["Home",30.29],["Entertainment",300.0],["Food & Dining",465.45],["Personal Care",63.92],["Auto & Transport":571.44]]
Edits For Comment
Putting the data in the correct format:
data = {"Bills & Utilities":1019.11,"Uncategorized":196.57,"Home":30.29,"Entertainment":300.0,"Food & Dining":465.45,"Personal Care":63.92,"Auto & Transport":571.44};
jqData = []
$.each(data, function(k,v){jqData.push([k,v]);});
See fiddle here.