How to overlie bar charts in nvd3.js? - javascript

I want to display one bar chart on top of another one.
Reason:
I am showing a base consumption on a certain day, but also the overall
value.
I don't want a bar chart next to another but on top of one.
So far, I draw a line with pure d3.js on top of the bar, which brings a lot complexity and handling edge cases on my own.
The problem: I am using a multibarchart with nvd3.js, because I sometimes display more than one range of value in my chart. So for one or more series inside this chart, I want to display another bar chart on top.
Is there a better solution for this?

Related

HTML5 chart stacked bars with repeated colors

I want to plot bars composed of a small but variable number of colored regions, with the same (three) colors appearing multiple times per bar. I'm aware of stacked bar charts in chart.js, but this uses the same number of colored regions (datasets) for each bar. Hacking it to plot a bunch of zero-length datasets to get the right number of colored regions in each bar feels wrong. That said, the tooltips, etc. in chart.js are nice, so if there's no more natural solution, maybe zero-length datasets are the way to go. Any thoughts?
So, instead of using chart.js, I think I'll use d3.js. Won't be hard to just plot the individual rectangles using d3.
For reference, an example that only has one bar per entry, but won't be hard to extend is the horizontal barplot shown here. (There's a simple intro to d3.js on the same site.)

How to break a bar chart when the data is to high in difference of the others in plotlyJS?

so i have this simple bar chart in plotlyJS, and it was requested that when a bar is higher compared to the other, it has to break to not display the entire bar, so that it does not shrink the others.
This is a simple image of my chart, i don't put the code because you know plotly has kind the same structure for all the charts.
And what i want to do is this is if is possible
Any information would help me, thanks!
This is not possible to do with Plotly.js at the moment.

Javascript discontinuous stacked bar graph

I am trying to plot daily tasks in what i would describe as a discontinuous stacked bar graph. Another description would be a vertical gantt chart of past events.
If the description is lacking, the result i want is something like that shown in the image below (made in paint).
All task have a duration (from-to time) and can have different categories which results in different colours with belonging legends.
I have been playing around with two javascript plotting libraries; chart.js and plotly.js, and looking at others but i haven't found anything that can do what i want to achieve. Both chart.js and plotly have stacked bar graphs, but i see no way of getting spaces in between the bars and getting the legends right.
Do anyone have an idea if this is possible in any these two libraries? If not is there an alternative library where this can be done?
Regards

Javascript line graph with tics and difference bar

I'm trying to create a chart similar to the one on the link in JavaScript (going to have the chart in Design Studio). I need there to be a line chart with the current years data and tick marks under with last years data. Between the line chart and the tick I want a bar connecting the two.
I've tried several things but I can only get somewhat close. Due to a few outliers, I also need to keep all values above a certain value and below a certain value to stay in a certain range to avoid the plummets seen.
This graph was created in Excel.

Highcharts highstocks - Dual chart axis issue

Looking through the documentation for Highstocks, I found this example:
Shown here is two series on the same chart, therefore with a linked range selector - this is really really useful, but I wish to display something different which is proving to be very difficult.
What I'm looking for is a normal line graph on the top series, representing data plotted onto time (almost like in this example), but a bar chart or horizontal candle chart in the lower graph, representing one or more timelines.
I've drawn an image of what I'm looking for:
I apologise for the crude drawing, but hopefully it shows what I am aiming to achieve: standard graph on top, bar/candle on bottom.
I have attempted various techniques to render this, but I can't find a way to have both series drawn on the same timescale, linked with the same range selector.
In case it helps, here's a starting point on JSFiddle, with all the unnecessary code removed: http://jsfiddle.net/g105b/8JhXv/
and a link to the original demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
Answer taken from official Highcharts forum
it is possible, but with some limitations. In the fact you want to show gantt chart. Bar charts aren't possible in your case - bar chart = inverted whole chart (yAxis becames xAxis, etc). Instead take a look at example for gantt chart: http://jsfiddle.net/highcharts/r6emu/
You can combine them into one, ane effect: http://jsfiddle.net/8JhXv/1/
About limits:
tooltip fo bottom chart is availabe only when you mouseover start and end date
bars are on lines, not between them

Categories