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
4 Answers
Reset to default 9You 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']