How to make markers disabled while data > 1 after insert new data? It's really confusing me..
In this case, I want to make a Grow Chart (chart example source: CDC-Weight for age percentiles)
Should I use this?
if(dataChartWeight.length > 1)
{
chart.series[19].update({
marker: {
enabled: false
}
}, true);
}
if(dataChartLength.length > 1)
{
chart.series[18].update({
marker: {
enabled: false
}
}, true);
}
Sebastian's answer is good but it can become a little more complicated to fix if you are using multiple series, using a custom tooltip, or when the chart is redrawn. In stead of using destroy(); on the graphic, I used hide();
I wrapped it up in a function and then called the function on first load, and also on the redraw event. It loops through each series first, then loops through the data to "hide" the markers with zero as value.
$(function () {
function hideZeroDots(chart) {
$.each(chart.series, function (series) {
$.each(chart.series[series].data, function () {
if(this.y === 0 && this.graphic) {
this.graphic.hide();
}
});
});
}
$('#container').highcharts({
title: {
text: 'Hide Zero Dots'
},
chart: {
events: {
redraw: function () {
hideZeroDots(this);
}
}
},
tooltip: {
useHTML: true,
hideDelay: 0,
shared: true,
backgroundColor: '#fff',
borderColor: '#eee',
shadow: false,
crosshairs: {
width: 2,
color: 'gray',
dashStyle: 'shortdot'
}
},
series: [{
name: 'responses',
data: [0, 0, 0, 0, 0, 0, 36.5, 33.3, 0, 23.9, 0]
}, {
name: 'views',
data: [0, 0, 0, 0, 0, 0, 26.5, 23.3, 0, 13.9, 0]
}]
}, hideZeroDots);
});
See Demo
Generally marker cannot be disabled for single point, but you can use workaround with hiding SVG element.
$.each(chart.series[0].data, function (point, i) {
if(this.y <10) {
this.graphic.destroy();
}
});
See example: http://jsfiddle.net/Y5HzV/2/
Instead of trying to disable the marker, you can hide it...
marker: {
radius:0,
lineWidth:0,
}
Related
I have a page with a variety of select menus. The select options are used in an ajax call to build a Highcharts bar graph. Every time a filter changes, the graph gets recreated. I did this instead of updating the series data, because in the past I have noticed that destroying and recreating was more efficient than updating.
I want images to show on the x-axis, so I used a nice little trick of creating two x axes, used formatter to return an image on the first axis, and linked the second axis to the first. This works on first refresh. However, every time the chart gets recreated thereafter, the image disappears. I checked my console and I don't see any errors.
And idea of what's going on here?
/**
* Whenselection changes
*/
$(document).on('change', '.filter', function(){
getChartData($params)
})
});
/**
* API call to get data that will populate charts.
* #param {obj} params
*/
function getChartData(params)
{
//Get chart data
$.ajax({
url: apiURL + '/chartdata/',
data: params,
dataType: 'json',
cache: false,
success: function(data) {
initChart(data[0]);
}
});
function initChart(chartData)
{
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
backgroundColor: 'transparent', //#E8EAF6',
height: '23%',
marginLeft: 35
},
title: {
text: null
},
xAxis: {
categories: [category1, category2],
lineColor: 'transparent',
min: 0,
tickColor: 'transparent',
title: {
text: null
},
labels: {
x: -35,
useHTML: true,
overflow: 'allow',
formatter: function () {
if(this.isFirst == true)
return '<img src="../assets/img/nat-jr-grad-gold.png"><br/>';
else
return '<img src="../assets/img/nat-jr-grad-purple.png"><br/>';
}
}
},
yAxis: {
min: 0,
title: {
useHTML: true,
text: null
},
labels: {
enabled: false
},
lineWidth: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
},
legend: {
enabled: false
},
series: [{
name: category1,
data: [{name: category1, y:Math.round(chartData.p_grad_nongap * 100), {y: null}],
}, {
name: category2,
data: [null, {name: category2, y: Math.round(chartData.p_grad_gap * 100)}]
}]
});
}
I reproduced your problem on a simplified example: http://jsfiddle.net/BlackLabel/sm2r684n/
For the first time, the image is loaded asynchronously and the chart does not take it into account when calculating the margins. Every next time the result is different, so you should wait until the picture is loaded:
var img = new Image();
img.onload = function() {
initChart();
}
img.src = "https://www.highcharts.com/samples/graphics/sun.png";
Live demo: http://jsfiddle.net/BlackLabel/m09ok2cg/
I think ppotaczek had the cortrect root cause of the problem; the image is loaded asynchronously and the chart does not take it into account when calculating the margins. His suggestion used setTimeout function to continuously redraw the graph, which is rather inefficient. My work-around for this was to just add the images as avg elements using chart.renderer after the chart was created.
/* Render X-Axis images */
chart.renderer.image('../assets/img/img1.png', 0, 40, 32, 36)
.css({
class: 'icon-img',
zIndex: 10
})
.add();
chart.renderer.image('../assets/img/img2.png', 0, 130, 32, 36)
.css({
class: 'icon-img',
zIndex: 10
})
.add();
I have got into little trouble with hiding the markers in the navigator
The problem is that after I set marker.enabled to false. It does nothing. (JS fiddle - line 75)
navigator: {
series: {
lineWidth: 0,
marker: {
enabled: false // this should hide markers
}
}
}
It is doing nothing because I have some condition where if the condition is true I need to insert the marker at that point, like this:(JS fiddle - line 63).
Btw.. in that JSfiddle example I'm setting it for every point, but that doesn't matter.
series: [{
data: {
x: ...,
y: ...,
marker: {
enabled: true
}
}
]}
- so when I set it manually on that point, it will override the global navigator options
PROBLEM - The global navigator option for the marker is overriden by every single point.
GOAL - Hide all markers in the navigator.
JSFiddle
OLD SOLUTION
If you have only 1 serie in the graph - take the Wojciech Smiel answer.
If you have more than 1 serie in the graph - you have to first make an array of the series with the disabled marker, and then set the options like this
navigator: {
series: seriesArray // array with the series and disabled marker
}
NEW SOLUTION
My friend recently discovered better and easier solution, each serie has navigatorOptions property where you can set radius for the marker, if you set it to 0 it will be hidden.
serie.navigatorOptions = { marker: { radius: 0 } };
Quoting the Highcharts navigator documentation:
Unless data is explicitly defined on navigator.series, the data is
borrowed from the first series in the chart.
That's why navigator series has markers despite the fact that you disabled it in navigator options. However, you can add separate data for the navigator where you can disable marker for each point. Check the demo posted below.
Code:
function generateData(markers) {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.round(Math.random() * 100),
marker: {
enabled: markers
}
});
}
return data;
}
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var chart = this,
series = this.series[0],
seriesNav = this.series[1];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], false);
seriesNav.addPoint([x, y], true, true);
}, 1000);
}
}
},
time: {
useUTC: false
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Random data',
showInNavigator: true,
data: generateData(true)
}],
navigator: {
series: {
lineWidth: 0,
marker: {
enabled: false
},
data: generateData(false)
}
}
});
Demo:
https://jsfiddle.net/BlackLabel/1um9gs47/21/
As shown in screenshot I need my crosshair to move across the points but the tooltip value is snap to next value even the crosshair is not reached that point.I am facing an issue in highcharts. I want when I hover around the chart then crosshair should reflect the value of current point which is being hovered. As shown in code currently its changing values in mid way which is not reflecting right value as respect to crosshair.
Highcharts.chart('container', {
tooltip: {
snap: -1,
crosshairs: true
},
xAxis:{
crosshair: {
interpolate: true,
color: 'gray',
snap: false
},
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
},
series: [{
marker: {
states: {
hover: {
enabled: false
}
}
},
step:'left',
data: [0, 1, 0, 1, 0, 1, 0]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
It's because you set the xAxis.crosschair.snap equal to false. Actually, you can remove the snap: false definition, because it's set to true by default. Then it should behave just like you want.
[EDIT]
If you would like to show current crosschairs xAxis value, it's not implemented in Highcharts, but Highstock has its own xAxis.crosschair.label property which serves the feature you need. Here is the example and documentation:
http://jsfiddle.net/hzcuf68y/
https://api.highcharts.com/highstock/xAxis.crosshair.label
If you don't want to change the Highcharts for Highstock, you can refer to this demo, where the crosschairs and labels are rendered manually: http://jsfiddle.net/mr1c03ae/
Live example: https://jsfiddle.net/n7bawfcg/
API Reference: https://api.highcharts.com/highcharts/xAxis.crosshair.snap
After alot of research I got the solution just posting here if someone may face the same problem. http://jsfiddle.net/F4e2Y/70/
function interpolate(data) {
var resolution = 0.1,
interpolatedData = [];
data.forEach(function(point, i) {
var x;
if (i > 0) {
for (x = data[i - 1].x + resolution; x < point.x; x += resolution) {
interpolatedData.push({
x: Highcharts.correctFloat(x),
y: Highcharts.correctFloat(data[i - 1].y),
});
}
}
interpolatedData.push(point)
});
return interpolatedData;
}
var data = [{
x: 0,
y: 1
}, {
x: 2,
y: 0
}, {
x: 4,
y: 1
}, {
x: 6,
y: 1
}, {
x: 8,
y: 0
}, {
x: 10,
y: 1
}];
Highcharts.chart('container', {
chart:{
zoomType: 'x',
},
tooltip: {
shared: true
},
xAxis: {
crosshair: true
},
series: [{
step:'left',
data: interpolate(data),
}]
});
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>
I have a line series from say 0-t1 interval of x.
i want to show an extended dashed line from t1-t2(in the same series) if user click on the checkup next to legend.
Can anyone suggest how to go about it?
You should be able to use checkboxClick function for updating your series on checkbox click:
http://api.highcharts.com/highcharts/plotOptions.series.events.checkboxClick
http://api.highcharts.com/highcharts/Series.update
You can use zones for changing style of your line from some value:
http://api.highcharts.com/highcharts/plotOptions.series.zones
series: [{
data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
showCheckbox: true,
events: {
checkboxClick: function() {
var checkbox = this.checkbox;
var newData = $.extend([], true, data);
for (var i = 0; i < 14; i++) {
newData.push(20 * Math.random());
}
if (checkbox.checked) {
this.update({
zones: [{
value: data.length - 1,
}, {
dashStyle: 'dash'
}],
selected: false,
zoneAxis: 'x',
data: newData
})
} else {
this.update({
zones: [],
data: data,
selected: true
});
}
}
}
}]
Live example of a chart with zones:
http://jsfiddle.net/yavvLvea/3/
I would like to make something like a dashboard (kinda like the one that you see in many financial site), using Highcharts.
I've got the hang of adding 1 chart to a page, using a container, so I told myself that many containers, duplicating the code for one graph, will do; but I can't get it to work.
I have at least 8 graph, and I would like to organize them either in 2X4 arrangement, or just stacked on top of each other.
Mainly my confusion is coming from the fact that I need a general options section (to group common options), but I also need to customize the graphs, and I need to load data from CSV, so the order in which you do what, is causing me some problems.
I tried to follow an example here, where it was suggested to use setOptions and jQuery.extend, but I was not successful in making it work.
Is there an example that show a skeleton of the webpage, so I can see where to put each function, in which order and what kind of code do I have to put in?
Here you can find example how to add multiple chart like a dashboard: http://www.highcharts.com/demo/sparkline
And copy&paste code:
$(function () {
/**
* Create a constructor for sparklines that takes some sensible defaults and merges in the individual
* chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
*/
Highcharts.SparkLine = function (options, callback) {
var defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible'
},
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner: function (w, h, point) {
return { x: point.plotX - w / 2, y: point.plotY - h};
}
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#910000',
borderColor: 'silver'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return new Highcharts.Chart(options, callback);
};
var start = +new Date(),
$tds = $("td[data-sparkline]"),
fullLen = $tds.length,
n = 0;
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function doChunk() {
var time = +new Date(),
i,
len = $tds.length;
for (i = 0; i < len; i++) {
var $td = $($tds[i]),
stringdata = $td.data('sparkline'),
arr = stringdata.split('; '),
data = $.map(arr[0].split(', '), parseFloat),
chart = {};
if (arr[1]) {
chart.type = arr[1];
}
$td.highcharts('SparkLine', {
series: [{
data: data,
pointStart: 1
}],
tooltip: {
headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
pointFormat: '<b>{point.y}.000</b> USD'
},
chart: chart
});
n++;
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
$tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
// Print a feedback on the performance
if (n === fullLen) {
$('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
}
}
}
doChunk();
});
For a more simplistic start to this problem, take a look at this example:
http://jsfiddle.net/jlbriggs/4GaVj/
It's a very simple set up that defines data arrays first (you can do this as part of your CSV parsing), then defines global options via Highcharts.setOptions(), and then defines the individual charts.
There are several different ways to go about this, from this simple example up to more complex, flexible and dynamic approaches. But if you're looking to start with the basics, this should help.