Sign in to follow this  
Followers 0
rouven

Positions Of The Svg Element Are Calculated Incorrectly

By rouven, in Javascript Problems

Recommended Posts

rouven   

rouven
Posted (edited)

Hi,

I'm trying to render (serverside) a chart with nodeJS (with jsDOM environment). It runs without Errors. I fetch the SVG via the export function, but all SVG Elements have a wrong position. (See Attachment).

FusionCharts.debugMode.enabled(true);
FusionCharts.debugMode.outputTo( function() { console.log(arguments); } );

var chartConfig = {
                   	"registerWithJS" : true,
                   	"marker": {"symbol": 'cirlce'},
                   	"renderAt" : "container",
                   	"showCheckbox": "0",
                   	"showToolTip": "0",
		"type": "MSBar2D",
                   	"animation": "0",
					"id": "testChart",
					"width": "860",
					"height": "300",
                   	"dataFormat": "json",
                   	"debugMode": true,
					"renderer": "javascript",
                   	"dataFormat": "json",
                   	"exportEnabled": '1',
                   	"forExport": "1"
};
var chartObj = new FusionCharts(chartConfig);

FusionCharts.addEventListener("Rendered", function()  {
chartObj.exportChart();
})

chartObj.setJSONData('{"chart":{"showToolTip": "0", "forExport": "1", "caption":"Headline","xaxisname":"","yaxisname":"Prozentwerte","showvalues":"0","numberprefix":"","decimals":"2","sdecimals":"2","forcedecimals":"0","decimalseparator":",","useroundedges":"1","connectNullData":"0","exportEnabled":"1","exportAtClient":"1","exportShowMenuItem":"0","html5ExportHandler":"/export/index.php"},"categories":[{"category":[{"label":"Mark1"},{"label":"Mark2"},{"label":"Mark3"}]}],"dataset":[{"seriesname":"Serie1", "animation": "0","showCheckbox": "0","data":[{"value":"5.3"},{"value":"43.4"},{"value":"18.1"}]},{"seriesname":"Serie2","animation": "0","showCheckbox": "0","data":[{"value":"93.4"},{"value":"8.2"},{"value":"20.1"}]},{"seriesname":"Serie3","animation": "0","showCheckbox": "0","data":[{"value":"1.2"},{"value":"4.3"},{"value":"58.4"}]}, {"seriesname":"Serie4","animation": "0","showCheckbox": "0", "data":[{"value":"0.1"},{"value":"44.1"},{"value":"3.3"}]}]}')
chartObj.render('container');

Generated SVG:

<svg xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400"><defs><linearGradient id="highcharts-1" gradientUnits="objectBoundingBox" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#AFD8F8" stop-opacity="1"></stop><stop offset="30%" stop-color="#AFD8F8" stop-opacity="1"></stop><stop offset="60%" stop-color="#dff0fc" stop-opacity="1"></stop><stop offset="90%" stop-color="#AFD8F8" stop-opacity="1"></stop><stop offset="100%" stop-color="#AFD8F8" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-2" gradientUnits="objectBoundingBox" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#F6BD0F" stop-opacity="1"></stop><stop offset="30%" stop-color="#F6BD0F" stop-opacity="1"></stop><stop offset="60%" stop-color="#fce59f" stop-opacity="1"></stop><stop offset="90%" stop-color="#F6BD0F" stop-opacity="1"></stop><stop offset="100%" stop-color="#F6BD0F" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-3" gradientUnits="objectBoundingBox" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#8BBA00" stop-opacity="1"></stop><stop offset="30%" stop-color="#8BBA00" stop-opacity="1"></stop><stop offset="60%" stop-color="#d1e499" stop-opacity="1"></stop><stop offset="90%" stop-color="#8BBA00" stop-opacity="1"></stop><stop offset="100%" stop-color="#8BBA00" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-4" gradientUnits="objectBoundingBox" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#FF8E46" stop-opacity="1"></stop><stop offset="30%" stop-color="#FF8E46" stop-opacity="1"></stop><stop offset="60%" stop-color="#ffd2b5" stop-opacity="1"></stop><stop offset="90%" stop-color="#FF8E46" stop-opacity="1"></stop><stop offset="100%" stop-color="#FF8E46" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-5" gradientUnits="objectBoundingBox" x1="50%" y1="100%" x2="50%" y2="0%"><stop offset="0%" stop-color="#CBCBCB" stop-opacity="0.5"></stop><stop offset="100%" stop-color="#E9E9E9" stop-opacity="0.5"></stop></linearGradient><clipPath id="highcharts-6"><rect rx="0" ry="0" fill="none" x="1" y="1" width="598" height="398" stroke-width="0"></rect></clipPath><clipPath id="highcharts-7"><rect rx="0" ry="0" fill="none" x="0" y="-17" width="400" height="600" stroke-width="0"></rect></clipPath><linearGradient id="highcharts-8" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#83a2ba" stop-opacity="1"></stop><stop offset="10%" stop-color="#ebf6fe" stop-opacity="1"></stop><stop offset="23%" stop-color="#8cacc6" stop-opacity="1"></stop><stop offset="80%" stop-color="#cbe6fa" stop-opacity="1"></stop><stop offset="100%" stop-color="#8cacc6" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-9" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#83a2ba" stop-opacity="1"></stop><stop offset="10%" stop-color="#ebf6fe" stop-opacity="1"></stop><stop offset="23%" stop-color="#8cacc6" stop-opacity="1"></stop><stop offset="80%" stop-color="#cbe6fa" stop-opacity="1"></stop><stop offset="100%" stop-color="#8cacc6" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-10" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#83a2ba" stop-opacity="1"></stop><stop offset="10%" stop-color="#ebf6fe" stop-opacity="1"></stop><stop offset="23%" stop-color="#8cacc6" stop-opacity="1"></stop><stop offset="80%" stop-color="#cbe6fa" stop-opacity="1"></stop><stop offset="100%" stop-color="#8cacc6" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-11" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#b88d0b" stop-opacity="1"></stop><stop offset="10%" stop-color="#fdefc3" stop-opacity="1"></stop><stop offset="23%" stop-color="#c4970c" stop-opacity="1"></stop><stop offset="80%" stop-color="#f9d463" stop-opacity="1"></stop><stop offset="100%" stop-color="#c4970c" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-12" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#b88d0b" stop-opacity="1"></stop><stop offset="10%" stop-color="#fdefc3" stop-opacity="1"></stop><stop offset="23%" stop-color="#c4970c" stop-opacity="1"></stop><stop offset="80%" stop-color="#f9d463" stop-opacity="1"></stop><stop offset="100%" stop-color="#c4970c" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-13" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#b88d0b" stop-opacity="1"></stop><stop offset="10%" stop-color="#fdefc3" stop-opacity="1"></stop><stop offset="23%" stop-color="#c4970c" stop-opacity="1"></stop><stop offset="80%" stop-color="#f9d463" stop-opacity="1"></stop><stop offset="100%" stop-color="#c4970c" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-14" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#688b00" stop-opacity="1"></stop><stop offset="10%" stop-color="#e2eec0" stop-opacity="1"></stop><stop offset="23%" stop-color="#6f9400" stop-opacity="1"></stop><stop offset="80%" stop-color="#b3d259" stop-opacity="1"></stop><stop offset="100%" stop-color="#6f9400" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-15" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#688b00" stop-opacity="1"></stop><stop offset="10%" stop-color="#e2eec0" stop-opacity="1"></stop><stop offset="23%" stop-color="#6f9400" stop-opacity="1"></stop><stop offset="80%" stop-color="#b3d259" stop-opacity="1"></stop><stop offset="100%" stop-color="#6f9400" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-16" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#688b00" stop-opacity="1"></stop><stop offset="10%" stop-color="#e2eec0" stop-opacity="1"></stop><stop offset="23%" stop-color="#6f9400" stop-opacity="1"></stop><stop offset="80%" stop-color="#b3d259" stop-opacity="1"></stop><stop offset="100%" stop-color="#6f9400" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-17" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#bf6a34" stop-opacity="1"></stop><stop offset="10%" stop-color="#ffe3d1" stop-opacity="1"></stop><stop offset="23%" stop-color="#cc7138" stop-opacity="1"></stop><stop offset="80%" stop-color="#ffb587" stop-opacity="1"></stop><stop offset="100%" stop-color="#cc7138" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-18" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#bf6a34" stop-opacity="1"></stop><stop offset="10%" stop-color="#ffe3d1" stop-opacity="1"></stop><stop offset="23%" stop-color="#cc7138" stop-opacity="1"></stop><stop offset="80%" stop-color="#ffb587" stop-opacity="1"></stop><stop offset="100%" stop-color="#cc7138" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-19" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#bf6a34" stop-opacity="1"></stop><stop offset="10%" stop-color="#ffe3d1" stop-opacity="1"></stop><stop offset="23%" stop-color="#cc7138" stop-opacity="1"></stop><stop offset="80%" stop-color="#ffb587" stop-opacity="1"></stop><stop offset="100%" stop-color="#cc7138" stop-opacity="1"></stop></linearGradient></defs><g class="highcharts-tracker" zindex="9" transform="translate(585,NaN) rotate(90) scale(-1,1)" width="568" height="NaN"><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="537" width="1" height="31" stroke-width="0" istracker="1341906831960" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="321" width="1" height="247" stroke-width="0" istracker="1341906831960" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="465" width="1" height="103" stroke-width="0" istracker="1341906831960" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="37" width="1" height="531" stroke-width="0" istracker="1341906831999" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="521" width="1" height="47" stroke-width="0" istracker="1341906831999" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="453" width="1" height="115" stroke-width="0" istracker="1341906831999" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="561" width="1" height="7" stroke-width="0" istracker="1341906832032" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="543" width="1" height="25" stroke-width="0" istracker="1341906832032" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="236" width="1" height="332" stroke-width="0" istracker="1341906832032" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="567" width="1" height="1" stroke-width="0" istracker="1341906832066" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="317" width="1" height="251" stroke-width="0" istracker="1341906832066" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="549" width="1" height="19" stroke-width="0" istracker="1341906832066" fill-opacity="0.002" visibility="" zindex="1" style=""></rect></g><text x="301" y="28" style="font-family: verdana; font-size: 13px; color: #555555; font-weight: bold; line-height: 14px; fill: #555555;" text-anchor="middle" class="highcharts-title" zindex="1"><tspan x="0">Headline</tspan></text><g class="highcharts-legend" zindex="10" transform="translate(-113,377)"><text x="0" y="0" style="font-family: verdana; font-size: 10px; cursor: pointer; color: #555555; line-height: 14px; fill: #555555;" zindex="2" transform="translate(23,22)"><tspan x="0">Serie1</tspan></text><path d="M -16 -7 L -10.600000000000001 -7 -10.600000000000001 -4.75 -16 -4.75 -16 -3.625 -7 -3.625 -7 -1.375 -16 -1.375 -16 -0.25 -13.3 -0.25 -13.3 2 -16 2 Z" fill="url('#highcharts-1')" stroke-width="0.5" zindex="3" stroke="#698194" style="_cursor: hand; cursor: pointer;" transform="translate(23,14)"></path><text x="0" y="0" style="font-family: verdana; font-size: 10px; cursor: pointer; color: #555555; line-height: 14px; fill: #555555;" zindex="2" transform="translate(23,37)"><tspan x="0">Serie2</tspan></text><path d="M -16 -7 L -10.600000000000001 -7 -10.600000000000001 -4.75 -16 -4.75 -16 -3.625 -7 -3.625 -7 -1.375 -16 -1.375 -16 -0.25 -13.3 -0.25 -13.3 2 -16 2 Z" fill="url('#highcharts-2')" stroke-width="0.5" zindex="3" stroke="#937109" style="_cursor: hand; cursor: pointer;" transform="translate(23,29)"></path><text x="0" y="0" style="font-family: verdana; font-size: 10px; cursor: pointer; color: #555555; line-height: 14px; fill: #555555;" zindex="2" transform="translate(23,52)"><tspan x="0">Serie3</tspan></text><path d="M -16 -7 L -10.600000000000001 -7 -10.600000000000001 -4.75 -16 -4.75 -16 -3.625 -7 -3.625 -7 -1.375 -16 -1.375 -16 -0.25 -13.3 -0.25 -13.3 2 -16 2 Z" fill="url('#highcharts-3')" stroke-width="0.5" zindex="3" stroke="#536f00" style="_cursor: hand; cursor: pointer;" transform="translate(23,44)"></path><text x="0" y="0" style="font-family: verdana; font-size: 10px; cursor: pointer; color: #555555; line-height: 14px; fill: #555555;" zindex="2" transform="translate(23,67)"><tspan x="0">Serie4</tspan></text><path d="M -16 -7 L -10.600000000000001 -7 -10.600000000000001 -4.75 -16 -4.75 -16 -3.625 -7 -3.625 -7 -1.375 -16 -1.375 -16 -0.25 -13.3 -0.25 -13.3 2 -16 2 Z" fill="url('#highcharts-4')" stroke-width="0.5" zindex="3" stroke="#99552a" style="_cursor: hand; cursor: pointer;" transform="translate(23,59)"></path><rect rx="3" ry="3" fill="none" x="0" y="0" width="828" height="8" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" fill-opacity="1" transform="translate(1,1)" visibility=""></rect><rect rx="3" ry="3" fill="none" x="0" y="0" width="828" height="8" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" fill-opacity="1" transform="translate(1,1)" visibility=""></rect><rect rx="3" ry="3" fill="none" x="0" y="0" width="828" height="8" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" fill-opacity="1" transform="translate(1,1)" visibility=""></rect><rect rx="3" ry="3" fill="rgb(255,255,255)" x="0" y="0" width="828" height="8" stroke-width="0" stroke-opacity="1" stroke="rgb(84,84,84)" fill-opacity="1" visibility=""></rect></g><g class="highcharts-axis" zindex="7"></g><g class="highcharts-grid" zindex="1"></g><g class="highcharts-axis" zindex="7"></g><g class="highcharts-grid" zindex="1"></g><text x="301" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; font-weight: bold; line-height: 14px; fill: #555555;" zindex="7" text-anchor="middle"><tspan x="0">Prozentwerte</tspan></text><g class="highcharts-axis" zindex="7"></g><g class="highcharts-grid" zindex="1"></g><rect rx="0" ry="0" fill="url('#highcharts-5')" x="0.5" y="0.5" width="599" height="399" stroke-width="1" stroke-opacity="0.5" stroke="rgb(118,117,117)"></rect><rect rx="3" ry="3" fill="none" x="17" y="0" width="568" height="0" stroke-width="5" fill-opacity="1" stroke="rgb(0,0,0)" stroke-opacity="0.06" transform="translate(1,1)"></rect><rect rx="3" ry="3" fill="none" x="17" y="0" width="568" height="0" stroke-width="3" fill-opacity="1" stroke="rgb(0,0,0)" stroke-opacity="0.12" transform="translate(1,1)"></rect><rect rx="3" ry="3" fill="none" x="17" y="0" width="568" height="0" stroke-width="1" fill-opacity="1" stroke="rgb(0,0,0)" stroke-opacity="0.18" transform="translate(1,1)"></rect><rect rx="3" ry="3" fill="#FFFFFF" x="17" y="0" width="568" height="0" stroke-width="0" fill-opacity="1"></rect><path d="M 0 0" fill="rgb(0,0,0)" fill-opacity="0"></path><path d="M 0 0" fill="rgb(0,0,0)" fill-opacity="0"></path><path d="M 0 0" fill="rgb(0,0,0)" fill-opacity="0"></path><path d="M 0 0" fill="none" stroke-opacity="0" stroke="rgb(0,0,0)" stroke-width="0.1" zindex="1"></path><path d="M 0 0" fill="none" stroke-opacity="0.4" stroke="rgb(113,113,112)" stroke-width="1" zindex="2"></path><path d="M 0 0" fill="none" stroke-opacity="0.4" stroke="rgb(113,113,112)" stroke-width="1" zindex="2"></path><path d="M 0 0" fill="none" stroke-opacity="0.4" stroke="rgb(113,113,112)" stroke-width="1" zindex="2"></path><path d="M 0 0" fill="none" stroke-opacity="0.4" stroke="rgb(113,113,112)" stroke-width="1" zindex="2"></path><path d="M 0 0" fill="none" stroke-opacity="0" stroke="rgb(0,0,0)" stroke-width="0.1" zindex="2"></path><path d="M 0 0" fill="rgb(118,117,117)" fill-opacity="0.1" zindex="1"></path><path d="M 0 0" fill="rgb(118,117,117)" fill-opacity="0.1" zindex="1"></path><g class="highcharts-series-group" zindex="3"><g class="highcharts-series" width="568" height="NaN" transform="translate(585,NaN) rotate(90) scale(-1,1)" clip-path="url('#highcharts-7')" visibility=""><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-8')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#7a97ad" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-9')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#7a97ad" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-10')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#7a97ad" r="1"></rect></g><g class="highcharts-series" width="568" height="NaN" transform="translate(585,NaN) rotate(90) scale(-1,1)" clip-path="url('#highcharts-7')" visibility=""><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-11')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#ac840a" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-12')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#ac840a" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-13')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#ac840a" r="1"></rect></g><g class="highcharts-series" width="568" height="NaN" transform="translate(585,NaN) rotate(90) scale(-1,1)" clip-path="url('#highcharts-7')" visibility=""><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-14')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#618200" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-15')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#618200" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-16')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#618200" r="1"></rect></g><g class="highcharts-series" width="568" height="NaN" transform="translate(585,NaN) rotate(90) scale(-1,1)" clip-path="url('#highcharts-7')" visibility=""><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-17')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#b26331" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-18')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#b26331" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-19')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#b26331" r="1"></rect></g></g><g class="highcharts-data-labels" visibility="" zindex="6" transform="translate(17,0)"><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text></g><g class="highcharts-data-labels" visibility="" zindex="6" transform="translate(17,0)"><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text></g><g class="highcharts-data-labels" visibility="" zindex="6" transform="translate(17,0)"><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text></g><g class="highcharts-data-labels" visibility="" zindex="6" transform="translate(17,0)"><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text></g></svg>

Has anyone a suggestion why the positions and some heights are calculated incorrectly?

THX

post-28420-0-12204000-1341907872_thumb.png

Edited by rouven

Share this post

Link to post
Share on other sites

Charles.Essien   

Charles.Essien
Posted
Hi,

I'm trying to render (serverside) a chart with nodeJS (with jsDOM environment). It runs without Errors. I fetch the SVG via the export function, but all SVG Elements have a wrong position. (See Attachment).

...

Has anyone a suggestion why the positions and some heights are calculated incorrectly?

 

Hi, we're having a very similar issue using Env.js and rhino (see here). We believe its because the DOM you're using and we're using arent completely up to grade A standard, and FusionCharts miscalculates values for styling. You could try adjusting the cosmetic properties mentioned in the API (padding, margin, etc) manually and seeing if that solves your problem.

 

- Charles

Share this post

Link to post
Share on other sites

Guest Sumedh   

Guest Sumedh
Posted

Hi, we're having a very similar issue using Env.js and rhino (see here). We believe its because the DOM you're using and we're using arent completely up to grade A standard, and FusionCharts miscalculates values for styling. You could try adjusting the cosmetic properties mentioned in the API (padding, margin, etc) manually and seeing if that solves your problem.

 

- Charles

 

Hi Charles,

 

We are looking into this. We will get back to you shortly.

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  
Followers 0
Go To Topic Listing Javascript Problems