All,
I'm trying to allow for a user to click on a highchart between two data points and draw a line. The resulting line will calculate LARGESTVALUE-SMALLESTVALUE above the rendered line.
I'm attempting to use this example (http://jsfiddle.net/2MdEN/1/).
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// Add it
series.addPoint([x, y]);
}
}
},
title: {
text: 'User supplied data'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function() {
if (this.series.data.length > 1) this.remove();
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80], null, [60, 40], [85, 60]]
}]
});
});
});
The problem is that is connects the last data point in the series to the newly added point. I'd like the points to be detached from the series to allow for lines being drawn above the generated chart.
Is there any way to accomplish this?
Thank you
You can include a second empty series in your chart config, and change which series you are adding a point to:
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[1]; <------------
// Add it
series.addPoint([x, y]);
}
}
You can also then move your point click event into the second series, if you don't want users to be able to remove points from the original data:
series: [{
data: [
[20, 20],
[80, 80], null, [60, 40],
[85, 60]
]
}, {
id: 'dummy',
color: 'rgba(204,0,0,0.9)',
point: {
events: {
'click': function() {
this.remove();
}
}
}
}]
Updated example:
http://jsfiddle.net/2MdEN/107/
I used the following
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function (e) {
var c = this.series[0].chart;
var s = this.series.length;
var x = e.xAxis[0].value;
var y = e.yAxis[0].value;
if(s == 1) {
c.addSeries('newSeries' + new Date());
c.series[1].addPoint([x, y]);
}else{
if(this.series[this.series.length-1].data.length%2 == 1) {
c.series[this.series.length-1].addPoint([x, y]);
}else{
c.addSeries('newSeries' + new Date());
c.series[this.series.length-1].addPoint([x, y]);
}
}
}
}
},
title: {
text: 'User supplied data!!!!'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
gridLineWidth: 1,
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function () {
if (this.series.data.length > 1) {
this.remove();
}
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80]]
}]
});
});
Related
By default, hover hides all other columns in all groups. How can I make it so that only the columns in that group are hidden on hover?
I found the hover event in the documentation, and getting the column (upper left), but how to hide it with it? Maybe through tooltip somehow?
My question in original view.
An example of how it works now:
Example how to:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'column',
height: 350,
},
title: {
text: 'Some text'
},
xAxis: {
categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
},
yAxis: {
title: {
text: 'Title y'
}
},
/*tooltip: {
shared: true,
split: true,
},*/
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
r: 10,
fill: Highcharts.getOptions().colors[1]
})
.css({
color: '#FFFFFF'
})
.add();
}
chart.lbl
.show()
.attr({
text: 'x: ' + this.x + ', y: ' + this.y
});
}
}
},
events: {
mouseOut: function (){
if (this.chart.lbl) {
this.chart.lbl.hide();
}
}
}
},
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0,
events: {
mouseOver: function() {
console.log("1");
}
}
}
},
series: [{
name: 'Dev #1',
data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
}, {
name: 'Dev #2',
data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
}, {
name: 'Dev #3',
data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
}]
});
.actions, .chart {
margin: 15px auto;
width: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart_1" class="chart"></div>
To achieve that, at first you need to set the opacity to 1 for inactive series and disable hover.
plotOptions: {
series: {
states: {
inactive: {
opacity: 1
},
hover: {
enabled: false
}
},
Then, use the mouseOver and mouseOut point events to find the points with the same category as the hovering one, and to update them with new opacity.
point: {
events: {
mouseOver: function() {
var point = this,
chart = point.series.chart,
allSeries = chart.series,
category = point.category;
allSeries.forEach(series => {
series.points.forEach(point => {
if (point.category === category) {
point.update({
opacity: 0.2
}, false)
}
})
})
chart.redraw()
},
mouseOut: function() {
var point = this,
chart = point.series.chart,
allSeries = chart.series,
category = point.category;
allSeries.forEach(series => {
series.points.forEach(point => {
point.update({
opacity: 1
}, false)
})
})
chart.redraw()
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/5Lcn6d8e/
API References:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver
https://api.highcharts.com/class-reference/Highcharts.Point#update
I am using highchart with jquery .I am able to show X-axis with label (Apple,pears)..But I want to show Y-axis without lable .In other words I want to show a straight line on Y-axis.
here is my code
http://jsfiddle.net/3sembmfo/118/
$(function () {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
},
yAxis: {
allowDecimals: false,
title: {
text: 'Fruit'
},
visible: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});
This can, and should, be resolved by options:
yAxis.lineWidth - to enable the line
yAxis.title.text - to hide the title
yAxis.gridLineWidth - to disable horizontal lines,
yAxis.labels.enabled - to disable labels
Working demo: http://jsfiddle.net/BlackLabel/3sembmfo/122/
Snippet:
yAxis: {
allowDecimals: false,
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 1,
visible: true
},
Replace your y Axis code with this. http://jsfiddle.net/3sembmfo/119/. If you have any query let me know.
yAxis: {
allowDecimals: false,
labels:{
style: {
fontSize:'0px'
}
},
title: {
text: 'Fruit',
style: {
fontSize:'0px'
}
},
visible: true
},
You have to use Highcharts.SVGRenderer and add line using load event.
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
Fiddle demo
$(function() {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches'],
},
yAxis: {
allowDecimals: false,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0,
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>
<div id="container"></div>
Hey I know that if I want to color specific point, I can do it using the fillColor attribute of current marker.
But When I hover the point, the color return to be the default color of the graph,how can I prevent such effect?
I want the point to be red in both situation(onhover event and not onhover event),
what attribute per point do I need to change for this effect to happen?
I have added a demo below, the demo act like this: when you click the canvas of the graph,a new graph is being generated and the first point is red but when I hover it , it return to its default color.
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
margin: [70, 50, 60, 80],
events: {
click: function (e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
var chart = this;
this.addSeries({
data: [{ x:x, y:y, marker:{radius: 5 , fillColor: "red" }},{x:(x*2), y:(y*2)}]
})
}
}
},
title: {
text: 'User supplied data'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
gridLineWidth: 1,
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function () {
if (this.series.data.length > 1) {
this.remove();
}
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80]]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>
Add in states option where you are setting the marker fillColor:
marker: {
radius: 5,
fillColor: 'red',
states: {
hover: {
fillColor: 'red',
}
}
}
I have created One HighChart ..But its 2 data coordinates are overlapping on y axis after every 2nd Coordinates.
My JSFiddle
My Code:
$(function () {
var highOptions = {
chart: {
type: 'line',
renderTo: 'container2',
zoomType: 'x',
marginTop: 100
},
title: {
text: 'Score'
},
subtitle: {
text: ' '
},
xAxis: {
title: {
text: 'XXX'
},
categories: [],
labels: {
rotation: 45,
step: 1,
y: 30
}
},
yAxis: [{ // left y axis
title: {
text: 'XXX'
},
min: 0,
max: 9,
plotLines: [{
value: 7.5,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'XXX'
}
}]
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 1);
}
}
}
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
series: []
};
highOptions.xAxis.categories = [0.1003, 0.1006, 0.1008, 1.1010, 1.1011, 1.1012, 1.1013, 2.4];
highOptions.subtitle.text = "XXX:";
chart = new Highcharts.Chart(highOptions);
for (var x = 0; x <= 1; x++) {
var newLP = [];
switch (x) {
case 0:
aName = "One";
newLP.push([0.1004, 4.5]);
newLP.push([0.1008, 1.4]);
newLP.push([1.1012, 5.5]);
newLP.push([1.1014, 2, 6]);
newLP.push([2.4, 8.22]);
break;
case 1:
aName = "Two";
newLP.push([0.1004, 5.52]);
newLP.push([0.1008, 6.16]);
newLP.push([1.1012, 6.34]);
newLP.push([1.1014, 6.69]);
newLP.push([1.1016, 6.36]);
newLP.push([2.4, 7.44]);
break;
}
chart.addSeries({
name: aName,
data: newLP
}, false);
}
chart.redraw();
});
I have test it with several data ..still it overlaps .. what could be the issue ..
Please Suggest
The problem is that you're x-axis points are so close to each other it seems as they are overlapping. For example 0.1003 is pretty close to 0.1006 and 0.1008 is pretty close to 1.1010. However, If you zoom in you can tell they are not overlapping. See http://jsfiddle.net/u9xES/555/.
I want to add a maker when a point is clicked same like alerting a selected point...the code for selecting a point :
cursor: 'pointer',
events: {
click: function(event) {
alert('x: ' + event.xAxis[0].value+' y: '+event.yAxis[0].value);
}
}},
Now what should I write in place of alert to mark the point when it is clicked?
instead of click event for this you can use marker states
plotOptions > series > marker > states > select > radius: 10
plotOptions: {
series: {
allowPointSelect: true,
marker: {
radius: 1,
states: {
select: {
radius: 10,
fillColor: 'red'
}
}
}
}
}
here is a working example
API reference : http://api.highcharts.com/highcharts#plotOptions.line.marker.states.select
Hope this will help you to achieve what you need.
I assume that is correct with that scenario:
http://jsfiddle.net/rV7As/
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function (event) {
alert('aaa');
}
}
}
}
},
Thanks to all for your help...I got it what I wanted. I created a js fiddle accordingly.
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
margin: [70, 50, 60, 80],
events: {
click: function(e) {
var ren = this.renderer;
// find the clicked values and the series
var x1 = e.xAxis[0].value;
x1 = this.xAxis[0].toPixels(x1);
y1 = e.yAxis[0].value;
y1 = this.yAxis[0].toPixels(y1);
series = this.series[0];
ren.circle(x1, y1, 5).attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
})
.add();
// Add it
// series.addPoint([x, y]);
}
}
},
title: {
text: 'User supplied data'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function() {
if (this.series.data.length > 1) this.remove();
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80]]
}]
});
});
http://jsfiddle.net/das_palash89/WN3XC/3/