creating highchart with ajax json data

Question

I'm trying to create a simple chart in a page using mysql data retrieved using a mysql script

I don't understand how to integrate the ajax call with the data required for the chart. I don;t know enough about the various charting plugins to make my life easy and am currently trialing highchart.

My php script returns the following json:

[{"name":"golfers"},{"data":[5.7879,6.6286,6.1724,5.3125,7.1481,6.1333,4.5769]}]

My chart script is:

$(function () {

visitorData(function(data) {
    console.info(data);
    $('#chart1').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Average Visitors'
        },
        xAxis: {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
        },
        yAxis: {
            title: {
                text: 'Number of visitors'
            }
        },
        series: data,
    });
});
});

my function to make the ajax call:

$.ajax({
        url: '/visitdata',
        type: 'GET',
        async: true,
        dataType: "json",
        success: function (data) {
            console.warn(data);
            return data;

        }
    });

But at the moment nothing is being displayed.

I'm not sure how to effectively make the ajax call and integrate it into the chart function. I decided on a callback based on earlier attempts and posts to ensure data is returned before creating the chart - is this bit correct?

I'm not 100% sure the json data is structured correctly

I'm not sure i;ve applied the data variable to the series correctly

Basically - need a tutorial on this so I can get it working and experiment

All help appreciated

Thanks

ryuutatsuo · Accepted Answer · 2013-10-07 22:58:01Z

27

I think you cannot return values from the success call instead you would need to call a function instead. So set up your function that initializes your chart, and in the ajax success call that function with the data

With your code example

function visitorData (data) {
   $('#chart1').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Average Visitors'
    },
    xAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    yAxis: {
        title: {
            text: 'Number of visitors'
        }
    },
    series: data,
  });
}
$(document).ready(function() {
 $.ajax({
    url: '/visitdata',
    type: 'GET',
    async: true,
    dataType: "json",
    success: function (data) {
        visitorData(data);
    }
  });
 });

answered Oct 7, 2013 at 22:58

ryuutatsuo

4,0163 gold badges29 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kishan Mehta Over a year ago

How can i Achieve this: What if I want to build real time updating chart by multiple ajax call ?

Barbara Laird · Accepted Answer · 2013-10-07 23:00:23Z

2

In your ajax success function call your visitorData function with data[1].data (since that's how your json is formatted)

    $.ajax({
        url: '/visitdata',
        type: 'GET',
        async: true,
        dataType: "json",
        success: function (data) {
            visitorData(data[1].data);

        }
    });

also, your visitorData function def is odd.

vistorData = function(data)

or

function vistorData(data)

answered Oct 7, 2013 at 23:00

Barbara Laird

12.7k2 gold badges48 silver badges58 bronze badges

2 Comments

Paweł Fus Over a year ago

I think @ryuutatsuo answer is proper one - in your case, author would need to change also structure when creating chart.

Ray Over a year ago

Thank you. This is the first attempt at using ajax with a callback and wasnt sure of correct approach. Your answer has helped alot

Ɛɔıs3 · Accepted Answer · 2017-03-12 19:17:55Z

1

//parse json response
var chartSeriesData = [];
var chartCategory = [];

$.each(response, function() {

  if(this.name!="TOTAL" && this.no!="0") {

    var series_name = this.name;
    var series_data = this.no;

    var series = [
      series_name,
      parseFloat(series_data)
    ];
    chartSeriesData.push(series);   
  }
});

//initialize options for highchart
var options = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    text: 'SalesOrder '
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      center:['60%','60%'],
      size:150
      ,
      dataLabels: {
        enabled: true,
        color: '#000000',
        distance: 40,
        connectorColor: '#000000',
        format: '<b>{point.name}</b>: {point.y} '
      }
    }
  },
  series: [{
    type: 'pie',
    name: 'Browser share',
    data:chartSeriesData //load array created from json
  }]
}

//options.series[0].setData(datavaluejson);
var chart= $('#container').highcharts(options);

edited Mar 12, 2017 at 19:17

Ɛɔıs3

7,98511 gold badges54 silver badges84 bronze badges

answered Jan 22, 2014 at 14:48

Lem

4195 silver badges4 bronze badges

1 Comment

Satish Over a year ago

it's working for me specially for how to format data for chart chartSeriesData

Collectives™ on Stack Overflow

creating highchart with ajax json data

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related