I am using angular-nvd3 horizontal bar charts. I need the size of the chart to be dynamically adjusted, so that the bars are of the same size always.
The current functionality is such that, on click of a bar in one bar chart another bar chart is created. The data passed to the bar second bar chart is dynamic, so the height cannot be set as a constant using the height property. If i give the height as a constant value, and the data passed is large, the bars become very thin to accommodate all the values.
Can you please suggest a method where the height can be set dynamically so that the bars are of equal height.
This is what i hope to achieve.
You can try using $watch. I guess the data from the second bar chart is stored in a list or something. By watching over list length you can (maybe) set the new height of the bar chart. This is what you want, right? I don't say is the best way, but in this moment, this is what I think you can try. Is not that easy but is a stable way to do that dinamically.
Related
I am trying to adapt the animated grouped bar chart example from
https://bl.ocks.org/aholachek/fb0c1cd7ea9707bc8ff55a82402c54b1
for my own purposes. One modification that I am stuck at right now is that my data will have a variable number of groups and the xAxes and blocks have to resize accordingly.
I have already added the resizing of the domains with
x0.domain(data[Object.keys(data)[0]].map(obj =>obj.name))
x1.domain(valueKeys).rangeRound([0, x0.bandwidth()])
in the update function, but this does not seem to be enough. While the width of the bars is resized correctly, the x values are not spaced out evenly and instead get pushed into the far right corner of the graph when adding more elements after the initial creation for example.
For now I only care about the grouped version, not the stacked one.
I would appeciate any pointers
Problem could be solved by clearing out the barContainer before the update. This of course prevents transitions on the already existing bars, but that is good enough for me
I am trying to implement this Sankey diagram
http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779
For large volumes of data chart goes out of the UI view.
I am looking for an implementation like this
http://bl.ocks.org/robschmuecker/7880033
A chart that dynamically adjust the height width properties.
I am new to D3, dont know how to proceed. Any help is appreciated.
When the d3.js sankey is built, it is based on the initial width and height that you supply. If you have many nodes/bands you will also need to adjust the nodeWidth and nodePadding to space the bands. Typically you would setup an input box for height and width, allowing the user to enter the desired chart size (which you could default to screen.width/height) and then reload the sankey so that the diagram can be reinitialized to fit the new dimensions. The flow example you linked to still requires a manual position of the elements...ie you need to click and scroll. In short there is no automated way to resize the diagram to fit an unknown number of data elements. Hope that helps.
I am using kendo ui to render some pie charts to my web page. They have a variable data set, some will have a legend which is 1 row and some will be 2 rows.
When I have the position set to bottom the pie chart with two rows of legend ends up being smaller because its trying to fit the second row in the same area, so it forces the pie chart to be smaller. The legend is displaying how I would like it to display though, with the items being center aligned.
I've tried to get around this by setting the legend position to custom instead of bottom. This takes the legend out of the sizing equation and positions it absolutely. This means that the pie chart sizes are now all the same, but the legend data is now left aligned instead of centered. This makes the legend with only 2 items look bad since its now all off to the left instead of centered.
Does anyone know if there's a way to set the legend to be center aligned while i have it set to using a custom position?
From what I can see in the API documentation, there is no option. Also, because the labels will be of variable lengths, i can't conditionally statically position them because depending on the label length different amounts may fit on each row.
I have setup a JS Bin example showing the issue:
http://jsbin.com/fejeyi/5/
The first two charts are using position bottom and you can see the pie's are different sizes, but the legend displays correctly.
The second two charts are using position custom and you can see the pies are the same size, but the legend is left aligned.
Any help appreciated.
Here's the source of the JS Bin:
http://jsbin.com/fejeyi/5/watch?html,js,output
Cheers!
I am using chartjs for my web application currently. I am having an issue when initializing the chart with a large amount of data. I am using a rotated bar chart, and it is removing some of my arguments fields when re sizing the chart. this results in the arguments not lining up with the correct bars. I cannot seem to find an option that allows for the height of the chart to dynamically adjust.
is there a way to achieve this so that I am able to see all of my arguments?
I'm using Flot to chart some bar charts on my website.
When I draw a chart with three bars for example, everything renders fine. Then I can add a fourth bar and the bars get thinner and accommodate themselves properly (sort of like what Highcharts does with default settings).
When I remove a bar from that same chart, the bars stay thin and resized and do not grow back to their previous state.
Any ideas how I can achieve this effect? Does Flot offer this functionality? Their documentation doesn't mention anything like this and I'm afraid I may be overlooking something.