stacked bar chart - independent bar height from internal labels - javascript

I am currently using the 3th example of bar stacked chart of jqplot from their page. See here http://www.jqplot.com/tests/bar-charts.php. Currently each bar height is the sum of all internal labels inside. However, what I would like is to adjust the height of the bar manually according to a different scale from its internal labels. For example, if the bar has 3 different labels and their sum is 1 + 2 + 3 = 6. However, the actual bar height containing these labels should represent 15 on the actual bar chart.
Is that possible in jqplot or do you know any js library which can do something like that?

Related

Is it possible to have a bar chart with bars centered on the 0 value of the y axis

Using the built-in chart types of dc.js, is it possible to render a bar chart where the bars are centered on the zero value of the y axis?
I would like to get a chart that looks like this:
I tried using a box plot, but it seems that the effort required to coerce my data to render the correct bar heights and get rid of the percentile and error bar indicators will be greater that simply creating a custom chart type for dc.js.

C3JS bar display alignment

Team,
Q1 : I have a bar graph (on x-axis i have timestamps, and on y-axis i have few counts). Now, the bar display is not aligned with x-axis label display, it is misaligned and thus does not show the bar display at correct position of label value.
I tried with tick value as false\true, but still the bar is misaligned. Any idea as where it is going wrong?
Q2: For the same bar graph above, i wish to show the summary\count of all counts inside a legend, are there any examples or which call back function to achieve this?
Regards,
Santhosh

D3 how to draw chart with a x data between two y data

I want to draw chart that can set x between two y for example I want to draw a chart with x=100 and y1=200 , y2=500 just vertical line with good detail which chart can do that for me
something like this image
With specific x and y Which chart I should use to draw this
Here you can see how to make Bar Chart using d3.js
Bar chart using d3
Now the thing thing that you are trying to achieve is called floating Bar Chart.Although there is not any ready-made Floating bar chart available in d3. But we can achieve it by doing certain change in Bar chart itself.
When we are appending Rectangle in bar classes in the above example just change the height attribute to
.attr("height", function(d) { return height - y(d.higher-d.lower)
In this way it gives rectangle from the point lower to higher.
Json is in this format
var jsonData=[
{"letter": "A", "higher": .08,"lower": .05},
{"letter": "B", "higher": .05,"lower": .03},
{"letter": "C", "higher": .04,"lower": .02}
]
SEE DEMO HERE
And for learning d3.js follow this link

Showing 1000+bar data in jqplot horizontal bar graph

I am using jqplot to render the *horizontal bar graph in a popup,*I have 1000+ data to render, calculating the container width dynamically based on bar count.
Issue: It works fine till 700+ data but as it exceeds 1000-1000+ bars do not get rendered instead only x axis, y axis valus and labels alone comes.
I have customized angular directive to which I am sending the bar data, I am not sure if that is an issue.(If that would be the case then why the labels and axis values are coming but bars not drawing)

How to set custom width of bar in NDV3 Discreate bar chart

Am trying to build vertical bar chart using nvd3 charts.
Problem :
If chart has single record, bar width reaches 3/4 of the chart width.
Question :
How to change width of the bars in Discrete bar chart?
Have attached chart please guide me..
If you look at the source here. You'll see that the width of the rectangle is calculated based on the number of items using rangeBand. There doesn't appear to be a way to set the width of the rectangle though the library's API.
If you didn't want to patch the library, you could create additional fake bars with zero data and provide a label formatter that would return an empty string if the value was zero, but that assumes zero is not a valid number in your data set.
Use the follwing code to set the width
dispatch: {
renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
}
or you can use
groupSpacing : 0.57,

Categories