[Bug] FusionCarts engine creates invalid XML IDs.

[ithurlow]

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 March 31, 2015 by ithurlow

[ithurlow]

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>

 JSON v2 <http://www.JSON.org/js.html>

 Firebug Lite 1.3.0 <http://getfirebug.com/firebuglite>

*/

[Nabajeet]

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.

[ithurlow]

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.

[Nabajeet]

Hi,

 

Thanks for sharing the solution.

 

It will be helpful for others facing the issue.

 

Thanks.