Develop Reference

Highcharts Column Graph with background color?

I'm trying to make a column graph in Highcharts and it's not working out too hot. I'm essentially trying to give the column a background color that the data point can overlay. I want the effect of stacking without actually stacking if that makes sense. Any thoughts on what I can do?
Essentially I want it to look like a progress bar... there should be a distinct coloring between the top of the bar and the top of the graph itself. I've already tried stacking: percentage, but to no avail. Thoughts?

There are three options that come to mind:
1) To achieve the 'effect' of stacking, actually stack it: use a dummy series with a color set to the background color that you want, and set with values to fill the gap from the actual data.
Example:
http://jsfiddle.net/jlbriggs/Zf8C7/5/
[[edit for questions
The order of the series does not matter for this to work, and neither does the legendIndex.
What does matter, if you are using multiple series, is the stack property for each series - http://api.highcharts.com/highcharts#series.stack
Each group will need its own stack, and the dummy series and real series within each group need to be assigned to the same stack.
In addition, you need to have one overall max value.
Updated example:
http://jsfiddle.net/jlbriggs/4d9tm6b8/4/
(keep in mind, there are much smoother methods to process and build your data - this is a quick and dirty example whose purpose is to show how to properly use the stack property to do what you need)
]]
2) plotBands, as mentioned above
3) using the alternateGridColor property and set your data to skip an x axis
value between each point.
Reference:
- http://api.highcharts.com/highcharts#xAxis.alternateGridColor

Highcharts - nested sliced donut charts

I'm trying to create a nested pie / donut chart, where the inner ring displays a 'group' (e.g. a car manufacturer) and the outer ring displays a breakdown for that 'group' (e.g. the models made by each manufacturer).
I need the individual segments to be exploded / sliced so that it looks like this:
http://imgur.com/TBtySVa
I have managed to get this working using the sliced and slicedOffset properties (the image above is actually a screenshot of my chart), however this creates strange effects (see the fiddle) when there are fewer 'groups'.
I have put together a fiddle to demonstrate how the chart looks odd when there are fewer groups in the inner ring. It looks really bad when there are only one or two items in the inner ring:
http://jsfiddle.net/danielcrisp/784jzLe2/
I would like to know if there is a better way of achieving the result I require? Probably sliced is not the right way to go as it isn't its intended use. How else can I get a gap between items?
Note: the chart will be displayed over a photo so I can't use borders to create the effect.
Update: It's ok if the spacing between segments is regular, e.g. 10px, unlike the irregular spacing shown in the first screenshot.
Transparent borders should be the perfect solution but they don't mask the segment fill colour unfortunately.
Thank you!

You can add some dummy data points that will be transparent. This solution will need some calculations for good visual results.
jsFiddle: http://jsfiddle.net/25acys4j/4/
Example of transparent slice:
{x: 0,
y: 3,
color: 'rgba(0,0,0,0)'
},

Try to adapt donut chart, and border like this: http://jsfiddle.net/25acys4j/. The border can get a transparent color, when you define it as rgba();

Reset xAxis[0] and xAxis[1] width in Highcharts

I have a quick question for you re Highcharts.
How do I reset xAxis[0] and xAxis[1] width at runtime, and how do I also reset xAxis[1] offset at runtime? Reason I am asking is because I have a chart harbouring two x-axes and these need to be resized to fit differently sized divs. Example here: http://jsfiddle.net/F3pts/7/
More generally speaking I struggle to reset options at runtime. I understand there are "setOptions" that can define general options for the chart, but that these are then 'trumped' by chart options when the chart is drawn. I however don't always get it how these options can be changed once the chart has already been drawn once. Something like:
newOptions({
chart:{},
xAxis:[{},{}],
etc....
});
Hope you don't think this is a poor quality question. I have trawled through heaps of material on this and cannot find the answer to my needs.
Rgds,
G.

Simple use Axis.update(newOptions), docs.
Where you can set new width/height/offset etc.

Use a jquery type slider to iterate through a csv and display one bar at a time in a d3.js bar chart

So I'm generating bar chart in D3.js with a csv file a la the basic columns example. What I want to do is show just one bar at a time for each row of data. A JQuery-like slider will iterate over the csv rows and update the chart. For the user, it'll just look like the single bar's height is changing but the x axis should update with the date as well.
Here's an example of the data that I'll be feeding into it:
DATE,INFLOW (CF),OUTFLOW (CF),STORAGE (CF)
20120101,950400,28857600,11084277600
20120102,60912000,28771200,11099959200
20120103,56505600,28857600,11130451200
20120104,55900800,28771200,11158765200
20120105,55987200,28771200,11189692800
20120106,56419200,28771200,11220620400
20120107,55123200,28684800,11246756400
The only thing I actually want to show is DATE and STORAGE (CF). So I'll probably have to do some parsing of the CSV somewhere to get it in the best shape.
I've attempted this and would post some code but all of my attempts are a mess. I can generate a plausible bar chart with all of the rows at once, but when I attempt to show a single one, everything breaks. Here are the challenges that I could use some guidance one:
How to splice or filter my csv with a slider so that only a single row is selected
Best way to generate a bar chart that only has a single bar from a single row in a csv (every time I try to do this I have trouble with axes and accessing the array values correctly)
Best way to update the bar, changing only height but also updating the x axis ticks
Also any examples would be very helpful! Have been googling like mad but am mostly finding sliders that affect range and scale

There are many pieces to this...parsing and slicing the data, setting up the x axis, etc. Here is one segment of the code.
d3.select("#slider")
.on("input", function() {update(+this.value);});
function update(row) {
viewdata = data.slice((row-1), row);
redraw();
}
Here is a complete PLUNK with the solution. NOTE: I have placed comments in several parts of the code, for orientation. I strongly suggest you fork this plunk so that it will not be lost if I inadvertently delete it.

draw vertical lines using jquery

I have the following json and I need to create a grid and also above the grid need to show vertical lines based on the values :
var arr = [];
arr= [
{"Measure":"Air Pollution","Rank":"1","Value":"15.5"},
{"Measure":"Water Pollution","Rank":"2","Value":"13.5"},
{"Measure":"Soil Erosion","Rank":"3","Value":"10.5"}
]
Now I need to create a grid and above the grid, need to create vertical bars based on the "Value". There will be 3 bars created since there are 3 Values. Now when 1st row in the grid is selected, the first vertical bar needs to be highlighted . Similarly, when the 1st vertical bar is selected, the 1st row in the grid to be selected. Creating the grid is not a problem since I am using KendoUI grid but to create the vertical bars and the selection is the one where I am stuck . Any views ?
Thanks.

Based on #Bogdan M.'s suggestion on using div elements, I've set up a jsFiddle demonstrating vertical bars built using jQuery. It relays on the input of values as an array of numbers, and converts those to DOM elements, setting their height accordingly.
This demo can be very easily updated to use the OP's supplied data structure, and selection behavior functionality can be added as well.
This final version (contains the complete solution, both for building the component and for assigning it with selection behavior) can be seen in the full demo on jsFiddle.
All that's left now is to assign handlers for the selection functionality - as cell / row listeners - to the KendoUI grid.

I see that you aim to visualize your data as a bar-chart. If so, don't re-invent the wheel. there are a lot of good JS libraries designated for that purpose.
I've had a good experience using HighCharts, try it out.
Disclaimer: This may be an overkill, but is a suited solution should the component be generic (for future compatibility with flexible data)