Piechart sliceLabel is not shown for smaller slices.
My piechart image looks like :
https://drive.google.com/file/d/0B1dlb5k9SpLPYXJRRmRXSkpTUXM/view?usp=sharing
ActualRequired Piechart should like: https://drive.google.com/file/d/0B1dlb5k9SpLPOFBzNUw2Tkdsblk/view?usp=sharing
Code Snippet :
var dataTest = google.visualization.arrayToDataTable([ ['Country','Population'], ['India', 10], ['Australia', 1], ['Sri Lanka', 5.3], ['New Zeland', 9], ['Others', cell[0][5]],
]);
google.visualization.PieChart(document.getElementById('popStat')).draw(dataTest,{sliceVisibilityThreshold:0,chartArea:{left:'15%',top:'15%',width:'100%',height:'100%'}, title: 'Population Stats',});
It is because the slice relative part, below which a slice will not show individually. All slices that have not passed this threshold will be combined to a single slice, whose size is the sum of all their sizes. Default is not to show individually any slice which is smaller than 1/2 degree. You can modify the sliceVisibilityThreshold to change this effect. You can just set the sliceVisibilityThreshold option to 0. This will force all the legends to show.
See the reference: https://developers.google.com/chart/interactive/docs/gallery/piechart
Related
I am trying to edit an HTML code of a map. And I want to change the labels of the scalebar by three orders of magnitude less, I mean, if the value is 100000 the scalebar should show 100, without changing the scale domain, just the labels.
Actual scalebar
And these are the values i want to appear in the scalebar:
[0.0, 189.0, 377.0, 566.0, 755.0, 943.0, 1132.0, 1320.0, 1509.0]
I know maybe it's with .tickFormart but i don't know which format i have to use. Here is the code:
color_map_0caac4580c6c4cdd8684ab303e6dc8e4.x = d3.scale.linear()
.domain([0.0, 1509134.0])
.range([0, 400]);
color_map_0caac4580c6c4cdd8684ab303e6dc8e4.legend = L.control({position: 'topright'});
color_map_0caac4580c6c4cdd8684ab303e6dc8e4.legend.onAdd = function (map) {var div = L.DomUtil.create('div', 'legend'); return div};
color_map_0caac4580c6c4cdd8684ab303e6dc8e4.legend.addTo(map_327a7d6fcd834e0aa3fc248c7a9557c9);
color_map_0caac4580c6c4cdd8684ab303e6dc8e4.xAxis = d3.svg.axis()
.scale(color_map_0caac4580c6c4cdd8684ab303e6dc8e4.x)
.orient("top")
.tickSize(1)
.tickValues([0.0, 188641.75, 377283.5, 565925.25, 754567.0, 943208.75, 1131850.5, 1320492.25, 1509134.0])
.tickFormat([0.0, 189.0, 377.0, 566.0, 755.0, 943.0, 1132.0, 1320.0, 1509.0]);
You can ignore this color_map_0caac4580c6c4cdd8684ab303e6dc8e4it's a Folium thing (Python)
You can pass your own custom function to tickFormat. The input to this function is the tick value and the output is what you want the label to be. In your case, you could do
.tickFormat(d => d / 1000)
I made a google Apps script to modify a chart and I would like to display the data label of the series number 0 but the line .setOption('series',{ 1:{color: '#2ecc71'}}) (where I change the color of the series 1) remove the data label of the series 0.
var Vmax =1.1*ss.getRangeByName("D285").getValue(); //get max and min here (before, it's equal to 0)
var Vmin =0.9*ss.getRangeByName("C285").getValue();
var sheet = SpreadsheetApp.getActiveSheet();
var chart = sheet.getCharts()[46];
chart = chart.modify()
.setChartType(Charts.ChartType.AREA)
.setOption('title',string)
.setOption('vAxes', {0: {textStyle: {fontSize: 10}, titleTextStyle: {fontSize : 8}, viewWindow: {min: Vmin, max:Vmax}}})
.setOption('series',{ 1:{color: '#2ecc71'}})
.setOption('titleTextStyle',{alignment:"center"})
.setOption('animation.startup',true)
.setOption('animation.duration', 5000)
.setOption('hAxis.slantedText',true)
.setPosition(290,6,0,0)
.build();
Logger.log(Vmax);
Logger.log(Vmin);
sheet.updateChart(chart);
This is what I have :
And this is what I want :
Your comments helped me solve this problem. I didn't know that the key word is annotations.
here is the code I used to update the dataLabel font and color
.setOption("series", {1 : {dataLabel: "value"}}) //this creates the data label
.setOption("series", {1: {annotations: {textStyle : {fontSize : 24, color : 'white'}}}}) //this updates the color and font size of the data label.
I run this through updateChart
I hope this helps
My data call can have lots of small elements (in percentage) that I would like to ignore, I only need the top 5 in my amCharts pie.
Can this be accomplished with amCharts or I should treat the data before?
please see my [jsfiddle][1]
[1]: http://jsfiddle.net/pbarros/xznxbnc7/3/
thanks
You can use the hideLabelsPercent property to set a threshold for the lowest allowed percentage you want a label for. If you want to do this dynamically, you can set this in the init event by finding the 5th largest percents value in the chart's chartData array and use it as your hideLabelsPercent threshold. I've updated your handleInit method to do this:
function handleInit(e) {
if (e.chart.chartData.length > 5) {
//sort the copy of the chartData array from largest to smallest
//if your data is pre-sorted, then you can skip this step
var sortedData = e.chart.chartData.slice().sort(function(lhs, rhs) {
return rhs.percents - lhs.percents;
});
//set the threshold equal to the 5th largest slice's percents value so that the rest are hidden
e.chart.hideLabelsPercent = sortedData[4].percents;
//redraw the chart
e.chart.validateNow();
}
}
Updated fiddle: http://jsfiddle.net/xznxbnc7/9/
Edit since I misread the question
If you only want to show the top five slices from your dataset, you can filter on your backend or use the init method to sort and modify your dataProvider to contain only the top five.
function handleInit(e) {
if (e.chart.chartData.length > 5) {
//sort the copy of the chartData array from largest to smallest
//if your data is pre-sorted, then you can skip this step
var sortedData = e.chart.dataProvider.slice().sort(function(lhs, rhs) {
return rhs[e.chart.valueField] - lhs[e.chart.valueField];
});
//only put in the top 5.
e.chart.dataProvider = sortedData.slice(0, 5);
// redraw the chart
e.chart.validateData();
}
}
Fiddle: http://jsfiddle.net/g3cchyjg/1
I would like to add to my plot a text or a legend box with comments.
At the moment my legend is plot at northeastoutside and i would like to add the new legend (or textbox) to the position southeastoutside.
Thanks!
Lacking more information about your case:
To the best of my knowledge one axes object can only have a single legend object. You can create a second legend with a second axes object. Each legend will only list data elements associated with each axes. Adapted from Matlab Newsgroup thread
a = [1:0.01:2*pi]; %create sample data
b = sin(a);
linehandle1 = line(a,b); %creates a line plot with handle object
axeshandle1 = gca; % gets the handle for the axes object just created
legendhandle1 = legend('y = sin(x)', 'location', 'northeastoutside'); %makes first legend
axeshandle2 = axes('Position',get(axeshandle1,'Position'),'xlim',get(axeshandle1,'xlim'),'ylim',get(axeshandle1,'ylim'),'Visible','off','Color','none'); %makes invisible axes with same position and scaling
linehandle2 = line(pi/2,1,'Color','r','Marker','o','Parent',axeshandle2); %puts data set on 2nd axes
linehandle3 = line(pi,0,'Color','b','Marker','x','Parent',axeshandle2);
legend_handle2 = legend('peak','zero','location','southeastoutside'); %creates legend to go with 2nd axes
If you just want text in that 2nd box, not necessarily legend info or data labels, you can play around with annotation as described above. This has the advantage of being simpler to call, but maybe harder to get the exact position/result you want. There are a large number of property options that can be adjusted to get the desired appearance. A few are shown in the example. It may be there are easier ways to set the size/position based on the legendhandle.
a = [1:0.01:2*pi]; %create sample data
b = sin(a);
plot(a,b);
legendhandle = legend('y = sin(x)','location','northeastoutside');
annotation('textbox',[0.875 0.1 0.1 0.1],'string','my text','edgecolor','k','linewidth',1,'fitboxtotext','off');
I've a Higstock lineal graph. Sometimes I need to show just one serie, other times I need two or three series to draw.
Obviously, this is an example of adding series dynamically. I put:
$(function() {
var chart = new Highcharts.StockChart({
// ...
series: []
// ...
})
chart.addSeries({name : "Value1",data : value1Data});
chart.addSeries({name : "Value2",data : value2Data});
chart.addSeries({name : "Value3",data : value3Data});
But not working, the chart needs to have at least one serie with data values in "series" node, not allowing an empty series node, like I put before.
I need to add all my series dynamically.
Anyone can help me? Thanks.
Example: http://jsfiddle.net/8aP69/1/
FYI: The graph only draws the navigation bar.
After many little test, a man that I loved him give me the solution.
I need to set initial series node like that:
series: [{ name: "Serie1", data : [null]}] // first serie has to be null
And after that, adding data point for first serie.
chart.series[0].setData(data1); // adding his data here