Sign in to follow this  
ithurlow

[Bug] FusionCarts engine creates invalid XML IDs.

Recommended Posts

I noticed the "clipPath" ID field in the generated HTML does not conform to W3C standards in some cases. It appears this ID is generated by some kind of hash, which could start with a number. If the hash does start with a number, this creates invalid XML. This doesn't matter for web browsers, but I'm attempting to pull the SVG into a PDF using Batik, which complains that the XML is incorrect.

 

Here is an example:

<span id="myChart" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; width: 550px; height: 90px;"><svg height="90" version="1.1" width="550" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-349" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"><desc>Bar Chart</desc><defs>

<clipPath id="93E06B48-28A1-4AFB-BF62-4E09B356A36C">

<rect x="118" y="15" width="417" height="41" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-350-background"><rect x="0" y="0" width="550" height="90" stroke="none" fill-opacity="0.5" fill="#ffffff" rx="0" ry="0" style="stroke: none; fill-opacity: 0.5; fill: rgb(255, 255, 255);"></rect><rect x="0" y="0" width="550" height="90" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-357-canvas"><rect x="118" y="15" width="417" height="41" rx="0" ry="0" stroke-width="0" stroke="#545454" stroke-opacity="0" stroke-linejoin="miter" fill="none" style="stroke: rgb(84, 84, 84); stroke-opacity: 0; stroke-linejoin: miter; fill: none;"></rect><rect x="118" y="15" width="417" height="41" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="1" fill="#ffffff" style="stroke: none; fill-opacity: 1; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-360-axisbottom"><g class="raphael-group-363-y-axis-bands"></g><g class="raphael-group-369-x-axis-bands"><rect x="201.4" y="15" width="83.4" height="41" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="368.20000000000005" y="15" width="83.39999999999998" height="41" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-375-x-axis-bands"></g><g class="raphael-group-365-y-axis-lines"></g><g class="raphael-group-371-x-axis-lines"><path d="M201.4,15L201.4,56" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-dasharray="1,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; fill: none; shape-rendering: crispedges;"></path><path d="M284.8,15L284.8,56" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-dasharray="1,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; fill: none; shape-rendering: crispedges;"></path><path d="M368.20000000000005,15L368.20000000000005,56" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-dasharray="1,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; fill: none; shape-rendering: crispedges;"></path><path d="M451.6,15L451.6,56" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-dasharray="1,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; fill: none; shape-rendering: crispedges;"></path><path d="M535,15L535,56" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-dasharray="1,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; fill: none; shape-rendering: crispedges;"></path></g><g class="raphael-group-377-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"><text class="fusioncharts-label" fill="#333333" x="100" y="25.25" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: end; stroke: none;"><tspan dy="2.5" x="100">Test Bar</tspan></text><text class="fusioncharts-label" fill="#333333" x="100" y="45.75" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: end; stroke: none;"><tspan dy="2.5" x="100">Test No Bar</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels"><text class="fusioncharts-label" fill="#333333" x="118" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="118">0</tspan></text><text class="fusioncharts-label" fill="#333333" x="201.4" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="201.4">8</tspan></text><text class="fusioncharts-label" fill="#333333" x="284.8" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="284.8">16</tspan></text><text class="fusioncharts-label" fill="#333333" x="368.20000000000005" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="368.20000000000005">24</tspan></text><text class="fusioncharts-label" fill="#333333" x="451.6" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="451.6">32</tspan></text><text class="fusioncharts-label" fill="#333333" x="535" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="535">40</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-380-axis-name"></g><g class="raphael-group-394-axis-lines"><path d="M118,56.5L535,56.5" stroke="#000000" stroke-opacity="1" stroke-width="1" fill="none" style="stroke: rgb(0, 0, 0); stroke-opacity: 1; fill: none;"></path></g><g class="raphael-group-398-axis-lines"><path d="M117.5,15L117.5,57" stroke="#999999" stroke-opacity="1" stroke-width="1" fill="none" style="stroke: rgb(153, 153, 153); stroke-opacity: 1; fill: none;"></path></g></g><g class="raphael-group-351-dataset"><g class="raphael-group-400-bars" clip-path="url('#93E06B48-28A1-4AFB-BF62-4E09B356A36C')"><rect x="117" y="19" width="314" height="12" rx="0" ry="0" fill-opacity="1" fill="#536c82" stroke="#333333" stroke-opacity="1" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(83, 108, 130); stroke: rgb(51, 51, 51); stroke-opacity: 1; stroke-linejoin: miter;"></rect><rect x="117" y="40" width="1" height="12" rx="0" ry="0" fill-opacity="1" fill="#536c82" stroke="#333333" stroke-opacity="1" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(83, 108, 130); stroke: rgb(51, 51, 51); stroke-opacity: 1; stroke-linejoin: miter;"></rect></g></g><g class="raphael-group-361-axistop"><g class="raphael-group-362-y-axis-bands"></g><g class="raphael-group-368-x-axis-bands"></g><g class="raphael-group-374-x-axis-bands"></g><g class="raphael-group-364-y-axis-lines"></g><g class="raphael-group-370-x-axis-lines"></g><g class="raphael-group-376-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"><text class="fusioncharts-label" font-size="10px" text-anchor="start" fill-opacity="1" fill="#536c82" x="435" y="25" stroke="none" style="font-size: 10px; text-anchor: start; fill-opacity: 1; fill: rgb(83, 108, 130); stroke: none;"><tspan dy="3" x="435">30</tspan></text><text class="fusioncharts-label" font-size="10px" text-anchor="start" fill-opacity="1" fill="#536c82" x="120" y="46" stroke="none" style="font-size: 10px; text-anchor: start; fill-opacity: 1; fill: rgb(83, 108, 130); stroke: none;"><tspan dy="3" x="120">0</tspan></text></g><g class="raphael-group-352-hot"><rect x="117" y="19" width="314" height="12.299999999999999" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="stroke: rgb(192, 192, 192); stroke-opacity: 0.000001; fill-opacity: 0.000001; fill: rgb(192, 192, 192);"></rect><rect x="115" y="40" width="5" height="12.299999999999999" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="stroke: rgb(192, 192, 192); stroke-opacity: 0.000001; fill-opacity: 0.000001; fill: rgb(192, 192, 192);"></rect></g><g class="raphael-group-355-buttons"></g></svg></span>

I ran this code through this validator, and it failed on the ID section. This was the only way I was able to find the issue. Please advise how I can remedy this.

 

Thank you.

Edited by ithurlow

Share this post


Link to post
Share on other sites

Sorry, forgot to include the version and other details:

 

/*
 FusionCharts JavaScript Library
 Copyright FusionCharts Technologies LLP
 License Information at <http://www.fusioncharts.com/license>
 FusionCharts JavaScript Library
 Copyright FusionCharts Technologies LLP
 License Information at <http://www.fusioncharts.com/license>
 
 @version 3.4.1
 
 @attributions (infers respective third-party copyrights)
 Raphael 2.1.0 (modified as 'Red Raphael') <http://raphaeljs.com/license.html>
 Firebug Lite 1.3.0 <http://getfirebug.com/firebuglite>
*/

Share this post


Link to post
Share on other sites

Hi,

 

Please upgrade to the latest version of FusionCharts which you can use with third party softwares like InkScape and ImageMagick to get PDF from SVG.

 

The Batik implemenation had some issue so we have stopped supporting it in the latest versions.

 

Please check here for InkScape:

https://inkscape.org/en/doc/inkscape-man.html

 

Also you may download the latest version of FusionCharts here:

http://www.fusioncharts.com/

 

Thanks.

Share this post


Link to post
Share on other sites

Sorry for the confusion, I'm not using Batik directly, but the framework that is creating my PDF export is using it under the hood. All I need for this to work is a patch that reliably creates HTML IDs that start with an "A-Z" alpha character.

 

Here's an example of how the highcharts.js engine does this (source):

/**
	 * Define a clipping rectangle
	 * @param {String} id
	 * @param {Number} x
	 * @param {Number} y
	 * @param {Number} width
	 * @param {Number} height
	 */
	clipRect: function (x, y, width, height) {
		var wrapper,
			id = PREFIX + idCounter++,

			clipPath = this.createElement('clipPath').attr({
				id: id
			}).add(this.defs);

		wrapper = this.rect(x, y, width, height, 0).add(clipPath);
		wrapper.id = id;
		wrapper.clipPath = clipPath;
		wrapper.count = 0;

		return wrapper;
	},

They are using a defined prefix for any ID creation, which would solve this issue.

 

Thank you.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this