I'm trying to develop a Gantt chart to display a certain list of grouped activities. In the image below I have attached the sample set of data that is used to generate my Gantt chart.
I have used the Gantt chart provided in this link (http://yukon-admin.tzdthemes.com/html/plugins-gantt_chart.html) and modified it so that I can display multiple activities per group. [In here they only let you add one activity per group].
This is the Gantt chart from the template,
Modified Gantt chart based on my requirement,
Now I want to display my activities one after the other, something similar to what would happen when you apply float:left,(float:left is not working in this situation).
This is how I want to display my activities, I can achieve this by setting the CSS property to absolute but the lines stay static and I can't scroll my gantt chart to see the other activities.
I see that even though a width is defined to that particular div, it is taking up the whole width of its container div.That's why the divs are stacked one below the other.
What can I do to get the lines displayed one beside the other and not one below the other? Any help would be appreciated.
Thanks in advance. :)
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!
I have a Highcharts pie chart with a table and two buttons added to it. I need the data labels from the chart to appear dynamically around them, instead of hidden beneath as they are currently.
Is there a way to avoid conflicts with the table overlapping the data labels in Highcharts?
Is there a way to do this within the CSS or is custom JavaScript required?
fiddle
I noticed you set your table to z-index: 1.
Your Highchart is an SVG so it has no concept of z-index. The type of ordering in SVG is the painters model, meaning each subsequent element is painted over top of the other.
If you really want a table occupying the same space as the chart, I think unfortunately you would have to have the table as elements in the SVG and put it before the highcharts-data-labels so that these labels float over the table because they will be "painted after/on top" of the table.
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.
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.