Is it possible to use a Highcharts navigator with a given data set and time range to trigger an event to filter the data set displayed in a regular HTML table below? I dont want the main chart at all, just want to use the navigator functionality.
Basically, I'm visualizing a time picker, say for the past 7 days, with a data plot for the last 7 days - with the last "24" hours selected, and a HTML table below this highcharts navigator.
As the user changes his time range selection in the navigator, my event listener would trigger a change in the rows displayed below in the HTML table.
Anyone have suggestions on how to do this?
Thanks in advance!
Just set small height for a chart and add sepcific series for navigator. Something like that: http://jsfiddle.net/Yrygy/137/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
height: 120
},
yAxis: {
height: 1
},
xAxis: {
min: 2,
max: 4,
lineWidth: 0,
tickLength: 0,
labels: {
enabled: false
}
},
navigator: {
series: {
data: [1,2,3,4,2,3,4,2,33,4,4,3,2,3,2,3,3,2,2,3,4]
}
},
series: [{
data: [null]
}]
});
Related
Hi I am using АpexChart but I have problem setting up xaxis. The picture below is from another chart, but I'm looking for the effect it has. Note the long straight line, this means there is no data for the specific period.
How do I set up a АpexChart so I can display similar data
var options = {
series: [{
name: "Level",
data: [30,45,50,60,70,91,125]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: true
}
},
dataLabels: {
enabled: true
},
stroke: {
curve: 'straight'
},
title: {
text: 'Battery',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
The chart we see on your screenshot has been made with Highcharts, right? I know that you can do something similar with amCharts or Chart.js. But this feature is not available in ApexCharts yet. With ApexCharts, you will get blanks (see demo) if you have null values in your data.
Take a look at this issue and this pull request on GitHub.
Comment of the library author (2019), from the issue:
This has been proposed, but not worked upon yet.
Comment of the library author (2021), from the PR:
Update: This PR doesn't solve the issue the way we wanted and doesn't cover multiple use-cases.
Please bear with us. There might be a new PR with a completely different implementation.
I want to disable or hide marked x-axis on the following image:
But I still need to be able to show a plot line.
I tried to play around with "xAxis" Highcharts property and I am able to hide marked x-axis, but then I can not add a plot line. It seems to me this axis is somehow connected with the plot.
Thanks a lot for help.
The plotLines are connected to an axis, but you can separately disable the grid and the labels:
xAxis: [{
...,
grid: {
enabled: false
},
plotLines: [{
color: 'red',
value: today + day * 7,
width: 5
}],
labels: {
enabled: false
},
tickLength: 0
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/c2xLruvp/
API Reference: https://api.highcharts.com/gantt/xAxis.visible
I have a page where I can put in two timeintervals and after posting these two timeintervals I get the amount of sold tickets between these two dates.
i get back multiple data depending on how far back I go.
My problem:
If I go as far back as to the first insert of the database.
I will get a high value of for example 200 tickets and after that I calculate the difference between each row in the database which gives me a chart like this:
As you see in the image I would like to reduce the space between the y-axis points in order to see the smaller values better.
In the example above I have a bar that is 160 and other bars that are for example 1 or 2 and I can hardly see them on the chart
Code for this:
buildCharts: function (target, chartData, chartEnum) {
$(target).highcharts({
chart: {
type: 'column',
height: 300,
},
title: {
text: chartEnum.name
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: chartEnum.text
}
},
series: [{
name: 'SystemInfo',
showInLegend: false,
colorByPoint: false,
data: chartData,
turboThreshold: chartData.length + 500
}],
});
}
How can I reduce space between y-axis points?
Using the "tickInterval" attribute is the easiest way to go about this (see http://api.highcharts.com/highcharts#xAxis.tickInterval).
If you wanted to set this based upon the total number of tickets you're viewing (assuming from your question that you can choose the point in time you want to start), what you could do is set that tickInterval based on the length of your series data (for example, if the data more than 100 items, set a tickInterval of 4; otherwise, set a tickInterval of 2 or 1). Do this by creating the chart's options, and then changing the value in the options after you grab your data, but before drawing/redrawing the chart.
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.
I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:
Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843