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).
Related
I'm looking for an editable Gantt chart component that can be used in ReactJS. The need is to plot a resource Gantt chart where the user can change tasks on the time axis and also between the resources.
Preferably open source.
This one is really good too
https://github.com/guiqui/react-timeline-gantt
Can load thousands of records, has infinite scroll and task dependencies.
There is a gantt chart here which is ReactJS and open source (MIT) but as far as I can see not editable. But if you know ReactJS, making it editable would not be a huge job.
Docs: https://github.com/jamrizzi/react-gantt
Demo: https://jamrizzi.github.io/react-gantt/
You can take a look at this React Gantt chart component made with the help of dhtmlxGantt (js gantt chart library): https://github.com/DHTMLX/react-gantt-demo
Tutorial: https://dhtmlx.com/blog/create-react-gantt-chart-component-dhtmlxgantt/
I want to implement "zebra stripes" styling on the highcharts background as it will in improving readability of the graph data.
Notice the gray color between horizontal axes
http://i.imgur.com/QkOCZ2j.png
I was unable to find any such option in the highcharts website. It would be really helpful if someone had implemented it using custom javascript functions.
Check out alternateGridColor. This will specify a color for the alternating category grids.
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/
I'm looking for a charting library that can draw heatmap charts, and has the option of displaying column label text vertically (allowing me to fit lots of columns on the screen regardless of the length of the labels)
Ideally the library would be free for a charity/educational organisation.
Here's an example of a simple heatmap with vertical labels:
That chart was created using FusionCharts, which is not suitable as it is a flash-based product and is expensive to license.
You could always roll this yourself. Most of the table can be generated using ordinary HTML, with the exception of the vertical labels at the bottom. You could tackle that with Rafael, a JavaScript library that allows you to draw on an HTML canvas. Drawing rotated text is actually available out of the box so it won't be hard to implement.
I think what you are looking for is also called a TreeMap (in some circles anyway).
Check out thejit.org
Under the demos checkout the treemap and the icicle chart.
At this url you can find what you are looking for heatmapjs
I am trying to add the actual value of all the bars in my chart to the
end of each bar. I want this to either replace, or to add to the tool-
tip functionality.
I see that this is possible in the image chart, it is the
functionality described in the following link that I wish to
replicate:
http://code.google.com/apis/ajax/playground/#image_bar_chart
I am wondering if this is possible in the Javascript based version of
the bar chart?
Many thanks,
H.
It looks like there's no built in functions to draw text ad-hoc on top of google's different charts. Behind the scenes, it's generating SVG so you could try to insert some valid SVG on your own.
Another option would be to use a more flexible (but less featureful) library like raphael.js:
http://raphaeljs.com/