最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How do I set Highcharts categories dynamically? - Stack Overflow

programmeradmin4浏览0评论

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: []
    }]
});

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: []
    }]
});

Share Improve this question asked Jan 28, 2016 at 14:00 Bryant FrankfordBryant Frankford 3913 silver badges14 bronze badges 5
  • try making your response param something else instead of point , means success: function (myData) { var udsChart = $("#udsGraphDiv").Highcharts(); udsChart.series[0].setData(myData, true); Also share your data format ,is this a array with string and values? post response of ajax here to debug it better. – Nishith Kant Chaturvedi Commented Jan 28, 2016 at 14:26
  • it's a jSon object. Just two values [["01/22/2016",108],["01/24/2016",45],["01/25/2016",261],["01/26/2016",224],["01/27/2016",307],["01/28/2016",64]] – Bryant Frankford Commented Jan 28, 2016 at 14:31
  • You need to set categories and data separately for column chart. iterate over the data and push dates in category and values in series.data For example var data = {"name":"someName","data":[50,,150,155,324,705]}; and var categories = [5600, 5700,5800,5900,6000,6100]; – Nishith Kant Chaturvedi Commented Jan 28, 2016 at 14:36
  • I understand that, I was able to do it on a regular graph but I cannot figure out where and how to place the code in the live chart. – Bryant Frankford Commented Jan 28, 2016 at 14:38
  • Adding code for that – Nishith Kant Chaturvedi Commented Jan 28, 2016 at 14:41
Add a comment  | 

4 Answers 4

Reset to default 9

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 
}]

});

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);
}

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

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

Try this one

udsChart.xAxis["categories"] = ['a','b','c']
发布评论

评论列表(0)

  1. 暂无评论