I've been investigating highcharts and highmaps in conjunction for a project I'm working on and have come up with a few problems.
The biggest one is the fact that when used as a plugin for highcharts, highmaps has some weird behavior.
First, it doesn't stop the display of the grid axes in a chart (similar to how pie and donut charts do). This however is solved with some creative color choices in their drawing.
But the biggest problems seem to come from the scaling it does when you try to zoom in (scroll) on the map.
Any ideas on how to fix the scrolling issue? Also disabling the axes would also be appreciated.
A jsfiddle with an example is here: http://jsfiddle.net/n8Lvn/
Related
As a base I use this gantt chart from Amcharts:
https://www.amcharts.com/demos/gantt-chart-dates/
Is there a way to let the user interactivly resize any of the items? I see there is a resizable Option for XY-charts in Amcharts but it doesn't seem to do what I need. Is there any other method of resizing the bars?
It's seems preety complicated to achieve that with amcharts becuase they are preety robust.
there is a an open-source project that will satisfy your needs - frappe gantt, it allows you to drag the bars themself. (I have no connection to the project).
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
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.
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.
My customer has some specific requirements for a graph to show in our web app. We use HighCharts elsewhere in the app for more traditional graphing, but it doesn't seem to work for this situation. Their requirements:
Allow the user to select a background image, set the scale and origin of the coordinate system. We'll graph our points against the user-defined coordinates.
Points can be color coded
Mouse-over boxes show more detail about the points
Support for zooming and panning, scaling the background appropriately
Less importantly:
Support for drawing vectors off the points
Some of this seems basic, but looking around at different graph packages, I was unable to find any with an example of this kind of usage.
I've entertained the thought of just hacking it together in canvas myself, but I've never worked with canvas before so I don't think it would be cost effective. The basics of plotting points with a scaled coordinate system against an image background wouldn't be too hard, but the mouse-over details, zooming and panning sound much more daunting to me.
More info: Right now we use jQuery, HighCharts, and ExtJS for our app. We tried flot in the past but switched to HighCharts after flot didn't meet our needs.
this looks promising:
http://danvk.org/dygraphs/
And this seems to have what You need, but it's not free:
http://www.ejschart.com/