Question

I am loading data stored in a MySQL Database.
The chart doesn’t show up on the webpage, but it doesn’t show any other warning.

My PHP webpage returns a JSON encoded header with the following information:

["John Doe","2","Jane Doe","3"]

The script that loads the information is the following:

var chart;
function requestData() {
    $.ajax({
        url:'includes/bin/get_leaders.php',
        success: function(point) {
            alert(point);
        var series = chart.series[0],
        shift = series.data.length > 20; // shift if the series is longer than 20
        chart.series[0].addPoint(point, true, shift);
    },
    cache: false
});
$(document).ready(function() {
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bar',
        events: {load: requestData}
    },
    title: {
        text: 'Top Agents'
    },
    xAxis: {
        type: 'int',
        title: {text: null}
    },
    yAxis: {
        min: 0,
        title: { text: 'Sales this Week', align: 'low'}
    },
    tooltip: {
        formatter: function() {
            return ''+ this.series.name +': '+ this.y +' sales';
            }
        },
    plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
    legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -100,
            y: 100,
            floating: true,
            borderWidth: 0,
            backgroundColor: '#FFFFFF',
            shadow: false
        },
        credits: {
            enabled: false
        },
    series: [{
        name: 'Sales'        }]
});        
});
});

Any clue what’s going on?
Thank you!

Answer 1

Looks like you are passing in a [“string”, “number”, “string”, “number”].
What you want is {2, 3} for your series and then for your xAxis to use a category list of {“John Doe”, “Jane Doe”}.