I have a line chart with a number of series elements on it.
The chart does allow me to click each series in the legend to hide it but I would like to add an extra item that when clicked hides all of the series lines from the chart.
Can someone explain how I would achieve this please?
Thanks
add a button or something you like. follow the example fiddle from highcharts own.
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-hide/
var chart = $('#container').highcharts(),
$button = $('#button');
$button.click(function() {
var series = chart.series[0];
if (series.visible) {
series.hide();
$button.html('Show series');
} else {
series.show();
$button.html('Hide series');
}
}
In case when you hide all of series, you can add extra serie by addSeries() function.
You could try this:
$('.selectDeselect input').click(function() {
if (chart.series[0].visible) {
for (var i = 0; i < chart.series.length; i++) {
chart.series[i].hide();
}
} else {
for (var i = 0; i < chart.series.length; i++) {
chart.series[i].show();
}
}
})
Related
I have an example like this, as you can see in the example cell's height are different and it is an obstacle to calculate for rendering some custom SVGs. Actually, I want to get height of each cell in this block of code (in my real project):
chart: {
events: {
load() {
var ticks = this.yAxis[0].treeGrid.axis.grid.columns[0].ticks;
for (var i = 0; i < Object.keys(ticks).length ; i++){
// I want to get the current tick height here!!
}
}
}
}
Please analyze and try to use this part of the code:
chart: {
events: {
load: function() {
var ticks = this.yAxis[0].ticks;
for (var i = 0; i < Object.keys(ticks).length - 1; i++) {
let prevTickHeight = ticks[i - 1].mark.d.split(' ')[2],
curTickHeight = ticks[i].mark.d.split(' ')[2] - prevTickHeight;
console.log(curTickHeight)
}
}
}
},
Demo: https://jsfiddle.net/BlackLabel/5zkwh2ta/
I have created a series of synchronised charts, the code to link the crosshair and tooltip is rather complicated:
function syncronizeCrossHairs(chart) {
['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
var container = $(chart.container),
offset = container.offset(),
x;
container[0].addEventListener(eventType,
(function(evt) {
x = evt.clientX - chart.plotLeft - offset.left;
//remove old plot line and draw new plot line (crosshair) for this chart
var xAxis1 = chart1.xAxis[0],
points = [],
points1 = [],
points2 = [],
points3 = [],
e = chart1.pointer.normalize(evt); // Find coordinates within the chart
chart1.series.forEach(s => {
var point = s.searchPoint(e, true)
if (point) {
point.setState();
points.push(point)
}
})
if (points) {
var number = 0;
Highcharts.each(points, function(p, i) {
if (!p.series.visible) {
points.splice(i - number, 1);
number++;
}
})
if (points.length) {
chart1.tooltip.refresh(points); // Show the tooltip
}
}
xAxis1.drawCrosshair(x, points[0])
/*----- second chart ------*/
var xAxis2 = chart2.xAxis[0];
chart2.series.forEach(s => {
var point = s.searchPoint(e, true)
if (point) {
point.setState();
points1.push(point)
}
})
if (points1[0]) {
var number = 0;
Highcharts.each(points1, function(p, i) {
if (!p.series.visible) {
points1.splice(i - number, 1);
number++;
}
})
if (points1.length) {
chart2.tooltip.refresh(points1); // Show the tooltip
}
}
xAxis2.drawCrosshair(x, points1[0])
/*----- third chart ------*/
var xAxis3 = chart3.xAxis[0];
chart3.series.forEach(s => {
var point = s.searchPoint(e, true)
if (point) {
point.setState();
points2.push(point)
}
console.log(points2)
})
if (points2[0]) {
var number = 0;
Highcharts.each(points1, function(p, i) {
if (!p.series.visible) {
points2.splice(i - number, 1);
number++;
}
})
if (points2.length) {
chart3.tooltip.refresh(points2); // Show the tooltip
}
}
xAxis3.drawCrosshair(x, points2[0])
/* ----- fourth chart ------ */
var xAxis4 = chart4.xAxis[0];
chart4.series.forEach(s => {
var point = s.searchPoint(e, true)
if (point) {
point.setState();
points3.push(point)
}
})
if (points3[0]) {
var number = 0;
Highcharts.each(points3, function(p, i) {
if (!p.series.visible) {
points3.splice(i - number, 1);
number++;
}
})
if (points3.length) {
chart4.tooltip.refresh(points3); // Show the tooltip
}
}
xAxis4.drawCrosshair(x, points3[0])
}))
})
}
How ever I have found a better example here: http://jsfiddle.net/mushigh/a3kjrz6u/
$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.onMouseOver(); // Show the hover marker
chart.tooltip.refresh(point); // Show the tooltip
chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
How do I adapt my code here: https://jsfiddle.net/ashenshugar/716jx4n9/
To use the simplified code in my example
I don't think that the demo which you have found is a good approach to your requirements.
The demo needs to the specific data structure, like: https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
The demo is an example to show tooltip for only one series per chart, meanwhile, you have got a few and a shared tooltip, so finally, you will need to do the same calculations to get the array of points for shared tooltip.
Except that, I think that a better approach is to clean up your code.
Notice that the functionalities to calculate points for each chart are similar and can be paste into the loop:
function syncronizeCrossHairs(chart) {
['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
var container = $(chart.container),
offset = container.offset(),
x;
container[0].addEventListener(eventType,
(function(evt) {
x = evt.clientX - chart.plotLeft - offset.left;
Highcharts.charts.forEach(ch => {
var e = ch.pointer.normalize(evt), // Find coordinates within the chart
points = [];
ch.series.forEach(s => {
var point = s.searchPoint(e, true);
if (point) {
point.setState();
points.push(point)
}
})
if (points) {
var number = 0;
Highcharts.each(points, function(p, i) {
if (!p.series.visible) {
points.splice(i - number, 1);
number++;
}
})
if (points.length) {
ch.tooltip.refresh(points); // Show the tooltip
}
}
ch.xAxis[0].drawCrosshair(x, points[0])
})
}))
})
}
And notice that also your afterSetextreme callback can be change to trigger this function:
function setExtremes(chart, min, max) {
Highcharts.charts.forEach(ch => {
if (ch !== chart) {
ch.xAxis[0].setExtremes(min, max)
}
})
}
Also, you can define options which are common for each chart, like it is done here: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-solid/
Finally demo: https://jsfiddle.net/BlackLabel/hv7azdgm/
This piece of code i am trying to add background color to jqgrid but no luck yet.
Please someone help me to improve my code.Thanku in advance.
function (data)
{
var rowData = $("#grdTimeReport").getDataIDs();
for (var i = 0; i < rowData.length; i++)
{
if (data[i].rowData.ProdNonPro== "NP")
{
$("#grdTimeReport").jqGrid('setRowData', rowData[i], false, 'myclass');
}
}
}
How to reset its original chart value after legendItem toggle event?
RESET
legendItemClick:
function(event)
{
var seriesIndex = this.index;
var series = this.chart.series;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].hide();
}
else
{
series[i].show();
}
}
return false;
}
Note: Currently this code works like RADIO button event[toggle]; How to make this work like a CHECKBOX event with a condition where user cannot uncheck both! But can check both the events!!! :-D
I was able to find the solution to the above question from my peer...there might be better way using some API's... here is the link to SOLUTION
legendItemClick: function(event)
{
var seriesIndex = this.index;
var series = this.chart.series;
var visibleCount= 0;
var visibleIndex= 0;
for (var i = 0; i < series.length; i++)
{
if (series[i].visible)
{
visibleIndex =i;
visibleCount++;
}
}
if (visibleCount===1 && visibleIndex === seriesIndex)
{
event.preventDefault();
}
}
I have sample code for question here: http://jsfiddle.net/MuydK/
The problem relates to legend title in the key under chart are changing after I have drilled in and out.
They should stay as
"actual" and
"target"
And are changing to "series 1" and "series 2".
$(function () {
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories1 = ['1011', '1112', '1213', '1415'],
name1 = 'Actual',
I think I may be missing something in drilldown configuration or setChart code?
I got the same problem with a couple if charts based on code posted above.
Many Thanks
Hope this is what you need,
JSFiddle - Legend Name Problem
code:
function setChart(name, categories, data, color) {
console.log(name, categories, data, color);
chart.xAxis[0].setCategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i],
color: color[i]
});
}
}
Edit2: The problem is in your else statement in the function bellow.
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color);
} else { // restore
setChart(name, categories1, [data1, data2], 'white');
}
}
Instead get rid of name1 = 'Actual' and only have data1 and data2 and add name and color to them then you could do like this instead
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
chart.xAxis[0].setCategories(drilldown.categories);
setChart([drilldown.data]);
} else { // restore
chart.xAxis[0].setCategories(categories);
setChart([data1, data2]);
}
}
// add code for removing series
chart.addSeries({
data
});
I hope you understand, but it will be easier if you build data1/2as a highcharts object, and just add the drilldown part to it. So you can change;
series: [{
name: name1,
data: data1,
color: colors[0]},
{
name: name2,
data: data2,
color: colors[1]}],
to:
series: [data1, data2],
Edit: When you are doing operations bellow you should not set redraw to true, it will be much faster. The same goes for adding the series. You do not need to call chart.redraw() until you have removed and added the charts. And removing stuff is easier backwards. So change:
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
To
for (var i = chart.series.length; i >= 0; i--){
chart.series[i].remove(false);
}
// add series with redraw == false
chart.redraw();