In a Highcharts sankey diagram, I would like to label the nodes with a tooltip. The left (sender nodes) should be labeled differently than the right ones (receiver nodes).
Example:
Left node: "CVP (Origin Party Votes): 6000"
Right node: "CVP (Receiver Party Votes): 5000"
I tried it with a nodeFormatter formatting function, but failed.
The jsfiddle is here: https://jsfiddle.net/martindfurrer/ah175o8e/
tooltip: {
nodeFormatter:
function() {
if (this.point.fromNode.name != null) {
return (point.name +'(Origin Party Votes): '+point.sum);
}
else if (this.point.toNode.name != null) {
return (point.name +'(Receiver Party Votes): '+point.sum);
};
}
}
You can use column to identify left and right nodes (fiddle):
tooltip: {
nodeFormatter: function() {
if (this.column === 0) {
return (this.name + ' (Origin Party Votes): ' + this.sum);
} else if (this.column === 1) {
return (this.name + ' (Receiver Party Votes): ' + this.sum);
}
}
}
If you put console.log(this) as the first line in the nodeFormatter function, you can explore the available properties on the node.
Related
I'm using Highcharts to create organization charts that where each node can be collapsed when clicked as in provided example : http://jsfiddle.net/vegaelce/83uktasc/
It works well but it would be better if it is possible to "redraw" the chart once a node is fold/unfold (to optimise the space left and realign the nodes).
I tried without success :
chart.redraw();
Have you any idea how to make this ?
Thanks in advance
You need to set new data to implement the required feature. Nodes are hidden on svg level and they are not ignored in the redraw.
function getData(to) {
const data = [
...
];
if (to) {
const filters = [to];
return data.filter(el => {
const matched = filters.find(filter => filter === el[0]);
if (matched) {
filters.push(el[1]);
}
return !matched;
});
}
return data;
}
Highcharts.chart('container', {
...,
plotOptions: {
series: {
point: {
events: {
click: function() {
if (this.linksFrom.length) {
this.series.setData(getData(this.title || this.name));
} else {
this.series.setData(getData());
}
}
}
}
}
}
});
Live demo: http://jsfiddle.net/BlackLabel/5njf0cwq/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData
In my add-in we navigate the document by calling select on either a paragraph or a search result from inside a paragraph. In the newest version of Word for iOS : 2.0.2 (170415) the document is scrolling to the correct part of the document but the text is no longer highlighting. This was working in the previous released version of word.
Oddly the text does highlight as expected if i open the search bar, and then navigate around my document.
public SelectTextInstance(text: string, paragraphIndex: number, textInstance: number) {
Word.run(function (context) {
// Create a proxy object for the paragraphs collection.
var paragraphs = context.document.body.paragraphs;
context.load(paragraphs, 'text,font');
return context.sync().then(function () {
if (paragraphIndex == -1) {//currently would occur for items that are inside of tables.
return;
}
var paragraph = paragraphs.items[paragraphIndex];
return context.sync().then(function () {
var ranges = null;
//256 is the maximum length for a search item. Longer than this and we just have to select the paragraph.
if (text != undefined && text != null && text.length <= 256) {
ranges = paragraph.search(text, { matchCase: true, ignoreSpace: true});
context.load(ranges, 'text');
}
return context.sync().then(function () {
if (ranges == null || ranges.items.length == 0) {
paragraph.select();
}
else {
//select the paragraph rather than overflow - something bad happened somewhere, so we'll fall back to highlighting the paragraph.
if (ranges.items.length <= textInstance) {
paragraph.select();
} else {
ranges.items[textInstance].select();
}
}
return context.sync().then(function () {
});
});
});
});
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
Thanks so much for reporting this. Effectively this is a regression. The range is selected but not colored. We will push the fix for the next update.
I want to prefix a $ to the default y-axis label. My bar chart is using values in the millions so the chart is returning value-MM (80MM, 30MM). What I would like to do is format the y-axis like $-value-MM ($80MMm $30MM). I have tried the code below and can't get it to work?
yAxis: [{ // Primary yAxis
labels: {
formatter: function () {
return '$' + this.value;
}
},
title: {
text: 'Revenue',
If I understand the question correctly, your data already has 'MM' suffix and you want to add the prefix '$'.
Try,
yAxis: {
labels: {
format: '${value}'
}
}
One rather elaborate way to achieve this is to re-use the code Highcharts uses in their internal defaultLabelFormatter for axis that are numeric, and use it in the axis formatter.
An example of this, with your added prefix (JSFiddle):
yAxis: {
labels: {
formatter: function() {
var numericSymbols = Highcharts.getOptions().lang.numericSymbols;
var i = numericSymbols && numericSymbols.length;
var numericSymbolDetector = this.axis.isLog ? this.value : this.axis.tickInterval;
var UNDEFINED, ret, multi;
while (i-- && ret === UNDEFINED) {
multi = Math.pow(1000, i + 1);
if (numericSymbolDetector >= multi && (this.value * 10) % multi === 0 && numericSymbols[i] !== null) {
ret = Highcharts.numberFormat(this.value / multi, -1) + numericSymbols[i];
}
}
if (ret === UNDEFINED) {
if (Math.abs(this.value) >= 10000) {
ret = Highcharts.numberFormat(this.value, -1);
} else {
ret = Highcharts.numberFormat(this.value, -1, UNDEFINED, '');
}
}
return "$"+ret; // Adding the prefix
}
},
}
A experimental short form of this would be to call the defaultLabelFormatter with the essential parts of the context it requires. An example of this (JSFiddle):
yAxis: {
labels: {
formatter: function() {
return "$" + this.axis.defaultLabelFormatter.call({
axis: this.axis,
value: this.value
});
}
},
}
As the context is incomplete it wouldn't work as expected if your axis was datetime or categories or perhaps logarithmical, but should work for numeric axis. For the full picture I suggest looking at the full defaultLabelFormatter implementation.
So, I have stacked bar chart and I want to hide data labels when they don't fit in the area. for Example in Category 8, not to have data label "4" at all.
This is a similar question bolow:
Highcharts stacked bar chart hide data labels not to overlap
But My problem is I also need to hide lables on exporting
I have done this code after generating graph to hide labales
$.each(this.chartObject.series,function(i,data_series){
if (data_series.visible){
$.each(data_series.data,function(j,data){
if(data.yBottom != null && data.plotY != null){
if(data.yBottom - data.plotY < 15){
if (typeof data.dataLabel != 'undefined'){
data.dataLabel.hide();
}
}
}
});
}
});
You need to move loop from callback, into chart / events / load.
chart: {
events: {
load: function () {
var chart = this;
$.each(chart.series, function (i, serie) {
$.each(serie.data, function (j, data) {
if (data.yBottom - data.plotY < 15) data.dataLabel.hide();
});
});
}
},
renderTo: 'chart',
defaultSeriesType: 'bar'
},
Example: http://jsfiddle.net/HA5xE/20
I am new to highcharts and I am working on a cricket app in which I have to display Run rate per over and number of wickets in an over. If there is a wicket(s) in the specific over I want to show a ball(s) to the point and on hover or click to that point it show the information about player and bowler etc.
What I want is you can view from this Link Crichq Graphs
I want the same think like in crichq graphs, but don't know how to do.
Please help me out of this issue.
You can use the point marker settings to indicate where the wickets fell. e.g. make it a different colour and size. http://api.highcharts.com/highcharts#series.data.marker
I would process the data as follows:
var ausData = [ { x:1, y:1 },
{ x:2, y:24, out:{num:2,names:['john','doe']} },
{ x:3, y:5 },
{ x:4, y:8 },
{ x:5, y:22 },
{ x:6, y:11 } ];
for (var p in ausData) {
var point = ausData[p];
if (point.out !== undefined) {
point.marker = {fillColor:'red',radius:4*point.out.num};
} else {
point.marker = {radius:5};
}
}
This start with the basic info, and then adds custom point markers depending on how the wickets fill.
The only other thing to do is customise the tooltip to give the names e.g.:
tooltip: {
formatter: function () {
var text = 'Over: ' + this.x +
' Runs: ' + this.y;
if (this.point.out !== undefined) {
text = text + '<br>Out: ' + this.point.out.num;
for (var n in this.point.out.names) {
text = text + ' ' + this.point.out.names[n];
}
}
return text;
}
},
http://jsfiddle.net/d6fgwg14/