Horizontal line chart using categories in y-axis - javascript

I planning to develop a horizontal line chart using Amchat library. and I need to arrange my categories in y axis. I have tried many ways but couldn't find a solution. Is there a way That I can set category in amchart y-axis. I have attached a image of a sample design.
Sample Design : https://i.stack.imgur.com/iEShm.png

Related

How to stack multiple VegaLite graphs on top of each other

I am trying to recreate a certain graphing tool for my company (I'm an intern getting my BS still). I want to use VegaLite graphs to recreate a graph that is essentially 3 unique graphs stacked directly on top of each other. each graph has its own separate Y axis but they all share the same X axis (time). Right now I have populated 2 graphs but they are side by side. It would be helpful to be pointed in the right direction to figure out how to format the graphs placement so that each graph is directly on top of the each other. like so:
Graph1
Graph2
Graph3
It would also be helpful to learn how to format the X/Y axis labels and hide/remove the X axis of Graph1 and Graph2.
Thank you!
You need a concat as described here. https://vega.github.io/vega-lite/docs/composition.html

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

Draw vertical lines in chart

Is there any way to draw vertical lines in chart. (i.e.)
Under each dot there is a vertical line which is projected to x axis.
Could you advise how to customize it with Google Chart , of course if it is possible?
Are there any other libraries with such kind of line chart ?
p.s. In project I use Angular 1.5. Also I took a look on nvd3 but didn't find what I want
see config options...
use option for vAxis.gridlines to customize vertical lines...

Custom JS chart similat to a vertical progress bar

I am searching for a JS chart like in the image. I got it from an excel file. The percentage is incorect, it should be from 0 to 100%. Does anyone know a library which provides this kind of chart ?
Seems like you're looking for a bullet chart. Most of the major charting libraries provide bullet charts as a standard chart type. You could also implement it as a column (vertical bar) chart with some additional styling.
Here is a ZingChart demo of a vertical bullet chart with an area marker and here is a similar demo implemented as a mixed chart - a column chart and a scatter plot marker for the "goal" line. Both replicate your image.
I'm on the ZingChart team, so don't hesitate to reach out if you have any questions!

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