I'm trying to update a point[x,y] in the chart.
What's the problem?
Ok, I chart and its chart series are like this:
series: [
{
enableMouseTracking: false,
name: 'Line1',
type: 'line',
color: '#5d5d5d',
yAxis: 1,
data: [[12000, 55.068493], [15064, 42.842]],
marker: {
symbol: 'circle'
}
},
{
enableMouseTracking: false,
name: 'Line2',
type: 'line',
color: '#5d5d5d',
yAxis: 1,
marker: {
symbol: 'circle'
},
data: [[12000, 57.671527], [16000, 42.620069]]
},{
name: 'TOM',
//type: 'line',
color: '#ff4100',
yAxis: 1,
marker: {
symbol: 'url(icons/tom.png)'
},
data: [
{
id:'tom_point',
color: '#00FF00',
y: fi_variable,
x: tom_variable
}
]
}
Now the thing is that, I'm checking if fi_variable or tom_variable has changed and if its true, update these two variables, and finally update the chart.
I have tried already, some methods like chart.series[0].data[0].update(y = 10); and its working for some points with fixed x,y values, but no luck for the rest of the points.
For Instance I use chart.series[0].data[1].update(y = 10); will work ok,
but this chart.series[0].data[3].update(y = 10); will not work.
1- Is there any way to replace the data[0] from the above code line with an id of a point in our case tom_point ?
Also I've tried this chart.series[0].setData([[tom_variable,fi_variable, 'tom_point']]);
and again it wont working when the point is with an id or without fixed values.
But If I try chart.series[0]data[0].setData([[tom_variable,fi_variable]]); it works but again not on 3rd element (in our case - as shown above) of the series.
I can get the values for this point with the following,
var tomPoint = chart.get('tom_point').y;
but I can't set any x,y values back to chart and update it (the chart).
I have also tried to check if the variables have changed and to redraw the chart with chart.redraw but nothing.
Any Ideas how can I get this to work?
Am I losing something?
Thank you in Advance for your time.
First of all you try to update point (data[3]) which doens't exist in serie. Secondly in case when you update you need to use
chart.series[0].data[1].update(10); or chart.series[0].data[1].update({y:10}); but not yoru figure
if you want to change the x value also then use
chart.series[0].data[0].update({
x: 10,
y: 100
})
this will update both x and y values like in this example http://jsfiddle.net/DCA8W/
Hope this is what you are looking for.
Ok, the solution finally was simple.
I've managed to update the point:
The third element in the series with the name TOM corresponds to
chart.series[2].
{ // chart.series[2]
name: 'TOM',
//type: 'line',
color: '#ff4100',
yAxis: 1,
marker: {
symbol: 'url(icons/tom.png)'
},
data: [
{
id:'tom_point',
color: '#00FF00',
y: fi_variable,
x: tom_variable
}
]
}
So in order to update [x,y] values of this point, you have to do it like that:
// TOM Point
`chart.series[2].data[0].update({x:var_x, y:var_y});`
Related
I'm getting some troubles to set icons on my series over,infront,top,bot (anywhere) it.
I'm using an API (agromonitoring.com) to get the Data with XHTML request parsing it to JSON then showing using Highcharts, the main problem is that most of the examples to add Icons or Images are using xAxis Categorized, but in my case I'm using an xAxis "date-time" which is always changing that's why I can't use this example (https://www.highcharts.com/demo/spline-symbols) of course I tried,but it doesn't work.
So Here it's the Example of Highcharts
https://codepen.io/pen/?editors=0010
and this is my example(both sites same)
https://playcode.io/447786 (love PlayCode couse integrates console)
https://jsfiddle.net/Miguel5tuxD/afgrzLv7/
I'm trying to useiconUrl getting from that Switch to then parse around 40 icons to the Highchart
Expecting something like the example but with all points an Icon
The problem is that you don't set icons URL for point markers anywhere. So the solution is to pass points array like that (spline series):
[{
x: x,
y: y,
marker: {
symbol: url
}
}, ...]
In your example:
{
name: 'Temperatura',
type: 'spline',
data: datos3.map((item, index) => {
return {
x: item[0],
y: item[1],
marker: {
symbol: datos[index],
width: 20,
height: 20
}
}
}),
tooltip: {
valueSuffix: ' °C',
valueDecimals: 2,
},
marker: {
enabled: true
},
color: Highcharts.getOptions().colors[2],
}
Demo:
https://jsfiddle.net/BlackLabel/c81qz5vr/
I need to convert this Highcharts.JS chart to C3.JS chart
http://i.imgur.com/iwk3pyO.png
This was the Highcharts.JS code:
var chart = new Highcharts.Chart({
xAxis: {
title: {
text: 'Values'
}
},
yAxis: {
title: {
text: ' Frequency',
align: 'high',
offset: 23
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
series: [
{
data: []
}
]
});
Upon converting to C3.JS, I encounter a problem with the x-values. The bar chart of C3.JS, by default, assigns values to each bar as 0, 1, 2, ... n instead of the values that I wanted which is the following:
var xData = [0.1384261, 0.2337903, 0.3291545, 0.4245187, 0.5198829, 0.6152470999999999, 0.7106113000000001, 0.8059755, 0.9013397000000001, 0.9967039];
I tried to somehow "trick" it to show the x values as labels but the problem here is the red region at the back. I set the region to be displayed in 0 to 1 values but you'll notice in C3.JS that the region is place in the first and second bars instead of after the last graph since its value is less than 1.
https://jsfiddle.net/joefclarin/dh5epj0v/
Maybe a little bit late, but in case someone still needs it (or to use numerical X axis in bar chart). Here is an idea:
Instead of
regions: [
{start: 0, end: 1, class: 'red-color'}
]
You need to hack the end value according to how many items are less than 1 in your categories?. You code would be probably like this:
function fctGetItemLessThan1(xData){
//implement your count logic here + return value
}
then in your chart option:
...
regions: [
{start: fctGetItemLessThan1() - 1, end: fctGetItemLessThan1(), class: 'red-color'}
]
...
In your case, fctGetItemLessThan1() - 1 = 9, the result is as follow
Having a chart type line, where I have drawn points on the same point x with y but different, I should bring up the tooltip on the various points, but unfortunately when I pass with the mouse on the chart appears to me only one of the marks painted on the same x, ignoring the other. The graph is on:
enter link description here
I tried, but unfortunately I have not found anything to solve my problem. And 'possible to bring up the tooltip on all points?
Thank you all for the help.
..
david
Use scatter serie, instead of line chart.
series: [{
type: 'scatter',
lineWidth: 2,
name: 'Litri Carburante Rimasti',
data: data,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 2)
},
color: "#000000"
},
color: colorerifornimento,
}]
http://jsfiddle.net/jsd96atf/2/
Need to draw vertical lines from a desired point rather than starting from 0.
plotLines: [{
color: '#FF0000',
width: 1,
value: 4
}, {
color: '#FF0000',
width: 1,
value: 7
}],
Here is the fiddler link: http://jsfiddle.net/bpswt3tr/4/
My requirement is to draw first vertical line from when y value is 110.2 and 2nd line from when y value is 135.6 instead of starting from zero. i.e above the plot line only. Please suggest how can I achieve this? Thanks.
Considering the documentation it is unlikely that HighCharts supports this by default, as you are only allowed to associate a value of the current axis with the line.
You might need a preprocessing step that inverts you function to get the appropriate X values. Something like:
invert(data, Y) -> list of X values with data[X] = Y
You can do this on the chart.events.load call. If you know these are the points you want to add marker elements to then it is fairly straightforward. You first get the current max label value for the yAxis. Then you add a series to the chart with the starting point being your series' value and the second point being the max viewable yAxis value. Then do the same for the second point you want to add a bar to. Then, you need to re-set the yAxis max value to the initial state because highcharts will try to increase the scale to accommodate the new points.
chart: {
events: {
load: function () {
var yMAx = this.yAxis[0].max;
console.log(yMAx);
this.addSeries({
data: [{
x: 4,
y: 110.2,
marker: {
symbol: 'triangle'
}
}, {
x: 4,
y: yMAx,
marker: {
symbol: 'triangle-down'
}
}, ],
showInLegend: false,
color: 'red',
marker: {
enabled: true
}
});
this.addSeries({
data: [{
x: 7,
y: 135.6,
marker: {
symbol: 'triangle'
}
}, {
x: 7,
y: yMAx,
marker: {
symbol: 'triangle-down'
}
}, ],
showInLegend: false,
color: 'red',
marker: {
enabled: true
}
});
this.yAxis[0].update({
max: yMAx
});
}
}
}
Sample demo.
I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.
I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?
Thanks.
Not possible out of the box, but as mentioned by Steve Gu achievable by scatter. You can even ignore the formatter and disable the marker alltogether:
{
series: [
{
type: 'scatter',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key}',
enabled: true,
y: 0,
},
data: [{ x: 0, y: 975, name: '975'}],
marker: {
enabled: false,
}
}
]
}
just disable marker and set format to key.
Add another data series, which is a type of "Scatter" and apply the data labels to this series using Marker. The trick is to use the same fill color as your background color and 0 line width so the marker will not be visible and only the label will be shown.
{
name: 'Outlier',
color: 'white',
type: 'scatter',
data: [ // x, y positions where 0 is the first category
{
name: 'This is my label for the box',
x:0, //box index. first one is 0.
y:975 //it will be bigger than the maximum value of of the box
}
],
dataLabels : {
align: 'left',
enabled : true,
formatter : function() {
return this.point.name;
},
y: 10,
},
marker: {
fillColor: 'white',
lineWidth: 0,
lineColor: 'white'
}
}
Unfortunately this option is not supported, only what you can do is use renderer to add custom text inside chart, but I'm aware that it can be not comfortable solution. http://api.highcharts.com/highcharts#Renderer.text()
Obviosuly you can reqest your suggestion in our user voice system http://highcharts.uservoice.com/