Can anyone help me set step value on x-axis or y-axis dynamically say on clicking a button (not at the design time). In the example below, I should be able to set the step/interval as 100 instead of 250.
here is the example fiddle
http://jsfiddle.net/PanicJ/H2pyC/8/
$(function () {
var setA = [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4];
var setB = [129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4];
var data = Math.random() < 0.5 ? setA : setB;
var height=Math.max.apply(Math, data);
if(height > 1000){
height = 1000;
}
$('#container').highcharts({
chart: {
marginRight: 80 // like left
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
lineWidth: 1,
max: height,
min: 0,
title: {
text: 'Primary Axis'
}
}],
series: [{
data: data
}]
});
});
The tickInterval is what you want to change:
$('#setStep').click(function () {
var chart = $('#container').highcharts();
chart.yAxis[0].update({
tickInterval: 100
});
});
http://jsfiddle.net/blaird/H2pyC/85/
Related
I have a problem with the chart!
How can I enlarge and fixed the point I clicked on?
An example of my chart below, I will be grateful for the help
example: http://jsfiddle.net/4bounhdg/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
enabled: true,
symbol: 'circle',
radius: 6},
point: {
events: {
click: function() {
for (var i = 0; i < this.series.data.length; i++) {
this.series.data[i].update({ color: '#7db7ed' }, true, false);
}
this.update({ color: '#0053ff'}, true, false);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0]
}]
});
});
You can set the higher radius in the update callback.
Demo: http://jsfiddle.net/BlackLabel/rkqtcps8/
point: {
events: {
click: function() {
this.update({
color: '#0053ff',
marker: {
radius: 20
}
}, true, false);
}
}
}
API: https://api.highcharts.com/class-reference/Highcharts.Point#update
When we hover on may In example, we don't see tooltip for this month, because data is null. Can I set the settings to see the tooltip when data is null?
Well as far as I know there is no generic option for that since highcharts ignores null values from showing.
On the other hand, we can replace the null points with "fake" ones, that have an average value between the 2 closest points (this will cause the chart flow remain the same), and with a custom property isNull which can be used as a flag later.
After doing that, we can use a formatter function for the tooltip, and manipulate the tooltip the way we want, for example displaying only the series name when a point isNull.
$(function () {
$('#container').highcharts({
title: {
text: 'The line is connected from April to Juni, despite the null value in May'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
connectNulls: true
}
},
tooltip: {
formatter: function(){
if(this.point.isNull == undefined)
return this.series.name+"<br>"+"<b>value:</b>"+this.y;
return this.series.name;
}
},
series: [{
data: [null, 71.5, 106.4, 129.2, null, 176.0, 135.6, null, 216.4, 194.1, 95.6, 54.4]
}]
}, function(chart){
var series = chart.series[0];
var data = series.data;
$.each(data,function(i){
var point = data[i];
var prevPoint = data[i-1] != undefined ? data[i-1].y : 0;
var nextPoint = data[i+1] != undefined ? data[i+1].y : 0;
if(point.y == null){
series.addPoint({x:point.x,y:(prevPoint+nextPoint)/2, isNull:true});
}
});
});
});
http://jsfiddle.net/zb5ksxtc/1/
I hope this is what you meant.
UPDATE
We can also do something not less hacky... (I guess a little hacking could work fine in this unusuall case)
What I did here was creating a "fake" scatter series, with points located where null values from the real series (used same average logic).
The series has hidden markers, and has a unique name.
After that, I used a shared tooltip and a formatter to display the right tooltip.
I used the name attribute to determine what series is focused:
$(function () {
$('#container').highcharts({
title: {
text: 'The line is connected from April to Juni, despite the null value in May'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
connectNulls: true,
},
},
tooltip: {
shared:true,
formatter: function(){
var points = this.points;
var seriesName = points[0].series.name;
if(seriesName == 'fake')
return "Null tooltip";
return seriesName+"<br>value: <b>"+this.y+"</b>";
}
},
series: [{
type:'areaspline',
data: [null, 71.5, 106.4, 129.2, null, 176.0, 135.6, null, 216.4, 194.1, 95.6, 54.4]
},
{
type:'spline',
lineWidth:0,
name:'fake',
showInLegend:false,
marker:{
symbol:'circle',
radius:0,
}
}
]
}, function(chart){
var series = chart.series[0];
var fake_series = chart.series[1];
$.each(series.data, function(i){
var point = this;
var nextPoint = series.data[i+1] != undefined ? series.data[i+1].y : 0;
var prevPoint = series.data[i-1] != undefined ? series.data[i-1].y : 0;
if(series.data[i].y == null)
fake_series.addPoint([series.data[i].x, (nextPoint+prevPoint)/2]);
});
});
});
and the fiddle ofcourse: http://jsfiddle.net/zb5ksxtc/8/
I want to render a histogram/line chart using HighCharts.
I don't want to hard code the array which is used by series.
My data that I wish to render is in the object display, which looks like:
0: o, 107983,
1: 1, 347923,
2: 2, 182329,
.
.
.
My code is here:
function RenderChart(display) {
myDisplay = display;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Metric histogram'
},
xAxis: {
//categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
minPadding: 0.05,
maxPadding: 0.05
},
plotOptions: {
line: {
animation: false
},
column: {
groupPadding: 0,
pointPadding: 0,
borderWidth: 0
}
},
series: [{
data: [myDisplay]
}]
});
};
This doesn't render the line chart. It renders an empty chart.
run a routine such that the response you get is processed as accepted by the highchart. then you can assign the resultant to the data directly.
try this, it will work
I tried to plot a chart with column type with one series. The data can be both positive and negative. I tried to update the color of points that are larger than 0 (or less than 0) with one click. With the following example:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
for (var i = 0; i < this.series.data.length; i++) {
if (this.y < 0) {
if (this.series.data[i].y < 0)
this.series.data[i].update({ color: '#ECB631' }, false, false);
}else {
if (this.series.data[i].y > 0)
this.series.data[i].update({ color: '#ECB631' }, false, false);
}
}
}
}
}
}
},
series: [{
data: [29.9, -71.5, 106.4, -129.2, 144.0, 176.0, -135.6, 148.5, -216.4, 194.1, 95.6, 54.4],
negativeColor: '#FF0000'
}]
});
Here is the link. http://jsfiddle.net/CkkbF/57/
I found that something interesting and weird:
If the point data is positive, the clicked column color will be changed, but other columns with positive data have slightly different color (seem highlighted.)
If the point data is negative, the clicked column color will stay the same (red in my example) until you mouse out of it. The other columns with negative data stays the same unless you try to mouse in/out of them.
Possibly a bug? How can I update them correctly?
I think you want to update series color, or series negativeColor, take a look: http://jsfiddle.net/CkkbF/60/
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
if (this.y > 0) {
this.series.update({
color: "#ECB631"
});
} else {
this.series.update({
negativeColor: "#ECB631"
});
}
}
}
}
}
},
Highcharts can connect a series line between null values, but it appears that it cannot connect a line between points with value of 0 if the yAxis min is also set to 0. Is there a workaround?
Here's an example: http://jsfiddle.net/p2EYM/2/
What the chart looks like (note breaks in line):
and the Highcharts code:
$(function () {
$('#container').highcharts({
title: {
text: 'Points with zero value are not connected by line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
offset: 10,
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
min: 0,
},
series: [{
data: [20, 0, 0, 0, 0, 40, 50, 10, null, null, 0, 0]
}]
});
});