Search the Community

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.