Search the Community

Hello! I am using a gantt chart. I fill it with tasks in the following way: tasks: { task: [ { label: "In Use", processid: "A", start: "1/1/2018", end: "13/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "1" }, { label: "Idle", processid: "A", start: "13/1/2018", end: "18/1/2018", bordercolor: "#F2726F", color: "#F2726F", id: "2" } ] } And I get the following chart: I need to add images to the start and end of a gantt chart task: I want to do this with annotations and markers. In the documentation, I found convenient markers for datasets: x:$dataset.0.set.1.STARTX, y:$dataset.0.set.1.STARTY With this marker, I can select the desired dataset and add an image for it. But in the Gantt chart, I do not use datasets, but tasks. What marker should I use to find the task I want and add images for it? Thank you!

If I set the percentComplete value for a task in a gantt-chart, the tooltipp is not visible for the slack-part. This is a problem as we also can have 0% complete tasks (means 100% slack) - so there is no tooltipp available for the task and you can not identifiy it. I see the same on all your online demos. Not sure if there is an option to show a tooltipp in that cases - at least I did not find it out... Thank you and best regards

Hello, I am trying to render a Gantt chart in Wordpress. I am created the xml file on the fly with data from MySQL tables, saving the xml and then calling it with the new FusionCharts function. However, I am getting an "Error in loading data". I have the php files saved as template filed in a child directory under my theme directory and the script runs fine when creating the xml files. However, if I under the Network tab in the browser debugger, I am getting 404 errors when trying to read the xml files. The code that I am using to read them is $readchartfilename = "./wp-content/themes/uncode-lite/ocga_pages/".$chartname.".xml"; $columnChart = new FusionCharts("gantt", $chartId, "100%", 200, $chartname, "xmlurl", $chartfilename); If I run an echo on the getcwwd() - I get /home2/calypso/public_html/ogca and on $readchartfilename, I get - ./wp-content/themes/uncode-lite/ocga_pages/LadybirdFarms.xml. But the files that the FusionCharts function is under the folder of the page name (farm-crop-production) URL - http://mydomain.com/ogca/farm-crop-production/wp-content/themes/uncode-lite/ocga_pages/LadybirdFarms.xml Would appreciate any assistance. Thanks Steve

Hi all FusionCharts folks, I'm trying to populate GANTT chart by database (PHP+MySQL). I was able to implement my own script based on the general method based on the conceptual sequence: 1) Execute queries on database 2) If results is not empty... 3)...proceed with "array_push" to concatenate data to be displayed by the chart. The code below implements the above sequence: // Execute the query, or else return the error message. $result_CATEGORIES = mysqli_query($dbhandle, $strQuery_CATEGORIES); //prepare categories $arrData["categories"] = array(); $category = array(); // Push the data into the category array while($row = mysqli_fetch_array($result_CATEGORIES)) { array_push($category, array("label"=>$row["abbr_mese"], "start"=>$row["frm_inizio_mese"], "end"=>$row["frm_fine_mese"])); } echo "<pre>"; echo "ARRAY CATEGORIES CONTENTS"."<p>"; echo print_r ($category); echo "</pre>"; array_push($arrData["categories"], array("category"=>$category)); After repeated excecution of the above code for all the data-section required by the GANTT chart the final assembled JSONencoded string is the following: {"chart":{"renderAt:":"chart-1","dateformat":"mm\/dd\/yyyy","caption":"Commesse Associate al Collaboratore","subCaption":"Assistenza al Planning","theme":"fusion"},"categories":[{"category":[{"label":"GEN","start":"01\/01\/2019","end":"01\/31\/2019"},{"label":"FEB","start":"02\/01\/2019","end":"02\/28\/2019"},{"label":"MAR","start":"03\/01\/2019","end":"03\/31\/2019"},{"label":"APR","start":"04\/01\/2019","end":"04\/30\/2019"},{"label":"MAG","start":"05\/01\/2019","end":"05\/31\/2019"},{"label":"GIU","start":"06\/01\/2019","end":"06\/30\/2019"},{"label":"LUG","start":"07\/01\/2019","end":"07\/31\/2019"},{"label":"AGO","start":"08\/01\/2019","end":"08\/31\/2019"},{"label":"SET","start":"09\/01\/2019","end":"09\/30\/2019"},{"label":"OTT","start":"10\/01\/2019","end":"10\/31\/2019"},{"label":"NOV","start":"11\/01\/2019","end":"11\/30\/2019"},{"label":"DIC","start":"12\/01\/2019","end":"12\/31\/2019"}]}],"processes":[{"process":[{"headerText":"SIL"},{"headerText":"BIOM"},{"headerText":"BIOM"}]}],"tasks":[{"task":[{"start":"01\/15\/2019","end":"01\/28\/2019"},{"start":"02\/07\/2019","end":"03\/21\/2019"},{"start":"02\/20\/2019","end":"05\/11\/2019"}]}]} I checked against it and it is (at least as per its syntax) perfectly valid JSON Here it is the same JSON string nicely formatted: { "chart": { "renderAt:": "chart-1", "dateformat": "mm\/dd\/yyyy", "caption": "Commesse Associate al Collaboratore", "subCaption": "Assistenza al Planning", "theme": "fusion" }, "categories": [{ "category": [{ "label": "GEN", "start": "01\/01\/2019", "end": "01\/31\/2019" }, { "label": "FEB", "start": "02\/01\/2019", "end": "02\/28\/2019" }, { "label": "MAR", "start": "03\/01\/2019", "end": "03\/31\/2019" }, { "label": "APR", "start": "04\/01\/2019", "end": "04\/30\/2019" }, { "label": "MAG", "start": "05\/01\/2019", "end": "05\/31\/2019" }, { "label": "GIU", "start": "06\/01\/2019", "end": "06\/30\/2019" }, { "label": "LUG", "start": "07\/01\/2019", "end": "07\/31\/2019" }, { "label": "AGO", "start": "08\/01\/2019", "end": "08\/31\/2019" }, { "label": "SET", "start": "09\/01\/2019", "end": "09\/30\/2019" }, { "label": "OTT", "start": "10\/01\/2019", "end": "10\/31\/2019" }, { "label": "NOV", "start": "11\/01\/2019", "end": "11\/30\/2019" }, { "label": "DIC", "start": "12\/01\/2019", "end": "12\/31\/2019" }] }], "processes": [{ "process": [{ "headerText": "SIL" }, { "headerText": "BIOM" }, { "headerText": "BIOM" }] }], "tasks": [{ "task": [{ "start": "01\/15\/2019", "end": "01\/28\/2019" }, { "start": "02\/07\/2019", "end": "03\/21\/2019" }, { "start": "02\/20\/2019", "end": "05\/11\/2019" }] }] } Nonetheless, fed by the above JSON encoded string, the rendering of the chart keeps returning the message "No Data To Display". I did my investigations and discovered that stripping away from the JSONencoded string the first "[" and the last "]" from the sections "processes" and "tasks" the chart renders as a breeze with proper data and labels in place. It looks like the chart doesn't want these sections (which of course follows the main one "categories") marked as an array. May be the problem is not in the terms I have just stated but I'm looking for a solution. Thank you in advance, I greatly appreciate FC, any help is more than wellcome!

Hi, I encountered this weird issue while the bars overlap the header of the table when scrolling from the vertical scrollbar, please see the attached screenshot. Is this a known issue and is there a workaround for this? FusionCharts.version = 3.12.2 Thanks! Razvan

Hi, I am facing a serious bug on the Gantt Chart created with FusionChart. When I drag on the borders between the cell borders (on the left), a resizing cursor icon is shown and users expect that the columns width are re-sizable. However, the chart does not function as expected. It draws an diagonal line instead, and the text of two columns merged together. The bug also exists in the examples provided by FusionChart: for e.g. http://jsfiddle.net/fusioncharts/fLqSL/ I tested the above example with both Chrome and IE11. Could anybody do me a favor, telling me how can I disable the resizing function before an update is released. Thank you very much! Kit

I am working with a FusionCharts gantt chart. My customer is interested in having the tasks for each project line item indented. It looks like some industry gantt charts indent tasks associated with a project, while other gantt charts do not. FusionCharts seems to be one of those charts that doesn't. I was able to set the main project row to have a bold font, using the isBold option when I create my processes json. I did not see any other options for text formatting that could help me force an indent of the subsequent tasks associated with the project row. I tried using escape characters, spaces (&nbsp;), and regular spaces, tabs (\t), none of these had any luck. The spaces (&nbsp;) actually showed up on the gantt chart infront of the task names. Interestingly enough, when I did use escaped tabs or spaces, the tooltip that popped up when I put my mouse over the task row was indented, but the actual task on the gantt chart was not indented at all, or displayed the space characters (&nbsp;). Is there any tag or formatting I can apply to my task names to get them indented, while leaving my rows with the project names not indented and bold?

I'm having problems since upgrading from 3.10.1 to 3.12.1 Specifically a number of fields seem to have no affect: Chart.ganttWidthPercent, Chart.forceGanttWidthPercent Process.width, data.column.width None of these seem to have any affect now. please see: http://jsfiddle.net/david_a_benson/9gmd7b64/1/ http://jsfiddle.net/david_a_benson/9gmd7b64/2/ http://jsfiddle.net/david_a_benson/9gmd7b64/3/ The behavior I see, is that process width + data column width is fixed. If you try to go over that width then the data columns get smashed up.

I have a working Gantt chart that displays "Process" items. Each of the process items has a "status" that I would like to display as an icon as opposed to text. Is this possible? Please see attached image.

Hello, I'm new to Fusioncharts and trying to demo a Gantt chart by days populated from a database. The tasks can span across large periods of time but I always want the initial view to display 7 days prior to the current date through 22 days forward. I was thinking of creating a calendar table so i know when the start and stop date of every month based upon the current day. What is the best way to retrieve the data? Would it be to have a query for each set of data; one to retrieve the tasks, processes and then the calendar? I see a lot of examples like this: <categories> <category start="08/01/2014" end="08/31/2014" label="Aug '14" /> <category start="09/01/2014" end="09/30/2014" label="Sep '14" /> <category start="10/01/2014" end="10/31/2014" label="Oct '14" /> <category start="11/01/2014" end="11/30/2014" label="Nov '14" /> <category start="12/01/2014" end="12/31/2014" label="Dec '14" /> <category start="01/01/2015" end="01/31/2015" label="Jan '15" /> <category start="02/01/2015" end="02/28/2015" label="Feb '15" /> <category start="03/01/2015" end="03/31/2015" label="Mar '15" /> </categories> But if I want my labels to be day instead of a span of time then do I need the start date, end date and label to be the same, replicated for the number of days I want to show on the table. Like this? <category start="01/20/2016" end="01/20/2016" label="01/20/2016" /> Is this the best way to do this? Also, I was using the "scrolltodate" option so that the chart is always shows up with the current date by default, but that doesn't seem to working? Any thoughts? thank you! Jenise

Hi, We are in the midst of upgrading our FusionCharts' library to the latest version and found that the process label in Gantt chart no longer respects the indentation we put in the labels for Process. We used to have something like the following (chart was rendered in Flash): >Deliverable 1 >>Deliverable 1.1 >>>Activity 1.1.1 >>>Activity 1.1.2 > represents number of spaces we have in the text Any idea/suggestion on this would be much appreciated. Regards.

I'm using the gantt.swf, but I have one question, how to show vertical scroll in gantt, Well- intentioned people who help me to fix the issue? which attributes to be configed. Thanks !!!!!!

Hi, Is there a way to configure the Gantt chart to be in a right-to-left orientation? Thanks, Tomer

Hello everybody here , i'm just new here and this is my first chart i'm gonna to work with , in fact i need to get the chart's data from mysql data base any idea to start that instead of xml data????

Hi, Is is possible to control the height of the Gantt chart dynamically? I'm using the Gantt chart with pagination, so one time I have multiple processes to show and the other time I have just 1 process to show. In JavaScript I create the Gantt chart as follows: var chart = new FusionCharts( "Gantt", "ganttID", "100%", "100%"); // height = 100% When I have 12 processes (rows) then the chart will render at 611px, when I select only one row it will not alter the height. See attached screenshots to clarify my problem. Is it possible to let the chart determine it's own height depending on it's content? So something like height: auto... P.s. I know I can use some callbacks of the chart (like BeforeDataUpdate) where I can determine the number of rows myself and adjust the height of the chart manually. But I would like that to be some default functionality supported by FusionCharts...

Hi, I am using FusionWidgets XT (v3.3.1 - Service Release 2) (28th May, 2013) with Ruby on Rails version 3.0.19, Ruby version 1.9.2-p290 (for more details, please reference forum topic: http://forum.fusioncharts.com/topic/15081-server-side-export-javascript-rendered-gantt/) When i try to export a javascript Gantt chart, the SVG sent back to the server has zero-width task bars. So when I transcode the SVG to PNG using Batik, the task bars are missing from the rendered image. These are the attributes for my chart. Note that I must set taskBarFillMix to an empty string so that Batik does not choke on gradients. <chart dateFormat="yyyy/mm/dd" outputDateFormat="mm/dd/yyyy" showTaskLabels="0" showPercentLabel="0" showSlackAsFill="0" useVerticalScrolling="1" manageResize="1" animation="1" exportEnabled="1" exportShowMenuItem="0" exportHandler="/downloads/gantt" html5ExportHandler="/downloads/gantt" taskBarFillMix="" taskBarFillRatio=""> attributes for my task bars <task start="#{start_date}", end="#{end_date}" label="#{task_name}" color="#b2c8d9" processId="#{proc_name}" link="#{task_url}" Some of my gantt charts have grouped tasks and those attributes are <task start="#{start_date}" end=>"#{end_date}" label="#{group_name}" color="#000000" processId="#{proc_name}" showAsGroup=1 showLabel=0 topPadding="70%" showStartDate=1 showEndDate=1 /> Ruby on Rails controller class DownloadsController < ApplicationController def gantt # grab only SVG. Drill down charts may wrap SVG in HTML svg_match = params[:stream].to_s.match(/<svg.*<\/svg>/) svg_text = svg_match[0] rescue params[:stream].to_s # fix invalid attribute values coming from FusionChart SVG svg_text.gsub!(/text-anchor=\"undefined\"/, "text-anchor='start'") svg_text.gsub!(/shape-rendering=\"default\"/, "shape-rendering='auto'") svg_text.gsub!(/visibility=\"\"/, "visibility='inherit'") # write sanitized SVG to temp file tempfile = Tempfile.new( ActiveSupport::SecureRandom.hex(16) ) tempfile.write(svg_text) # SVG to PNG using Batik output_name = Rails.root.join( "public", "exports", "gantt.png") width = svg_text.match(/width=\"[\d]+\"/)[0].match(/[\d]+/)[0].to_i exec_str = "java -jar #{batik_path} -m image/png -d #{output_name} -w #{width} #{tempfile.path}" return_val = system( exec_str ) end end However, this fails to produce a useful PNG Gantt chart. The task bars are missing even though the Gantt chart in the client web browser looks perfect. After some digging through the SVG itself, I found that the SVG returned from the chart on the client browser has zero-width task bars. <rect x=\"2041.5\" y=\"163.5\" width=\"0\" height=\"9\" r=\"0\" rx=\"0\" ry=\"0\" fill=\"#b2c8d9\" stroke=\"#999999\" fill-opacity=\"1\" stroke-opacity=\"1\" stroke-width=\"1\" style=\"cursor: pointer;\"></rect> <rect x=\"2243.5\" y=\"187.5\" width=\"0\" height=\"9\" r=\"0\" rx=\"0\" ry=\"0\" fill=\"#b2c8d9\" stroke=\"#999999\" fill-opacity=\"1\" stroke-opacity=\"1\" stroke-width=\"1\" style=\"cursor: pointer;\"></rect> <rect x=\"2243.5\" y=\"211.5\" width=\"0\" height=\"9\" r=\"0\" rx=\"0\" ry=\"0\" fill=\"#b2c8d9\" stroke=\"#999999\" fill-opacity=\"1\" stroke-opacity=\"1\" stroke-width=\"1\" style=\"cursor: pointer;\"></rect> <rect x=\"2243.5\" y=\"235.5\" width=\"0\" height=\"9\" r=\"0\" rx=\"0\" ry=\"0\" fill=\"#b2c8d9\" stroke=\"#999999\" fill-opacity=\"1\" stroke-opacity=\"1\" stroke-width=\"1\" style=\"cursor: pointer;\"></rect> <rect x=\"2243.5\" y=\"259.5\" width=\"0\" height=\"9\" r=\"0\" rx=\"0\" ry=\"0\" fill=\"#b2c8d9\" stroke=\"#999999\" fill-opacity=\"1\" stroke-opacity=\"1\" stroke-width=\"1\" style=\"cursor: pointer;\"></rect> <rect x=\"2243.5\" y=\"283.5\" width=\"0\" height=\"9\" r=\"0\" rx=\"0\" ry=\"0\" fill=\"#b2c8d9\" stroke=\"#999999\" fill-opacity=\"1\" stroke-opacity=\"1\" stroke-width=\"1\" style=\"cursor: pointer;\"></rect> <rect x=\"2243.5\" y=\"307.5\" width=\"0\" height=\"9\" r=\"0\" rx=\"0\" ry=\"0\" fill=\"#b2c8d9\" stroke=\"#999999\" fill-opacity=\"1\" stroke-opacity=\"1\" stroke-width=\"1\" style=\"cursor: pointer;\"></rect> Also, the "r" attribute does not seem to mean anything for the rect element according the Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r and https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect. (for more details, please reference forum topic: http://forum.fusioncharts.com/topic/15081-server-side-export-javascript-rendered-gantt/) I have attached the what the Gantt chart looks like in the web browser. The blue task bars and the black grouped task bar are missing when i export to PNG.

Hi I am using pure Javascript (renderer = javascript) Gantt chart in Ruby On Rails (version 3.0.19). It looks fine in web browser. Now i want to export but i didn't want to use php on my Ruby on Rails server as instructed on this page: http://docs.fusioncharts.com/widgets/Contents/ExportingImage/ECPureJS.html Instead, from my Rails controller I pull in the SVG from the return parameters (i.e. params[:stream]) and pass it to batik to convert into png file as follows ruby on rails controller code: svg_match = params[:stream].to_s.match(/<svg.*<\/svg>/) svg_text = svg_match[0] rescue params[:stream].to_s tempfile = Tempfile.new( ActiveSupport::SecureRandom.hex(16) ) tempfile.write(svg_text) output_name = Rails.root.join( "public", "exports", "gantt.png") exec_str = "java -jar #{batik_path} -m image/png -d #{output_name} #{width} #{tempfile.path}" return_val = system( exec_str ) Everything looks good except that my task bars are missing! Process names show up on the left, dates show up on the top, and even the grid background of the gantt shows up. But there no task bars. What might I be doing wrong? As a second question, didn't the returned SVG on an export used to be in a parameter called "svg" as in params[:svg]? I am using version FusionWidgets XT (v3.3.1 - Service Release 2) (28th May, 2013) NOTE: In order for Batik to not choke on the gantt chart SVG I had to disable gradients on the task bars as follows <chart plotGradientColor='' taskBarFillMix='' ...>