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
Related
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.
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 have a somewhat limited knowledge of JS and JQuery so I am sorry if this is a stupid question. I have a dashboard of charts which will have varying widths and also allows a user to change the width. The chart automatically adjusts it's size. What I want is for the legend to appear under that chart but fill the width given. My issue is it seems that the number of columns for the legend is set once and unable to be updated. So if I a chart that covers the entire width of the page I want to be able to show a larger number of columns, but if the chart only has a small amount of width space I would like it to use less columns. I can capture the width and figure out the number of columns I would like but is it possible to redraw the legend dynamically? Thanks for the help!
You need a reference to the plot object returned from $.plot, then it's:
plot.getOptions().legend.noColumns = 3;
plot.setupGrid();
plot.draw();
Example here.
Is there a way to change the height of a 3D Pie Chart? We need to show users differences between a few of charts. Some must be larger in height (they must be rather like pillars then pies), some smaller. In other words, I want the pie itself tot be taller (the y-component of the pie), not the whole chart.
Here's the documentation and examples of the pie: https://developers.google.com/chart/interactive/docs/gallery/piechart#3D
If it's not possible, maybe there are other good alternatives of 3D-pie charts?
I'd appreciate links to tutorials of how to draw a 3D-pie chart (using SVG or Canvas) too.
The code is right there on the page you linked!?
Here: http://jsbin.com/jibucebe/1/ 3d piechart with different height..
Hi i wonder if it's possible to disable the automatic scaling of a highchart.
Or is ist possible to set a fixed position and or width and height to the labels ?
Here is an example, this is how i'd like to have my chart look like.
http://jsfiddle.net/ynXgw/6/
But if the labels have a different length highchart shrinks the graph.
http://jsfiddle.net/ynXgw/7/
Has anybody an idea how i could fix this?
One way to solve your problem is to use a different series to display the labels. In this example I use a second scatter series to display the labels. To position the labels just set the y value. I set the color of the points to the same color as the background to hide them. Then I use the dataLabels formatter to display the labels how you want them.