Using JSON in amcharts - How to modify a JSON output (Ruby on Rails)

Question

I am trying to use amcharts and I want to use JSON to format the data for my chart. However, it seems that the syntax that amcharts accepts is not valid JSON.

Here is the javascript code for the data for a hardcoded amchart chart:

 var chartData = [{
            country: "Czech Republic",
            litres: 301.90
        }];

Here is the code if I want to create the same chart with embedded ruby:

Controller

 @chart_data = [{"country": "Czech Republic", "litres": 301.90}]

View

 var chartData = <%= @chart_data.to_json %>;

The valid JSON output:

 [{"country": "Czech Republic", "litres": 301.90}]

However, what amcharts accepts is:

 [{country: "Czech Republic", litres: 301.90}]

Therefore my chart is not working because amcharts doesn't accept the valid JSON. So is there a way to create "invalid" JSON without the double quotes around country and litres? Or is there a better way to get the data in the form amcharts accepts? Any help would be greatly appreciated.

Here is the full javascript:

 <script type="text/javascript">
        var chart;
        var legend;

        var chartData = [{
            country: "Czech Republic",
            litres: 301.90
        }, {
            country: "Ireland",
            litres: 201.10
        }, {
            country: "Germany",
            litres: 165.80
        }, {
            country: "Australia",
            litres: 139.90
        }, {
            country: "Austria",
            litres: 128.30
        }, {
            country: "UK",
            litres: 99.00
        }, {
            country: "Belgium",
            litres: 60.00
        }];

        AmCharts.ready(function () {
            // PIE CHART
            chart = new AmCharts.AmPieChart();
            chart.dataProvider = chartData;
            chart.titleField = "country";
            chart.valueField = "litres";
            chart.outlineColor = "#FFFFFF";
            chart.outlineAlpha = 0.8;
            chart.outlineThickness = 2;

            // WRITE
            chart.write("chartdiv");
        });
    </script>

Answer 1

I might be missing the point here, but if you are not using @chart_data anywhere else you could just build the pseudo-json data string in the controller and remove the .to_json call in your view:

Controller:

@chart_data = "[{country: \"Czech Republic\", litres: 301.90}]" #build this string dynamically

View:

var chartData = <%= @chart_data %>;

If you are using @chart_data elsewhere you could also create a @formatted_chart_data

If you want to use ajax to reduce the overhead when the chart is not displayed you can add an action that does nothing but return your chart data and call it from your js:

Controller:

def get_formatted_chart_data
  chart_data = "[{country: \"Czech Republic\", litres: 301.90}]"
  render :text => chart_data
end

Or is it dynamically building the string that is the hard part?

Answer 2

From amCharts: "amCharts does not directly support JSON. It's not loading external data files or anything. It just uses native JavaScript data objects. So it's really up to browser's JS parser what format of data it can or can't read."

http://www.amcharts.com/forum/viewtopic.php?id=7049

I'm assuming you have more than one chart and building out custom string formatters for each may be a bit cumbersome compared to the easy of use of the default json or RABL formats.

What you can also do is create a common javascript function and use a little RegEx to filter the JSON to a amCharts friendly format.and

function CleanJSONForAMCharts(json) {
    return json.replace(/"(\w+)"\s*:/g, '$1:');
}

Now this is still of course a string now and not the array of object amCharts is expecting. Eval() must be called on the returned string before it can be passed to dataProvider.

//sample data that would have been returned from a RESTful service or another JSON returning method
var chartData = CleanJSONForAMCharts("[{\"title\":\"sample 1\",\"value\":130},{\"title\":\"sample 2\",\"value\":26}]");

var chart = new AmCharts.AmSerialChart();
chart.categoryField = "title";
chart.dataProvider = eval(chartData);

var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.type = "column";
graph.fillAlphas = 1;
chart.addGraph(graph);

chart.write("chartdiv");