I need to create a chart that shows a series of events (see image, in this case 6) that have a duration of time between them.
I've been able to approximate this with a sankey chart and curveFactor:0, but I can't seem to adjust the space between each node.
Is there some way I can achieve this? It doesn't have to be sankey chart. I can use anything in the Highcharts library. I'd also considered a stacked bar chart but ran into another set of issues.
Related
I want to create chart only using d3 library. My chart will have different number of vertical bars depending on data and x-axis for this. My question is how to set chart dynamically and set x-axis ticks under every bar. It will be better if width of bars will be constant.
I tried to use ranges and scale but i dont actually understand how they works. Even with some topics)
I think you should use "Grouped Bar Chart".
Refer this block from Mike Bostock.
https://bl.ocks.org/mbostock/3887051
I have found a chart that suits exactly what our data needs but its simply just an image, it looks like a stacked bar chart, but it works differently.
Each of the ticks along the bottom represents a group, eg hour number, and when you hover you see all that data from the group.
Does anybody have any idea what its called and even better, know any source for the chart in a java script library, d3 or similar ?
It is a 'Stacked Horizontal Bar Graph'
http://www.storytellingwithdata.com/blog/2014/06/alternatives-to-pies
ChartJS:
http://www.chartjs.org/docs/#bar-chart-chart-options
Option for stacked.
as a part of an app that I'm developing, I am looking for an open source pie chart which can be manipulated on mobiles effectively.
I've found great pie charts such as Flot, jqPlot, HighCharts, etc. however, they only show configured values. While I don't need slice animations of click events, I do need a pie chart with the capability of changing its values from the chart itself, in a way similar to this.
The point is that I want to force a user to have his values sum up at 100 by favoring a slice and increasing its size at the price of lowering another slice.
Thanks in advance.
Chart.js is what you're looking for. If you have a look on the bottom right of the home page you'll see interactivity. You can trigger events when an element is clicked that will resize the chart as long as you are willing to do some javascript yourself.
I am following this example to create grouped bar chart. But the chart lacks responsiveness. I want to run it dynamically in all kinds of devices. I want to make it look something like the below chart(not same as chart above copied from an example of a responsive chart):
And also in above example the x-axis range is overlapped is it possible to make it tilted to so that all values are clear something like below pic so that all x axis range values are displayed.
The responsiveness of the chart is fixed however the scale values overlap on each other and instead of overlapping I want them all to adjust and appear.
I'm wondering whether there is some high level way of having more than one brush on a graph. Here's the problem:
I have a stacked bar chart where each bar represents one weekday and different metrics are stacked on top of one another (stacked line charts are not available yet as far as I know). Now I would like to let the user select the days to display (and the selection should propagate into the other graphs). Everything works great with the brush on, but if you want to choose Sunday, which is at the end of the graph, and Monday which is at the beginning, you can't do that using a single brush. Anybody knows of a way to add more brushes?
Alternatively I'm looking for a way to add a click event listener that would "activate" the day you click on in a similar way like a ring chart section would work.
Thanks a lot for your ideas,
Renra
You could try using an ordinal x axis instead of a linear one. The default behavior for ordinal bar charts is to click to select/deselect bars instead of range selection.
That's chart.x(d3.scale.ordinal()).xUnits(dc.units.ordinal). If you are using dc 1.7.1 of earlier, you may have to specify the domain by d3.scale.ordinal().domain([’Monday',...])