suppose I have 4 slices having 20%, 30%, 30% and 20%. If I make 4th slice(20%) inactive, the other slices should adjust themselves and occupy 100 %. how to do this in highcharts? Thank you.
I don't think it's possible to alter this behavior. Instead you need to remove the point all together for the other slices to add up to 100. Here is an example that shows the difference between legend-toggle and point remove: jsfiddle
I think this should be the standard behavior :)
opts.plotOptions.pie.point.events.legendItemClick = function() {
if (this.visible) {
this['y_old'] = this.y;
this.update(0);
}
else {
this.update(this.y_old);
}
};
now when you click on a legend item the pie chart slice will disappear
If you want to show the percentage (100% without the now missing slice) you have to define your tooltip (or legend) as:
opts.tooltip.formatter = function() {
var s = '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + '%';
return s;
};
This feature is now available out of the box as plotOptions.pie.ignoreHiddenPoint
series: [{
ignoreHiddenPoint: true,
type: 'pie',
...
}]
Auto Redraw/Recalculate Pie on Legend | Highchart & Highstock # jsFiddle
Related
I've got an ECharts chart that has multiple line series and a scatter series that represents events. For the line series, we left the symbol at the default, but for the event scatter series we set the symbol to 'diamond'. These symbols show up on the chart & in the series legend as expected. However, the tooltip always shows a 10 pixel dot for the marker. The color however is picked up from the series (and even from the visualMap config!). My initial assumption had been that the symbol would also be picked up from the series. In our case we wanted to use a function for tooltip.formatter and even in that function we couldn't figure out how to access and swap in the series symbol for the marker. We ended up working around it by just custom styling our own html to plug in for the marker that matched the diamond symbol pretty well.
So the open questions are:
Is there a way to have the tooltip marker pick up the symbol from the series?
If not, is this a bug? I'm happy to put in an issue on the project but I don't want to do that until I understand a bit more.
Here's some code to illustrate what we had to do to get the diamond in there in case it helps the discussion or if others want to leverage this workaround:
formatTooltip(args){
let time = DateTime.fromISO(args[0].data[0], { zone: this.user.timeZone })
let tooltip = `<div><b>${time.toFormat(TOOLTIP_FORMAT)}</b></div>`
args.forEach(({ marker, seriesName, value }) => {
if (seriesName === 'Events'){
let myMarker = `<span style="display:inline-block;margin-right:4px;width:10px;height:10px;background:${value[4]};transform:rotate(45deg);"></span>`
tooltip += `<div>${myMarker} ${value[3] ? value[3]: ''}</div>`
} else {
value = value || [0, 0]
tooltip += `<div>${marker} ${seriesName}: ${value[1]}</div>`
}
})
return tooltip
},
For better understanding of this question, let me show a working example in TradingView webpage, on which the following chart shows the combination of Momentum (area chart) + ADX (line chart):
As you can see, there are 2 vertical values, at left side is the ADX which the scale goes usually from 0 to 60(+-), but the right side, it can grow much more.
On my attempt to achieve the same here, the momentum (area chart) has a huge range, and the adx (lineal chart) goes from 0 to 60, so when it tries to fit both values under the same scale, my blue line looks like it's almost zero, in comparison with the area chart values. (Mouse-over the blue line showing that is currently 43)
So I think you get the point, would it be possible to have 2 scales/vAxis for each series of values?
I checked documentation already but nothing here seems to refer to what I mention:
https://developers.google.com/chart/interactive/docs/gallery/combochart
And just in case you need the options provided to the chart, nothing advanced, just the basic examples:
options:{
seriesType: 'area',
series: {
0: { type: 'line', color: 'blue' }
}
};
use option --> targetAxisIndex -- in the series option...
zero is the default v-axis
targetAxisIndex: 0
to create a second v-axis, assign one of the series to index 1
series: {
1: {
targetAxisIndex: 1
}
}
Found the solution over this post in the documentation, it is conceptually known as DUAL-Y Charts
https://developers.google.com/chart/interactive/docs/gallery/columnchart#dual-y-charts
How can i hide text of small slices in pie chart without to remove the text from the legend in the bottom?
I tried to remove the text like this:
if ((yVal < 5F) {
name = "";
} else {
//Add to y values
}
But then the legent text is empty also. so the users can't really know who is this slice.
My solution is to separate the legend texts and the pie chart slices text.
I set the legend (bottom map for each color) text and colors in this way
- In loop for all the contacts:
List<Integer> colors = new ArrayList<>();
List<String> labels = new ArrayList<>();
labels.add(fullName);
colors.add(METRIC_COLORS[index]);
Legend l = chart.getLegend();
l.setCustom(colors, labels);
In addition I added the text of pie-slices:
PieDataSet dataSet = new PieDataSet(yVals1, "");
dataSet.setColors(METRIC_COLORS);
I have a situation like this:
for (PieEntry pieEntry : leastPieEntries){
if(pieEntry.getValue() < 10)
{
pieEntry.setLabel("");
}
}
Tried to loop through all PieEntries but getValue returns the float value instead of percentage value...how did you do it?
I am using google charts for plotting a graph
How can I show annotation of the point at right-hand-side of the point but it showing on the top of point
http://i.stack.imgur.com/UHhQH.png
I want it like as follow
http://i.stack.imgur.com/lUBcq.png
Please any one help me out
You can actually change the position of the annotations, by using css tranform.
You should first get a handle to the anntation text, if you want to change all the text, then you can use the text tag name in css
text {
transform: translate(10px, 30px);
}
I was able to adjust annotations to the right by doing 2 things:
1) Entered some white spaces (\u00A0 is white space) and a long dash (—) on the left side of the desired annotation.
2) Added stem length of -3.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Model');
dataTable.addColumn('number', 'T');
dataTable.addColumn({type:'string', role:'annotation'});
dataTable.addRows([
['ABC',30,'\u00A0\u00A0\u00A0\u00A0 — X'],
['DEF',20,'\u00A0\u00A0\u00A0\u00A0 — Y'],
['GHI',10,'\u00A0\u00A0\u00A0\u00A0 — Z'],
]);
var options = {
1: {annotations: {stem: {length: -3}}
};
I'm trying to create a bar chart with two series of data. I want one series to be drawn to the right, and one series to be drawn to the left.
If I put negative values in for Austria, then it will draw those values oriented towards the left. Is there any way that I can have the data series for Austria oriented towards the left, and the data series for Bulgaria pointed towards the right, without making values negative?
I was playing with one of the examples from Google's Vizualization API, and here's what I came up with (It's probably easiest to paste the code below into http://code.google.com/apis/ajax/playground/?type=visualization#bar_chart):
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var raw_data = [['Austria', -1336060, -1538156, -1576579, -1600652, -1968113, 1901067],
['Bulgaria', 400361, 366849, 440514, 434552, 393032, 517206],
//['Denmark', 1001582, 1119450, 993360, 1004163, 979198, 916965],
//['Greece', 997974, 941795, 930593, 897127, 1080887, 1056036]
];
var years = [2003, 2004, 2005, 2006, 2007, 2008];
data.addColumn('string', 'Year');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}
data.addRows(years.length);
for (var j = 0; j < years.length; ++j) {
data.setValue(j, 0, years[j].toString());
}
for (var i = 0; i < raw_data.length; ++i) {
for (var j = 1; j < raw_data[i].length; ++j) {
data.setValue(j-1, i+1, raw_data[i][j]);
}
}
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
isStacked: 'true',
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
Thanks a bunch, let me know if I can clarify anything.
Use the series option to define two separate horizontal axes for the chart. Set the direction option on the second horizontal axis to -1 to make the values extend from the right side of the chart.
series:{1:{targetAxisIndex:1}}, hAxes:{1:{direction:-1}}
You can use Column Chart instead of Bar Chart, they seems to resemble each other.
https://developers.google.com/chart/interactive/docs/gallery/columnchart