We Keep Coding

nvd3 horizontalBar dynamic height

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.

D3 Sankey diagram with dynamic height\width

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.

Set the legend alignment of pie chart in Kendo Dataviz

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!

Draggable date range using Highcharts.js

does anyone know of any drag events that can be used on a column chart created using Highcharts.js or even how to potentially mimic that event over the chart?
We have a split column chart. The smaller lower chart controls the date range on the master chart above. Currently the only way to adjust the range is to click and select segments of the smaller chart. Image below is what we have so far:
We would like to be able to make a draggable interface with handles to stretch and adjust the segment either way.
There is identical functionality in Highstock.js (screenshot below):

In highcharts you can use only master-details type of chart http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-master-detail/
But you have ability to use highstock.js and use column chart in navigator / serie. Take look at example
http://jsfiddle.net/UNBP7/
navigator:{
series:{
type:'column'
}
},
http://api.highcharts.com/highstock#navigator.series

Which javascript or JQuery charting tool can I use to create heatmap charts with vertical column labels?

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