Change color of series onclick events across multiple highcharts - events

I'm looking to change the column color and the line color for the same series across multiple charts based on the click of either the legend or the actual column/line.
On the individual charts I have color changing based on clicking/hovering and I can show hide based on the clicking of the first legend. I just can't seem to get the color to work. I'd like to convert the show hide functionality into color change.
Fiddle: http://jsfiddle.net/jlm578/asdgqzgk/4/
This is the chunk of code I'd like to convert or replace:
events: {
legendItemClick: function (event) {
var visibility = this.visible ? 'visible' : 'hidden';
var series = $('#veiOverallAllLine').highcharts().series[this.index];
if (this.visible) series.hide();
else series.show();
return true;
//return false;
}
}

I hope that I understood your question properly :)
Anyway, you can "convert" the event into color change by first preventing the default action to be executed (which is obviously hiding the chart).
This could be done easily using
event.preventDefault() within the event itself.
Than you can use a general function to handle the color change, which takes the series as parameter, find its 'sibling' and than changes the colors:
function updateColor(series){
if(series == undefined) return;
var color = series.color == '#ffffff' ? '#851E20' : '#ffffff';
var sibling = $('#veiOverallAllLine').highcharts().series[series.index];
series.update({color:color});
sibling.update({color:color});
}
(More generalization could be done here but its up to you..)
Than, the whole plotOptions should look like that more or less:
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
color: '#851E20'
}
},
events: {
click: function(){
updateColor(this);
},
legendItemClick: function (event) {
event.preventDefault();
updateColor(this);
return true;
}
}
}
},
Here you can see an example: http://jsfiddle.net/a366e89c/2/
NOTE! in the example only the upper chart changes the color of both charts, you just need to copy the lines into the second chart...

Related

slick carousel adjust height manually

I have a slick-carousel that a have some accordion tabs inside.
I need to be able to react to the bootstrap accordion collapse/expansion and adjust the height of the carousel.
It adjusts with the adaptive height correctly but only once done a full rotation.
How would I go about this.
so have established this so far. I are actually using velocityjs for the accordion.
if ($(this).hasClass('active')) {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', false).velocity('slideUp', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', false).removeClass('active');
} else {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', true).velocity('slideDown', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', true).addClass('active');
}
function resize_slider() {
var sliderAdaptiveHeight = function () {
var heights = [];
let items = $('.slick-active')
items.each(function () {
heights.push($(this).height());
});
$('.slick-list').height(Math.max.apply(null, heights));
}
sliderAdaptiveHeight();
$('.slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
sliderAdaptiveHeight();
});
}
the resize_slider function is being triggered however the height adjustments are back to front.
ie when expanding the slick slider height retracts and when collapsing the slick slider expands.
any thoughts

c3.js - hide tooltip for specific data sets

I have a c3.js chart which has 4 datasets. Is it possible to set the tooltop only to display for 1 set of data?
From the code below I only want the tooltip to display for data4.
var chart = c3.generate({
bindto: '#chart3',
data: {
//x: 'x1',
xFormat: '%d/%m/%Y %H:%M', // how the date is parsed
xs: {
'data1': 'x1',
'data2': 'x2',
'data3': 'x3',
'data4': 'x4'
},
columns: [
x1data,
y1data,
x2data,
y2data,
x3data,
y3data,
x4data,
y4data,
],
types: {
data1: 'area',
},
},
legend: {
show: false
}
});
There is the tooltip option for show:false but that disables them all.
Can it display for just 1 dataset?
The tooltip.position() function can be used to control the position of the tooltip, and we can set the tooltip position way off the canvas as a quick hack to hide it when we do not want to see it. However, I do not know how to return the default which is not documented - maybe someone else can elaborate on that.
tooltip: {
grouped: false,
position: (data, width, height, element) => {
if (data[0].id === 'data2'){ // <- change this value to suit your needs
return { top: 40, left: 0 };
}
return { top: -1000, left: 0 };
}
}
EDIT: After digging around for a solution I found that Billboard.js (a fork of C3.js on github) provides a tooltip.onshow() function that the API docs say is 'a callback that will be invoked before the tooltip is shown'. So it would appear that Billboard.js already has the a potential solution where you could intercept the data and hide the tooltip.

Cant get a grouped kendo ui column chart to hide when some items in group don't have a value

I've been trying to get a telerik kendo ui column chart to display grouped data but where the groups might not have entries for all possible values and I don't want to show space/empty columns in these empty cases.
Telerik dojo of problem
Is anyone aware of anyway to get this to work more like the screenshot below
Excel has grouped the data but doesn't display a column at all if the data is null/zero
I couldn't find a built-in way to do this, so I ended up just placing the bars manually by overriding the visual function. In my case, I only needed to move one bar and that bar will always be the same category, which made it a whole lot easier in that I only had to identify it by matching the category. I could then move it with a transform. You cannot move it by setting the coordinates because the visual has already been created.
It would be more complex to do this dynamically, but it's certainly possible. This may give someone a start in the right direction.
One downside of this method is that you must also place the labels manually, which I have also done below. You can override the visual function of the labels, as well, but no references to any other elements are passed with the event data. Note how the documentation says the sender field may be undefined; in my experience, this is always the case.
It also does not move the tooltip or the highlight. You could use the same method to move the highlight (override the visual function, though on the series instead of the seriesDefaults) and draw the tooltip manually while moving the highlight -- similar to how the method below draws the label while moving the column.
Telerik Dojo Example
$(document).ready(function () {
$("#chart").kendoChart({
legend: { visible: false },
tooltip: { visible: false },
categoryAxis: {
name: "categoryAxis",
categories: ["1", "2", "3"],
},
series: [
{
data: [1, 2, 3],
highlight: { visible: false },
},
{
data: [1.5, null, 3.5],
highlight: { visible: false },
}
],
seriesDefaults: {
type: "column",
labels: { visible: false },
visual: function (e) {
if (e.value === null) return;
var visual = e.createVisual();
var axisRect = e.sender.getAxis("categoryAxis").slot("2");
var group = new kendo.drawing.Group();
var label = new kendo.drawing.Text(e.value, [0, 0], {
font: "20px sans-serif",
fill: { color: "black" }
});
var lbox = label.clippedBBox();
label.position([
e.rect.origin.x + e.rect.size.width / 2 - lbox.size.width / 2,
e.rect.origin.y - label.bbox().size.height * 1.5
]);
group.append(visual, label);
if (e.category === "2") {
var x = (axisRect.origin.x + axisRect.size.width / 2) - e.rect.size.width / 2;
group.transform(kendo.geometry.transform().translate(x - e.rect.origin.x, 0));
}
return group;
},
}
});
});

How to get cursor coordinates in CKEditor

I want to know the coordinates of the mouse pointer when I r-click on CKEditor
I added a few items to the context menu of CKEditor.
i want when I select a certain item, the other a notice appeared also in place i r_click
$(document).ready(function () {
var ck = CKEDITOR.replace('txtNoidungBR', 'vi');
var $DK = $('#divAddDK');
/*Thêm điều kiện*/
ck.on('instanceReady', function (e) {
ck.addCommand("addDK", {
exec: function (ck) {
/*I want to set coordinates to $DK = coordinates of context menu when i r-click*/
$DK.css({ 'left': 600, 'top': 400 }).toggle(300);
}
});
ck.addMenuGroup('BRDT');
var addDK = {
label: 'Thêm điều kiện',
command: 'addDK',
group: 'BRDT'
};
ck.contextMenu.addListener(function (element, selection) {
return {
addDK: CKEDITOR.TRISTATE_OFF
};
});
ck.addMenuItems({
addDK: {
label: 'Thêm điều kiện',
command: 'addDK',
group: 'BRDT',
order: 1
}
});
});
});
help me. thaks
You'll need to track the mouse yourself, as ckeditor doesn't give you the mouse event.
See this answer for details on that:
How to get the mouse position without events (without moving the mouse)?

In kendo ui How to Collapsing Graph could expand table but expanding graph then bring both the graph and table to be visible too

collapsing Graph could expand table but expanding graph immediately shall bring both the graph and table to be visible too,Vice versa.
You need to implement a collapse and expand function handlers.
$("#panelbar").kendoPanelBar({
expandMode: "single",
expand: function (e) {
...
},
collapse: function (e) {
...
}
});
On these handlers you check which item is being collapsed (or expanded) and decide which ones to expand and collapse according to your algorithm.
For knowing which item is being collapse / expanded you should use inside the handler:
var itemId = $("span", e.item).attr("id");
The very last thing is remember that if you want more than one bars opened you should switch you expandMode to multiple.
EDIT: As first approach to what you need:
$("#panelbar").kendoPanelBar({
expandMode: "multiple",
expand : function (e) {
var itemId = $("span", e.item).attr("id");
if (itemId === "Span1") {
this.expand($("#Span2").closest("li"));
} else {
this.collapse($("Span1").closest("li"));
}
},
collapse : function (e) {
var itemId = $("span", e.item).attr("id");
if (itemId === "Span1") {
this.expand($("#Span2").closest("li"));
} else {
this.collapse($("Span1").closest("li"));
}
}
});

Resources