Bar diagram with bar diagram overlay in relation - javascript

weird title I know...
I'm currently developing a simple page that displays temperature and humidity in a simple bar chart.
I couldn't find any solution how to display my temperature in bars and overlay these bars with humidity information which is displayed within these bars (in relation to their size). Given a Temperature of 22 degrees celsius and 50 Percent relative humidity, I'd like to display a bar which is half-filled with another color.
The current solution is to display the temperature as bars and the humidity as an overlayed line chart:
but this makes the temperature bar very tiny.
Any ideas which type of chart I should give a try?
I'm open for any solution (preferrably JS)

actually there was no existing solution, but the best for me was the multi axes chart of Highcharts: http://www.highcharts.com/demo/combo-multi-axes

Related

d3 timelines chart has a large amount of labels so they overlap. How do I selectively show labels based on chart size?

Here's the component I am using: https://bl.ocks.org/vasturiano/ded69192b8269a78d2d97e24211e64e0
my chart is implemented as shown on the link, however, the amount of data I have is much greater. Is there a way to show a select amount of labels until a user zooms in so there isn't overlap? Thanks!

Bar Graph Arrangement using 3 bar per Day D3.js

Using D3.JS
I have a running Bar Graph sample in here
This is composed of 3 rect per Day.
First is the black one, seconds is the blue one and the third is the orange.
My problem is to just to arrange the graph with its designated location.
Any idea is much appreciated.

Highcharts stacked area chart with background chart

What i would like: (not in highcharts)
Note the gray backround graph showing the average trend
What i currently have: (made with highcharts)
I managed to implement the stacked area chart, but i would like to add the grey average graph in the background.
Could anyone tell me if and how this is possible?
Thanks!
The answer was simply adding the "stack" variable to my series, which allows you to build multiple stacks of "stacked area" charts: one for the actual values, one for the average of last week. Thanks to everyone for their input

Responsive grouped bar chart in d3js with responsive scale values

I am following this example to create grouped bar chart. But the chart lacks responsiveness. I want to run it dynamically in all kinds of devices. I want to make it look something like the below chart(not same as chart above copied from an example of a responsive chart):
And also in above example the x-axis range is overlapped is it possible to make it tilted to so that all values are clear something like below pic so that all x axis range values are displayed.
The responsiveness of the chart is fixed however the scale values overlap on each other and instead of overlapping I want them all to adjust and appear.

Dynamic Bar chart scrolling with time using javascript

I am fairly new to JavaScript, let alone charting. I'd appreciate any help in accomplishing the following. I have browsed many JavaScript charting libraries and examples but have not seen any that solve my problem:
I need to create dynamic stacked bar charts as shown in the attached picture. Horizontal axis is time axis. The chart should scroll to left with time along with time-markings on x-axis. Each horizontal stacked bar is for a different item on Y-axis. There will be many items on y axis. Each section of bar will have text as shown. The information about each section and its text is received dynamically.
Thank you!
See the desired end result in this image
I have found the Google Charts to be very, very easy to use (https://developers.google.com/chart/?hl=en)
However, in order to have dynamic content, you'll need to have some data source to read from so that you can use something like ajax to constantly ping it for updated data. The Google Charts library will give you a good starting point but it won't be dynamic. You'll have to program that portion but Google Charts is very great in providing you with the basic pie, graph, bar, etc.. 'chart templates' so switching between a bar and a pie chart is super easy.

Categories

Resources