D3 Javascript Bar Graph
Produce a Bar Graph Widget widget using d3 ([login to view URL]) as shown in the attached picture.
The graph is a standard bar graph with two minor twists:
1. Each bar has some styling at the top (notice that it is shaped rather than flat).
2. An optional horizontal line an appear on top of the bars
The widget should accommodate anything between 2 and 11 bars although more would be welcome. Expect as input to the graph data in the following format
[{
"series" : "2000",
"value" : 1469.31
}, {
"series" : "2001",
"value" : 1204.75
}, {
.
.
.
}]
As mentioned above, a horizontal line may optionally appear at a specified height (this may be used to denote an average or some other indicator). This should be configurable in the widget constructor.
The scale should adjust automatically and each element (bars and horizontal line) should contain an index allowing it to easily be styled using css. Other options for customisation should include:
1. The width of the bars
2. The space between the bars
In contrast to a standard pie chart - this segment pie chart has a circle in the middle for displaying additional data. Produce a javascript widget along the same lines as these ones ([login to view URL]).