It is currently Wed Oct 22, 2014 2:01 am Advanced search

I am so close - please help me finish!

Technical support, bug reports and more.

I am so close - please help me finish!

Postby sapphie » Wed Feb 22, 2012 5:11 pm

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
sapphie
 
Posts: 5
Joined: Thu Feb 16, 2012 11:48 am

Re: I am so close - please help me finish!

Postby Fusher » Wed Feb 22, 2012 5:21 pm

$.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);
      });
      });           
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7362
Joined: Mon Jan 30, 2012 12:16 pm

Re: I am so close - please help me finish!

Postby sapphie » Wed Feb 22, 2012 5:51 pm

Thank you!

Simple beginner's error.

Lee
sapphie
 
Posts: 5
Joined: Thu Feb 16, 2012 11:48 am

Re: I am so close - please help me finish!

Postby sapphie » Wed Feb 22, 2012 6:32 pm

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
sapphie
 
Posts: 5
Joined: Thu Feb 16, 2012 11:48 am

Re: I am so close - please help me finish!

Postby Fusher » Wed Feb 22, 2012 7:46 pm

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 ;)
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7362
Joined: Mon Jan 30, 2012 12:16 pm

Re: I am so close - please help me finish!

Postby sapphie » Thu Feb 23, 2012 11:44 am

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
sapphie
 
Posts: 5
Joined: Thu Feb 16, 2012 11:48 am


Return to Highcharts Usage

Who is online

Users browsing this forum: Google [Bot] and 7 guests