Is there any way to format pie charts so that labels are readable when slices are very thin?
I've been looking for similar questions, but found nothing.
It was difficult to post my code because it would be too much overhead. Anyway after much searching I found this bug, and that was what caused the problem. The chart was drawn in a (Bootstrap) tab that was not visible at first.
Related
I'm facing two problems.
How can I make sure that the whole legend can be seen under the graph? Indeed when the legend is too big three points are added.
My other problem concerns pie charts. How to make all the percentages appear on the graph, by default it puts them only when the place is sufficient on the graph?
Bar Chart problem
Pie Chart problem
Thanks you
Bar Chart Problem : Its the default behaviour. The 3-dots is called ellipses. It is used to truncate the strings to fit the in to the containing box/div. For more info, refer this. This workaround would help you if you wish the axes labels are need to be shown full. In case legend values, please refer this.
Please refrain rom using such long names for the axes as it affects the UX.
Pie Chart Problem : Its the default behaviour of Google Charts to show the values only if the values are sufficient to fit in the place. As a workaround, you can display all the values, in the chart using the option {legend : "labelled"}. Thanks to this Google Forum.
Example JS Fiddle
I am not sure if anyone has come across this scenario or has even made a solution but basically I am able to create simple Pie and Donut charts using Flot Charts. What I am looking for though is a scenario where there is a pie chart in the center and it is surrounded by a Donut Chart. Very similar to this question but that question is now 3 years old and was never really answered.
I tried creating two charts using the same DIV but then one just overwrites the other. I thought of creating two different charts on two different DIVs and having them overlap but that just doesnt seem like a clean approach that will also accommodate responsive behavior.
Any thoughts / suggestions are welcome.
Thanks in advance
The answer to this is not simple as some of the comments have already indicated but I did find something that comes pretty close - HighCharts. They do have a con-centric donut chart that gives exactly the look and feel desired - infact LinkedIn uses them to display their dashboard statistics. The downside to Highcharts is that it is a paid library and its not cheap if you are planning to deploy on a commercial web application
The alternative is to use MorrisCharts - http://morrisjs.github.io/morris.js/donuts.html
They do have some good donut charts that come pretty close to the need.
I looked for hours in finding a chart that will be similar to the image that I upload without any result.
I want to implement it in D3.js or other data visualization framework.
I would appreciate if someone will give me a similar example to this kind of graph.
Example of the chart
I am using d3.js along with dc.js and Crossfilter. As seen on the below image, the chart should end on 12/31/2016 as there is no data after that but keeps on going. Probably stuck at the last value. This is only happening in line chart. When I use a bar chart it does not happen.
Is this a known bug? Not sure what else I can do? I copied the configuration exactly from the dc.js example page (composite chart) and applied my dataset.
Found the problem. My dimensions were based on dates and some records had a typo in them. Instead of 2013, it had 2103 which caused the problem.
I have a Google line chart, I set 'curveType': 'function' so the graph is curved and has a nice appearance. My problem is that when a data point has a value of 0, followed by a following high value, the chart dips below 0 so that the curve can fit correctly. This also causes the vAxis to have a minRange of -2000, this isn't possible for my data (number of downloads over time).
I've tried to solve this by setting 'minValue': 0 and 'viewWindowMode': 'maximized' on the vAxis, but it hasn't solved the problem completely.
I have attached an image that will explain my problem a lot better than I can with words.
If anyone knows a solution to this, without me having to go back to straight lines, it would be much appreciated. Thanks
The curve may continue to dip below 0 no matter what you do, but you can crop the view so the lowest point of the displayed graph is at 0. You can do that with the vAxis.viewWindow.min property:
lineChart.draw(data,
{
curveType: "function",
vAxis: {viewWindow: {min:0} }
}
);
See the LineChart documentation for information on vAxis.viewWindow.min and other configuration options.
Just a quick update on this. I realised that my data work not be suitable for a curved graph anyway, as it is discrete data and not continuous. I had to switch back to straight lines, which removed my problem. Not an ideal solution, I know, but it is one that worked for me.
You could try another charting library. I often use flot for simple graphs, and raphael graphs for more complicated things (slightly harder to manipulate, and looks a bit more clunky to me)
gRaphael: http://g.raphaeljs.com/
Flot: http://www.flotcharts.org/