CODEWITHSUNDEEP
javascripthighcharts
Bryant Frankford
Bryant Frankford

Reputation: 391

How do I set Highcharts categories dynamically?

I've been reading through the documentation and googling for hours and have not made any progress on finding these categories. I am building the grapg.

var udsChart; //global UDS chart variable
function requestData() {
    $.ajax({
        url: 'getJsonData.aspx?ID=udsLevel1',
        success: function (point) {
            udsChart.series[0].setData(point, true);
            setTimeout(requestData, 1000);                
        },
        cache: false
    });
}

udsChart = new Highcharts.Chart({
    chart: {
        renderTo: 'udsGraphDiv',
        defaultSeriesType: 'column',
        events: {
            load: requestData
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        text: 'xAxis'
    },
    yAxis: {
        text: 'yAxis'
    },
    series: [{
        name: 'Random data',
        data: []
    }]
});

enter image description here

Upvotes: 2

Views: 9772

Answers (4)

Gowrisankar Thinakaran
Gowrisankar Thinakaran

Reputation: 29

Try this one

udsChart.xAxis["categories"] = ['a','b','c']

Upvotes: 0

Alexander Stepchkov
Alexander Stepchkov

Reputation: 765

You just need to set xAxis category property. Here is an example.

var data = [["01/22/2016",108],["01/24/2016",45],["01/25/2016",261],
["01/26/2016",224],["01/27/2016",307],["01/28/2016",64]];

var cat = [];

data.forEach(function(item) {

  cat.push(item[0]);

});

udsChart = new Highcharts.Chart({


chart: {
    renderTo: 'udsGraphDiv',
    defaultSeriesType: 'column',
    events: {
        //load: requestData
    }
},
title: {
    text: 'Live random data'
},
xAxis: {
    text: 'xAxis',
    categories: cat
},
yAxis: {
    text: 'yAxis'
},
series: [{
    name: 'Random data',
    data: data 
}]

});

Upvotes: 9

Paweł Fus
Paweł Fus

Reputation: 45079

You are missing simple property: xAxis.type. Set it to category and will work, like this:

xAxis: {
    text: 'xAxis',
    type: 'category'
},

Upvotes: 5

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

Either your categories should fixed and you can setData via setData function with array of values. But if categories also changing , try this

 success: function (data) {
 var categories= [];
 var seriesData = [];
 $.each(data,function(item){
      categories.push(item[0]);
      seriesData.push(item[1]);
 });
 udsChart.xAxis[0].setCategories(categories); //setting category
 udsChart.series[0].setData(seriesData , true); //setting data
setTimeout(requestData, 1000);
}

Upvotes: 8

Related Questions