I am so close - please help me finish!

[sapphie]

I am trying to read from a JSON file that contains y values and URLs for the bars. My json file looks like this:

Code: Select all

{
"mydata": [
   {
      "y": 1,
      "url": "http://www.highcharts.com"
   },   
   {
      "y": 2, 
      "url": "http://www.bbc.co.uk"
   }
]
}

My code looks like this:

Code: Select all

<script type='text/javascript'>
      $(document).ready(function() {      
      var options = {         
         chart: {
            renderTo: 'hgraphcontainer',
            defaultSeriesType: 'column'
         },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
         },
   
         plotOptions: {
            series: {
               cursor: 'pointer',
               point: {
                  events: {
                     click: function() {
                     location.href = this.options.url;
                  }
               }
            }
         }
         },
   
         series: []
      };
      
      var seriesOptions = {
         name: 'Calls',
         data: []
      };
      
      $.getJSON('json.txt', function(mydata) {
         $.each(mydata.mydata, function(key, val) {
            //alert (key + " " + val.y + ": " + val.url);
            //alert (key + " " + parseInt(val.y));
            seriesOptions.data.push(val);
         });
      });
      alert("ok");
      
      options.series.push(seriesOptions);
            
      var chart = new Highcharts.Chart(options);
      });            
      </script>

It works if I have the alert("ok") after getting the data but if I leave that out I get no chart. Can anyone explain why or suggest a better way to do this?

Thanks

Lee

[Fusher]

$.getJSON is an AJAX request. AJAX from "Asynchronous JavaScript and XML" - you don't know when you will get the response from server. Your JS is stopped until you click on alert - meanwhile you get (probably - 99%) the response and you can create chart.
Put inside the callback for success in your getJSON creating new chart. Read more about AJAX - it's important.

Code: Select all

  $.getJSON('json.txt', function(mydata) {
         $.each(mydata.mydata, function(key, val) {
            //alert (key + " " + val.y + ": " + val.url);
            //alert (key + " " + parseInt(val.y));
            seriesOptions.data.push(val);
         });
         options.series.push(seriesOptions);
         var chart = new Highcharts.Chart(options);
      });
      });           


[sapphie]

Thank you!

Simple beginner's error.

Lee

[sapphie]

Ok, hoping for more help. Apologies for being a newbie and not really understanding what I am doing.

I now need to also read the Category names from the JSON file instead of pre-defining them in the code. I was hoping to use the 'name' parameter but that doesn't set the category name, rather the data point name.

Can anyone quickly suggest how I could modify my simple JSON file and my script so that I read two categories (say 'Jan', 'Feb') and assign to the chart?

Thanks in anticipation,
Lee

[Fusher]

To push categories jest first create in xAxis epmty categories array:

Code: Select all

         xAxis: {
            categories: []
         }

And then when you parsing JSON use:

Code: Select all

options.xAxis.categories.push(yourParsedCategoriesName)

PS: Don't apologize, everyone's has his own starts

[sapphie]

Thanks again. I was having an issue with how to set up my json file and parsing it. I initially had a second block holding the categories and tried to have a second $.each block to grab the values but that didn't seem to work.

In the end I thought it would be simpler to have the following as my JSON file:

Code: Select all

{
"mydata": [
   {
      "y": 1,
      "url": "http://www.ex.ac.uk",
      "cat": "Active"
   },   
   {
      "y": 2, 
      "url": "http://www.bbc.co.uk",
      "cat": "Resolved"
   }
]
}

and then do one of the following:

Code: Select all

$.each(mydata.mydata, function(key, val) {            
   
   //grab the value of cat for the category
   options.xAxis.categories.push(val.cat)               

   //For the data, either push the whole object as returned
   seriesOptions.data.push(val);   

  //Or construct a valid string and turn into an object:               
  // var json = '{ "y":  ' + val.y + ', "url": "' + val.url + '"}';
  // var obj = jQuery.parseJSON(json);
  // seriesOptions.data.push(obj);

});

i.e. pass the whole object (including my "cat" element) or construct a valid data object and pass that.

Both seem to work.

Lee