I found this example that half does what I need. I would need it to show two series, not just one.
events: {
show: function () {
var chart = this.chart,
series = chart.series,
i = series.length,
otherSeries;
while (i--) {
otherSeries = series[i];
if (otherSeries != this && otherSeries.visible) {
otherSeries.hide();
}
}
},
legendItemClick: function() {
if(this.visible){
return false;
}
}
}
http://jsfiddle.net/tK38J/65/
For example: I click series 1 and I see series 1 and 2. I click series 3 and I see series 3 and 4.
Series 2 and 4 will be hidden in the legend.
Is it possible?
You can link series with the same visibility and hide the other ones in legendItemClick event:
plotOptions: {
series: {
events: {
legendItemClick: function() {
if (this.visible) {
return false;
}
this.chart.series.forEach(function(s) {
if (s !== this && s !== this.linkedSeries[0]) {
s.hide();
}
}, this);
}
}
}
},
series: [{
data: [...],
id: 'first'
}, {
data: [...],
linkedTo: 'first'
}, {
data: [...],
visible: false,
id: 'third'
}, {
data: [...],
linkedTo: 'third'
}]
Live demo: http://jsfiddle.net/BlackLabel/s6x37azb/
API Reference: https://api.highcharts.com/highcharts/series.line.linkedTo
Related
Highcharts is working when not calling Gantt chart in other views. I've played around trying to get this Gantt chart to work. Looks like there is a conflict with import map only calling highcharts and highcharts.ganttChart is not found. I've tried added the src url through a script tag directly in the html view but still getting this error.
Error msg <
Uncaught (in promise) TypeError: Highcharts.ganttChart is not a function
>
Javascript controller
```
import {Controller} from "#hotwired/stimulus"
export default class extends Controller {
connect() {
let today = new Date(),
day = 1000 * 60 * 60 * 24;
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
let dateFormat = Highcharts.dateFormat;
let series
let chart; // global
async function requestData() {
const response = await fetch('http://localhost:3000/api/v1/charts/index');
if (response.ok) {
const data = await response.json();
series = data.map(function (job, i) {
let data = job.deals.map(function (phase) {
return {
id: 'deal-' + i,
project: phase.project,
client: phase.client,
phase: phase.phase,
start: new Date(phase.from).getTime(),
end: new Date(phase.to).getTime(),
y: i
};
});
return {
name: job.name,
data: data,
current: job.deals[job.current]
};
});
setTimeout(requestData, 1000);
console.log(series);
chart = Highcharts.ganttChart('container', {
series: series,
title: {
text: 'Crew Schedule'
},
tooltip: {
pointFormat: '<span>Client {point.client}</span><br/>' +
'<span>Project: {point.project}</span><br/>' +
'<span>Phase: {point.phase}</span><br/>' +
'<span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>'
},
lang: {
accessibility: {
axis: {
xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.',
yAxisDescriptionSingular: 'The chart has a tabular Y axis showing a data table row for each point.'
}
}
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled: true,
selected: 0
},
accessibility: {
keyboardNavigation: {
seriesNavigation: {
mode: 'serialize'
}
},
point: {
valueDescriptionFormat: 'Assigned to {point.project} from {point.x:%A, %B %e} to {point.x2:%A, %B %e}.'
},
series: {
descriptionFormatter: function (series) {
return series.name + ', job ' + (series.index + 1) + ' of ' + series.chart.series.length + '.';
}
}
},
xAxis: {
currentDateIndicator: true
},
navigator: {
enabled: true,
liveRedraw: true,
series: {
type: 'gantt',
pointPlacement: 0.5,
pointPadding: 0.25,
accessibility: {
enabled: false
}
},
yAxis: {
min: 0,
max: 3,
reversed: true,
categories: []
}
},
yAxis: {
type: 'category',
grid: {
columns: [{
title: {
text: 'Crew'
},
categories: series.map(function (s) {
return s.name;
})
}]
}
}
})
}
return chart;
}
window.addEventListener('load', (event) => {
requestData();
});
}
}
I am using High Charts and using a Line chart for visualization. I have some bad data in the series data which is replaced with nulls and my line on the trend is not connected (bad data is not plotted on the trend, hence disconnected line) which is fine.
My issue is that I have some good data in between some bad data like (bad,bad,good,bad,bad,good,bad) this good data is shown as tool tips on my trend but no data point is shown on the trend. Is there any configuration option with in high charts so that I could plot individual data points along with disconnected line?
As you may see in the trend image, that the line series is broken but there are still some valid data points among bad data points which are not visible on the trend.
Here is how I initialize my highchart
initializeChart() {
Highcharts.setOptions({global: { useUTC : false }});
let yAxesLoc = this.getYAxes(this.props.signals);
// Update the yAxes to use the unit abbrevation instead of the full name
let dfdArr = new Array();
yAxesLoc.forEach(function(yAxis) {
if(!yAxis.unitName) {
return;
}
dfdArr.push(AfModel.GetUnitByName(yAxis.unitName, function(unit) {
if (unit) {
yAxis.unit = unit.Abbreviation;
yAxis.title = {text: unit.Abbreviation};
}
}));
});
let that = this;
// Only all the units are loaded, then we initialize Highcharts
return $.when.apply(null, dfdArr)
.always(function() {
that.yAxes = yAxesLoc; // Set all the axis
that.colorGenerator = new ColorGenerator(); // Initialize a new color generator for this trend
that.chart = Highcharts.chart(that.state.chartDivId, {
credits: {
enabled: false
},
title: null,
chart: {
zoomType:'xy',
events: {
redraw: function(){
// Remove all frozen tooltips
if (that.cloneToolTip) {
that.chart.container.firstChild.removeChild(that.cloneToolTip);
that.cloneToolTip = null;
}
if (that.cloneToolTip2) {
that.cloneToolTip2.remove();
that.cloneToolTip2 = null;
}
}
}
},
xAxis: {
type:'datetime',
min: that.props.startDateTime.getTime(),
max: that.props.endDateTime.getTime(),
labels: {
rotation: 315,
formatter: function() {
return new Date(this.value).toString('dd-MMM-yy HH:mm')
}
}
},
tooltip: {
shared: true,
crosshairs: true,
valueDecimals: 2,
formatter: function(tooltip) {
return HcUtils.interpolatedTooltipFormatter.call(this, tooltip, function(yVal, series) {
return NumberUtils.isNumber(yVal) ?
(series.yAxis.userOptions.unit) ?
NumberUtils.round(yVal, 4) + " " + series.yAxis.userOptions.unit
: NumberUtils.round(yVal, 4)
: yVal;
});
}
},
yAxis: that.yAxes,
series: {
animation: false,
marker: {enabled: false}
},
plotOptions: {
line: {
animation: false,
marker: {
enabled:false
}
},
series: {
connectNulls: false,
connectorAllowed: false,
cursor: 'pointer',
point: {
events: {
// This event will freeze the tooltip when the user clicks
// Inspired by https://stackoverflow.com/questions/11476400/highcharts-keep-tooltip-showing-on-click
click: function() {
if (that.cloneToolTip) {
that.chart.container.firstChild.removeChild(that.cloneToolTip);
}
if (that.cloneToolTip2) {
that.cloneToolTip2.remove();
}
that.cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
that.chart.container.firstChild.appendChild(that.cloneToolTip);
that.cloneToolTip2 = $('.highcharts-tooltip').clone();
$(that.chart.container).append(that.cloneToolTip2);
}
}
}
}
}
});
})
}
Kindly suggest.
Thanks.
Highcharts draws a line only between two subsequent no-null points. Single points can be visualized as markers (which you disabled in your code).
Here's a live demo that shows this issue: http://jsfiddle.net/BlackLabel/khp0e8qr/
series: [{
data: [1, 2, null, 4, null, 1, 7],
marker: {
//enabled: false // uncomment to hide markers
}
}]
API reference: https://api.highcharts.com/highcharts/series.line.marker
It seems to work fine in the latest version of Highcharts. The data points are visible.
Please have a look
Visible points: https://codepen.io/samuellawrentz/pen/XqLZop?editors=0010
my problem is that the primary and secondary yAxis zero is not on the same level. The screenshot can describe my problem better. Is there any possibility to fix this?
Here is the JSFiddle
Highcharts.chart('container', {
title: {
text: 'Stückzahl'
},
xAxis: {
categories: ['5007.205.1.1.1', '5007.225.1.1.1', '5007.285.1.1.1'],
labels:{
enabled: false
}
},
credits: {
enabled: false
},
legend:{
enabled: false
},
yAxis: [{
title: {
text: 'Stückzahl',
},
opposite: false
},{
title: {
text: 'FOR[%]',
},
opposite: true,
max:100,
min:0
}],
series: [
{
type: 'column',
name: 'Sollwert',
pointWidth:30,
grouping: false,
color: 'rgba(0,0,0,0.1)',
data: [2000, 1500, 1600],
yAxis: 0
},{
dataLabels:{
enabled:true
},
type: 'column',
grouping: false,
pointWidth:20,
name: 'John',
data: [1941, 975, 1936],
yAxis: 0
},{
dataLabels:{
enabled:true
},
color:'#ef703e',
grouping: false,
pointWidth:20,
type: 'column',
data: [-27, -15, -350],
yAxis: 0
},{
color:'black',
data: [80,60,99],
yAxis: 1,
type: 'line'
}]
});
To post this question, I need to describe my problem better. So ignore these last lines :/
There is an experimental wrap on Highcharts User Voice - multiple axis alignment control. It was written some time ago but it still works.
The wrap:
/**
* Experimental Highcharts plugin to implement chart.alignThreshold option. This primary axis
* will be computed first, then all following axes will be aligned to the threshold.
* Author: Torstein Hønsi
* Last revision: 2016-11-02
*/
(function (H) {
var Axis = H.Axis,
inArray = H.inArray,
wrap = H.wrap;
wrap(Axis.prototype, 'adjustTickAmount', function (proceed) {
var chart = this.chart,
primaryAxis = chart[this.coll][0],
primaryThreshold,
primaryIndex,
index,
newTickPos,
threshold;
// Find the index and return boolean result
function isAligned(axis) {
index = inArray(threshold, axis.tickPositions); // used in while-loop
return axis.tickPositions.length === axis.tickAmount && index === primaryIndex;
}
if (chart.options.chart.alignThresholds && this !== primaryAxis) {
primaryThreshold = (primaryAxis.series[0] && primaryAxis.series[0].options.threshold) || 0;
threshold = (this.series[0] && this.series[0].options.threshold) || 0;
primaryIndex = primaryAxis.tickPositions && inArray(primaryThreshold, primaryAxis.tickPositions);
if (this.tickPositions && this.tickPositions.length &&
primaryIndex > 0 &&
primaryIndex < primaryAxis.tickPositions.length - 1 &&
this.tickAmount) {
// Add tick positions to the top or bottom in order to align the threshold
// to the primary axis threshold
while (!isAligned(this)) {
if (index < primaryIndex) {
newTickPos = this.tickPositions[0] - this.tickInterval;
this.tickPositions.unshift(newTickPos);
this.min = newTickPos;
} else {
newTickPos = this.tickPositions[this.tickPositions.length - 1] + this.tickInterval;
this.tickPositions.push(newTickPos);
this.max = newTickPos;
}
proceed.call(this);
}
}
} else {
proceed.call(this);
}
});
}(Highcharts));
All you need to do is set alignThresholds in chart options.
Highcharts.chart('container', {
chart: {
alignThresholds: true
},
live example: http://jsfiddle.net/f3urehs0/
I have a simple json document :
[ {
"x" : "a",
"y" : 2
}, {
"x" : "b",
"y" : 8
}, {
"x" : "c",
"y" : 4
}, {
"x" : "d",
"y" : 15
} ]
I want to visualize it using Highcharts having 4 series. I could success, however, the data appeared only as one series (see the next Figure).
Here is part of the code:
var options = {
.
.
.
series: [{ }]
};
.
.
.
var data = JSON.parse(json);
var seriesData = [];
for (var i = 0; i < data.length; i++) {
seriesData.push([data[i].x, data[i].y]);
options.xAxis.categories.push( data[i].x );
}
options.series[0].data = seriesData;
var chart = new Highcharts.Chart(options);
also updating the series
chart.series[0].update({
type: type,
});
works fine.
using
options.series.push({name: data[i].x, data: [data[i].x, data[i].y]});
creates 4 series but not appropriately visualized and also updating the series
chart.series[0].update({
type: type,
});
doesn't work, therefore, I want to focus in the first mentioned method.
any hints?
EDit: code which partially works for me:
var options = {
chart: {
renderTo: 'container',
type: 'column' //default
},
title: {
text: ''
},
yAxis: {
title: {
enabled: true,
text: 'Count',
style: {
fontWeight: 'normal'
}
}
},
xAxis: {
title: {
enabled: true,
text: '',
style: {
fontWeight: 'normal'
}
},
categories: [],
crosshair: true
} ,
plotOptions: {
pie: {
innerSize: 125,
depth: 80
},
column: {
pointPadding: 0.2,
borderWidth: 0,
grouping: false
}
},
series: [{ }]
};
// Set type
$.each(['column', 'pie'], function (i, type) {
$('#' + type).click(function () {
chart.series[0].update({
type: type
});
});
var data = get the data fom json file**
var seriesData = [];
for (var i = 0; i < data.length; i++) {
seriesData.push([data[i].x, data[i].y]);
options.xAxis.categories.push( data[i].x );
}
options.series[0].data = seriesData;
var chart = new Highcharts.Chart(options);
});
});
You have to decide whether you want to have 4 different series and update all 4 series at once or you want to have one series an then build e.g. legend on your own.
If you want to have 4 series, set grouping to false, set xAxis categories and each point should be mapped to one series with one point - the point.x should have the index of the series.
const series = data.map((point, x) => ({ name: point.x, data: [{ x, y: point.y }]}))
const chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
grouping: false
}
},
xAxis: {
categories: data.map(point => point.x)
},
series: series
});
Then you can update your all 4 series:
chart.series.forEach(series => series.update({
type: series.type === 'column' ? 'scatter' : 'column'
}, false))
chart.redraw()
example: http://jsfiddle.net/pdjqrj5y/
I am trying to build a chart from JS that has multiple "y:" data points in multiple series. I have got the chart working fine using a static configuration, but am struggling to get it to work when adding the points via the API.
I am trying to acheive:
'series':[
{
'name':'Series 1',
'color':'#FF8500',
'data':[
{
'y':1.0002193448599428
},
{
'y':0.4999027241865406
},
{
'y':4.499986649534549
},
{
'y':0.4998817439627601
}
]
},
{
'name':'Series 2',
'color':'#66B3FF',
'data':[
{
'y':12.99999999901047
},
{
'y':13.00000000082946
},
{
'y':18.99999999841384
},
{
'y':5.000000001018634
}
]
},
My code so far looks like this:
var options = {
'chart':{
'renderTo':'MyChart',
'zoomType':'xy',
'defaultSeriesType':'bar',
'width':880
},
<snip>
...
</snip>
'yAxis':{
'title':{
'text':'Seconds'
},
},
'xAxis':{
'title':{
'text':'Objects'
},
'categories': [],
'opposite':true
},
'series':[
{
'name':'Series 1',
'color':'#FF8500',
'data':[]
},
'series':[
{
'name':'Series 2',
'color':'#66B3FF',
'data':[]
}
]
};
options.chart.renderTo = targetdiv;
//Categories add perfectly here:
$.each(harfile.log.entries, function(i, val) {
options.xAxis.categories.push(val.request.url);
console.log(val.request.url);
});
$.each(harfile.log.entries, function(i, val) {
//need to do some logic to catch "-1" for all these values...
options.series[0].data.push("y:" + val.timings.receive);
});
$.each(harfile.log.entries, function(i, val) {
//need to do some logic to catch "-1" for all these values...
options.series[1].data.push(y:" + val.timings.receive);
});
console.log(options.series[0].data);
This produces a "TypeError: Cannot call method 'push' of undefined"
Just use Highcharts API's series.addPoint().