I'm trying to setup a graph that looks somewhat like this:
The graph consists of two data series, one for the stacked and another for the averages. Pay attention that is has two x-axis (multiaxis).
Looking at the ChartJS documentation, mixed graph types are possible, but not for stacked horizontal bars. Other articles seem to outline this as well, like this one on Alligator.io. I've yet to see any chart library to showcase such an example even.
Question is therefore if this is even possible, or if I should look into alternate approaches instead.
Currently it's not possible (only proof I could find right now).
The next version of chart.js will be 3.0 which has many major impovements, including changes to the horizontal bar chart, verbatim "Remove horizontalBar and make all charts capable of being horizontal". I think it will be possible with this version. But unfortunately not now.
Related
Good day everybody,
I have a graph with four legends, all of which are longer. How can I display the graph below large enough and still display the legends above?
if i hide the legends, the graph looks good, of course.
You will have to make use of an html legend, see this example in the chart.js documentation on how to implement it: https://www.chartjs.org/docs/master/samples/legend/html.html
I've been playing around with the Timeline chart from Google Charts. It's great because it's very easy to use. However, I stumbled upon quite some limitations:
It's not possible to adjust the height of the bars, or the amount of margin around them.
I cant format the labels of the hAxis. No fonts can be applied, or textcolor, or font-size. And for some reason, two of the labels are in bold. (see image below)
It's not possible to add a text column on the right containing an extra set of information (for example, the sum of all hours in this row)
I can't move the hAxis to be displayed above the graph instead of below
etc...
Here's a link to the image:
For this reason, I was hoping some of you could introduce me to an alternative tool or api that I can use. It needs to be easy to use, and free/opensource. I've Googled for numerous chart tools, but almost no tools provide this SIMPLE timeline type of chart (note that it's not a Gantt chart, but it looks like one).
There are a few Gantt chart Javascript libraries, but none seem to be close to the Google Timelines chart.
The only chart I could find that is similar is Visavail.js. It builds upon D3.js and is open source, so you can modify it to your liking. Check out the "Custom Category Data" example. It's a lot like a Google Timelines chart.
For your convenience, I've added a screenshot of the example below:
If you are familiar with d3.js, here is a d3js based example: http://bl.ocks.org/bunkat/1962173
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.
I have many signals recorded and i want to show them on a Chart using Google Charts. These signals share the same x-axis (time) but have very wide data range for y-axis (value). Some of them go from 0 to 10, while some others go from 1000 to 20000. Therefore, it's impossible to display them in the same chart.
Yes, You can use the vAxes property, to show them in the same chart but it limits the graph to 2 signals. And I have more than 2.
Therefore i thought about something like this:
Many charts sharing the same X axis, but with dedicated Y axis. Also, the crosshair is only one for all the charts.
I've searched the Google Chart documentation, but i couldn't find anything like that.
The question is, is it possible to do it with Google Chart? Is there a function or option to do that?
We are working on object oriented solution for charts and we are thinking to make it open source. You can have a look and you can use chart skelton to fulfill your needs. Here is the link
(click on the first chart)
http://grafitome.github.io/advanced-charts.html#
I'm not biased here, but want to recommend plottable.js. Have a look at their examples section for the Synchronized Charts and Finance, as well as their tutorials section, specifically "Building flexible layouts". Their API provides a high degree of customization.
Currently I am facing issue while rendering chart for large data in EXT JS. Chart gets cut or overlapped.
For example, I have 500 names on x-axis to plot then chart displays only 15 to 20 of them and others get cut. According to my view there should be scroll bar to view whole chart rather cutting the legends. I have tried to found solution for having scroll bars for such large charts but I am not able to find it.
Any other way for viewing whole chart is also accepted.
One workaround I can think about is 'panzoom' interaction.
Please visit link given below to see an official example with 'panzoom'.
http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/?charts=true#line-markers
With 'panzoom', you can zoom in to the chart and then scroll/pan. Zooming in to the chart would make the hidden coordinates visible.
It may look like this because you might have smaller space to render the chart as your data is too big. So you can try with 'pan zoom'. But I don't think so you will get a useful chart. It will still get junked.