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.
Related
I'm wanting to replicate a bar chart done in Power BI using google charts, and one of the features I am attempting to implement is this filter effect as shown by the two pictures I've attached a link to.
Bar Chart Before Filtering
Bar Chart After Filtering
I can add example data in a reply if necessary, but the concept is that the bar chart before shows 100% of data made up of sub categories, and on selecting a category from a drop down menu, the percentage coming from that sub category is highlighted while the rest is made transparent. I've searched through the Google Charts documentation and previous questions however I haven't found any information on how to implement this or if this effect is even possible. The controls included in the API seem to only be able to redraw the chart entirely, not keep the chart and highlight the portion filtered.
I've considered having two charts overlaid on top of each other, with the chart on top changing based on the user category selection and the chart on bottom remaining static, however, I'm not sure if that implementation is optimal or possible. Ideally, I would also be able to replicate this effect on other categorical based charts, such as a pie chart. I'm wondering if anyone has any ideas on a workaround in order to create a similar effect, or some input on whether this effect is even possible using the google charts API and JavaScript/HTML/CSS.
I'm looking to use React Apexchart's Timeline Chart to make a beautiful Gantt chart. However, the data I'm graphing could have several "Tasks" (y-axis labels) and each y-axis label could have dozens of "Action Items" associated with it. These Action items could be overlapping one another and need to be displayed stacked vertically.
React-Apexchart does a fantastic job with small data sets. However, now that I am receiving mass amounts of data it becomes unbearable trying to mouse hover over these bars to read the tooltips. Any ideas?
Ideally I would like it to be as readable and beautiful as it looks here. Even if the user must scroll vertically and horizontally.
Thanks everyone!
coin stack bar chart image
I have data that I'd like to plot, and instead of regular vertical bars showing the value of the y-axis, I'd like to either:
fill up the bar with a picture (for example coin images, stacked one upon one)
is this possible? can anyone tell me how to achieve this, need this graph for my frontend application , can anyone suggest any JavaScript library I am using JavaScript at frontend.
can I use custom coin images and make stack instead of a plain bar graph. My client wants the graph exactly the image I have attached and I have explored so many options but not able to find any suitable solution. Thanks in advance.
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
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.