CODEWITHSUNDEEP
jqueryruby-on-railsajaxjsonhighcharts
NamingError
NamingError

Reputation: 27

Highcharts not showing graph elements or xAxis

Hi I am trying to setup a basic highchart, but have hit a problem which I have been struggling to resolve.

I am capturing a JSON object using AJAX, and trying to display it as a graph, but only the title label, yAxis label, and the series are displaying. The columns in my graph and strangely the xAxis (even though the syntax is similar to the yAxis) are displaying at all.

I have anyone may know how I can resolve this it would be greatly appreciated.

The of my HTML page includes the following JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>e

The of my HTML page includes the following HTML/JQuery:

<div id="chart1" style="width:800px; height:300px;"></div>

<script language="javascript" type="text/javascript">

 function chData (jsonData) {
   $('#chart1').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Test Chart'
    },
    xAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    yAxis: {
        title: {
            text: 'Values'
        }
    },
    series: jsonData,
  });
}

$(document).ready(function() {
 $.ajax({
    url: 'ChartData',
    type: 'GET',
    async: true,
    dataType: "json",
    success: function (jsonData) {
        alert(JSON.stringify(jsonData));    // added to check valid JSON recieved
        chData(jsonData);
    }
  });

 });

</script>

Also, my JSON object (which I have checked in a validator, and is returned by the url: 'ChartData') appears as:

def chartItems
 @tmp2 = ["{"\name"\:"\rainydays"\},{"\data"\:[8, 14, 12, 16, 13, 23, 15]}"]

logger.info(@tmp2)
  render json: @tmp2 
end

I went through the documentation as well on highcharts' website, and have tried integrating further code (such as the 'plotOptions' as found in this e.g. http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/ ) but despite trying numerous things to get it working, unfortunately nothing has worked for me.

If anyone may be able to assist, it would be very sincerely appreciated.

Thanks.

Upvotes: 1

Views: 855

Answers (1)

Mark
Mark

Reputation: 108522

The data in your array is a string and not a javascript object.

[-->"<--{\"name\":\"rainydays\"},{\"data\":[8, 14, 12, 16, 13, 23, 15]}-->"<--]

I've highlighted the offending quotes with -->"<--.

Also you have extra brackets:

[{"name\":\"rainydays\"-->}<--,-->{<--\"data\":[8, 14, 12, 16, 13, 23, 15]}]

And finally, I'm not sure why your strings are escaped. Your final data needs to look like this:

[{"name":"rainydays","data":[8, 14, 12, 16, 13, 23, 15]}]

I'm not a ruby guy, but I think you want this:

@tmp2 = [{:name=>"rainydays",:data=>[8, 14, 12, 16, 13, 23, 15]}]

Upvotes: 0

Related Questions