I am using Highcharts and I would like this chart to display categories on axis z. This is what I have now: JSFiddle
zAxis: {
min: 1,
max: 3,
categories: ['Apples', 'Bananas', 'Oranges'],
minorTickInterval: 1,
title: 'source'
},
As you can see I have 3 categories. I would like them to be displayed in the same way as the numbers on the x and y axes. Any ideas?
Just get set categories for every axis in your config and get it from chart.zAxis[0].options.categories for z axis. Then you can get indexes which are in this.point.x this.point.y and this.point.z and return a formatted tooltip containing categories names.
Code:
tooltip: {
formatter: function() {
const chart = this.point.series.chart,
catsX = chart.xAxis[0].categories,
catsY = chart.yAxis[0].categories,
catsZ = chart.zAxis[0].options.categories;
return `X: ${catsX[this.point.x]}<br/>
Y: ${catsY[this.point.y]}<br/>
Z: ${catsZ[this.point.z]}`;
}
},
Live example:
https://jsfiddle.net/p86a7y0g/
Api reference:
http://api.highcharts.com/highcharts/tooltip.formatter
Output:
Related
I am trying to display a set of dynamic data in a spline type chart using highcharts.
My spline type line chart has 4 series of data that needs to update through a service call. Service returns an array of data such as [0.345, 0.465, 0, 0.453] and I want to update y value of each series with the respective value in the array.
But my chart does not draw the data as expected. Even if I receive different values for y, in the chart it always displays it as 0.
This is my source code. Greatly appreciate if someone could help me figure out the issue in this or a give solution to this problem.
function drawHighChart() {
hchart = Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
},
time: {
useUTC: false
},
title: {
text: 'Audio Analytics'
},
xAxis: {
tickInterval: 1,
},
yAxis: {
title: {
text: 'Prediction'
},
min: 0,
max: 1,
tickInterval: 0.5,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
/* Initially I'm setting some hardcoded values for each series.*/
series: [{
name: 'Calm',
data: [0.43934, 0.52503, 0.57177, 0.69658, 0.97031, 0.119931, 0.137133]
}, {
name: 'Happy',
data: [0.24916, 0.24064, 0.29742, 0.0000, 0.32490, 0.0000, 0.38121]
}, {
name: 'Angry',
data: [0.11744, 0.17722, 0.16005, 0.19771, 0.20185, 0.24377, 0.32147]
}, {
name: 'Disgust',
data: [0.7988, 0.15112, null, 0.22452, 0.34400, null, 0.34227]
}],
});
}
Now when I call drawHighChart() at the windows onload this is what it outputs.
Now from here, I need to update each series dynamically as service returns a data array.
This is my function that updates the chart dynamically every time the service returns a response. Every time I call this fucntion, I pass a data array constructed from the response data.
initiVal = 7; //This is a gloabl variable that increases x-axis value from 7.
function updateHighChart(dataArray) {
var series = hchart.series[0];
var series1 = hchart.series[1];
var series2 = hchart.series[2];
var series3 = hchart.series[3];
var x = initiVal;
y = dataArray[0];
y1 = dataArray[1];
y2 = dataArray[2];
y3 = dataArray[3];
console.log("dataArray: " + dataArray);
series.addPoint([x, y], true, true);
series1.addPoint([x, y1], true, true);
series2.addPoint([x, y2], true, true);
series3.addPoint([x, y3], true, true);
initiVal++;
}
But even if data is dynamically assigned to y axis values in each series, they do not update as expected in the chart. This is how the charts looks after the 6th second/instance when data needs to dynamically update in the chart.
I have a graph with values from 0-40000 (y2-axis) As an example: In a time window the values are 33000-37000. This can be seen on the right side axis-Y2. Now I want to have an axis Y on the left that shows relative values: that is, from 0-4000 in this example ... and at the same time to the right axis Y2 ... do you understand my concern?
Thanks Jerry
If I am understanding the question correctly you are trying to put two different y axes on a single graph.
Dygraphs has built in support for this.
When creating a new graph:
g = new Dygraph(
document.getElementById("graphDiv"),
data,
{
labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
series: {
'Y3': {
axis: 'y2'
},
'Y4': {
axis: 'y2'
},
},
axes: {
y: {
axisLabelWidth: 60
},
y2: {
// set axis-related properties here
labelsKMB: true
}
},
ylabel: 'Primary y-axis',
y2label: 'Secondary y-axis',
}
);
This is taken directly from the dygraphs 2 axes demo page which can be found here:
http://dygraphs.com/tests/two-axes.html
I would like to display on the y-axis of the data through the categories property. I pass an array as I saw in some examples
initLapChart() {
hcharts.chart(this.div.nativeElement, {
chart: {
...
},
yAxis: {
categories: ["0:20", "0:30", "0:40", "1:00", "1:15"],
reversed: true,
tickPixelInterval: 50,
gridLineWidth: 1,
...
},
...
}
but it only shows me the first two values, why?
If you want to show all of your categories, whether you have data for them or not, you just need to set your axis min and max values:
yAxis: {
min: 0,
max: 4,
reversed: true,
tickInterval: 1,
categories: ['0:20', '0:30', '0:40', '1:00', '1:15'],
labels: {
step: 1
}
},
Updated fiddle:
http://jsfiddle.net/jlbriggs/y3ut4jdv/1/
Or you can do it programmatically if you define your categories up front:
var categories = ['0:20', '0:30', '0:40', '1:00', '1:15'],
yMax = categories.length -1;
Fiddle:
http://jsfiddle.net/jlbriggs/y3ut4jdv/2/
The elements in categories array are indexed from 0 to categories.length - 1, so the first element from the array represents value 0 on yAxis, the second, value 1, etc. If you want to display them all, you need to set tickInterval and labels.step properties with value 1.
API Reference:
http://api.highcharts.com/highcharts/yAxis.tickInterval
http://api.highcharts.com/highcharts/yAxis.labels.step
Example:
http://jsfiddle.net/6qp0v887/
I am using the x-axis minRange to have my data points always start from the left on the x-axis. My data sets can have a maximum of 9 points. Whenever my sets only have a single data point or a few, these will end up centered in the graph, if I don't set minRange to a proper value. My x-axis is set to categories: [] to use my time values as strings and not date values. The problem is that when I have only eg two data points and minRange = 9, I will have seven axis labels numbered 2-9 with no data points. How can I remove these labels?
Fiddle
var json = [{"price":"15","time":"12:00"},{"price":"20","time":"12:30"}];
var processed_json = new Array();
$.map(json, function (obj, i) {
processed_json.push({name: obj.time,y: parseInt(obj.price) });
});
$('#container').highcharts({
xAxis: {
categories: [],
minRange: 9,
min: 0
},
yAxis: {
minRange: 30
},
series: [{
data: processed_json
}]
});
I would use tickPositions for this.
You can build the tickPositions array in the same loop that you are using to build your data by simply adding:
tickPositions.push(i);
Example:
http://jsfiddle.net/n4ym5xgr/4/
Another way to do it is to manually supply the list of categories to highcharts library. The idea is to have categories corresponding to your data-points named after obj.time and remaining categories being just empty strings.
var categoryCount = 10;
var json = [{"price":"15","time":"12:00"},{"price":"20","time":"12:30"}];
var processed_json = new Array();
var categories = new Array(categoryCount);
categories.fill("", 0, categoryCount); //Fill list of categories with empty strings
$.map(json, function (obj, i) {
processed_json.push({name: obj.time,y: parseInt(obj.price) });
categories[i] = obj.time; //Set the time for particular category
});
$('#container').highcharts({
xAxis: {
categories: categories,
minRange: categoryCount - 1,
min: 0
},
yAxis: {
minRange: 30
},
plotOptions: {
},
series: [{
data: processed_json
}]
});
Variable categories should be something like ["12:00", "12:30", "", "", "", "", "", "", ""] in this particular case.
I have a chart made with highcharts.js.
The graph works the way I wanted but then if I try to set the categories (programmatically or not) somehitng strange happen, the tick become smaller and move to the centre leaving a big space on the sides of the graph.
BEFORE:
AFTER:
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'graph',
type: 'area',
},
xAxis: {
title: {
text: ''
},
startOnTick: false,
endOnTick: false,
tickmarkPlacement: 'on',
},
series: [{
data: [['aa',29.9], ['bb',71.5], ['cc',106.4],['dd', 129.2 ]]
}],
});
// the button handler
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setCategories(['bb', 'bb', 'cc', 'dd']);
});
});
See this JsFiddle:
http://jsfiddle.net/MaurizioPiccini/d746v/3/
It all happens when you press the button (the categories can be set in the xAxis as well giving the same problem).
Is it possible to have named categories to start and end at the graph extremes?
You can use workaround which, updatse your axis with defined min/max value.
chart.xAxis[0].update({
categories: ['bb', 'bb', 'cc', 'dd'],
min: 0.5,
max: 2.5
});
http://jsfiddle.net/d746v/6/
I found a solution that is also reporteed here:
http://forum.highcharts.com/highcharts-usage/highchart-ticks-start-point-change-when-categories-names-are-t29052/
The solution is not to use categorized xAxis but linear or datetime with label formatter like this:
xAxis: {
labels: {
formatter: function(){
return categories[this.value];
}
}
}
where categories is an array of categories.
It looks like that is the only way to make the chart behave this way.