Embedding jqxChart in a svg document

[carloParticipant]

Hello,

is it possible to use the jqxChart widget inside a svg document ? We use pure svg documents for displaying process data (pumps, pipes etc.).

Best Regards
Carlo

[DimitarParticipant]

Hello Carlo,

To make a chart render using SVG, please set its renderEngine property to “SVG”.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[carloParticipant]

Hallo Dimitar,

I tried embedding a jqxChart in an svg document. But I am gettin a jquery error:
SyntaxError: An invalid or illegal string was specifie
tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, “<$1></$2>” ) + wrap[ 2 ];

Here is my svg code:

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?>
<!– Created with Inkscape (http://www.inkscape.org/) –>
<?xml-stylesheet type=”text/css” href=”../../scripts/jqwidgets/styles/jqx.base.css” ?>
<svg
xmlns:xlink=”http://www.w3.org/1999/xlink”
xmlns:dc=”http://purl.org/dc/elements/1.1/”
xmlns:cc=”http://creativecommons.org/ns#”
xmlns:rdf=”http://www.w3.org/1999/02/22-rdf-syntax-ns#”
xmlns:svg=”http://www.w3.org/2000/svg”
xmlns=”http://www.w3.org/2000/svg”
xmlns:sodipodi=”http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd”
xmlns:inkscape=”http://www.inkscape.org/namespaces/inkscape”
width=”297mm”
height=”210mm”
id=”svg2985″
version=”1.1″
inkscape:version=”0.48.4 r9939″
sodipodi:docname=”Neues Dokument 2″>
<defs
id=”defs2987″ />
<sodipodi:namedview
inkscape:document-units=”mm”
pagecolor=”#ffffff”
bordercolor=”#666666″
borderopacity=”1.0″
inkscape:pageopacity=”0.0″
inkscape:pageshadow=”2″
inkscape:zoom=”0.43415836″
inkscape:cx=”490″
inkscape:cy=”380″
inkscape:current-layer=”layer1″
id=”namedview2989″
showgrid=”false”
inkscape:window-width=”1553″
inkscape:window-height=”710″
inkscape:window-x=”130″
inkscape:window-y=”130″
inkscape:window-maximized=”0″ />
<script
xlink:href=”../../scripts/jquery-2.0.2.js”
id=”script3″
type=”text/ecmascript” />
<script
xlink:href=”../../scripts/jqwidgets/jqxcore.js”
id=”script4″
type=”text/ecmascript” />
<script
xlink:href=”../../scripts/jqwidgets/jqxchart.js”
id=”script5″
type=”text/ecmascript” />
<script
xlink:href=”../../scripts/jqwidgets/jqxdata.js”
id=”script6″
type=”text/ecmascript” />
<script
type=”text/ecmascript”
id=”script7″>
this.addEventListener(‘load’, function ()
{
var sampleData = [
{ Country: ‘China’, Population: 1347350000, Percent: 19.18},
{ Country: ‘India’, Population: 1210193422, Percent: 17.22},
{ Country: ‘USA’, Population: 313912000, Percent: 4.47},
{ Country: ‘Indonesia’, Population: 237641326, Percent: 3.38},
{ Country: ‘Brazil’, Population: 192376496, Percent: 2.74}];

var settings = {
renderEngine: ‘SVG’,
title: “Top 5 most populated countries”,
description: “Statistics for 2011″,
showLegend: true,
enableAnimations: true,
padding: { left: 20, top: 5, right: 20, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
categoryAxis:
{
dataField: ‘Country’,
showGridLines: true,
flip: false
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘column’,
orientation: ‘horizontal’,
columnsGapPercent: 100,
toolTipFormatSettings: { thousandsSeparator: ‘,’ },
valueAxis:
{
flip: true,
unitInterval: 100000000,
maxValue: 1500000000,
displayValueAxis: true,
description: ”,
formatFunction: function (value) {
return parseInt(value / 1000000);
}
},
series: [
{ dataField: ‘Population’, displayText: ‘Population (millions)’ }
]
}
]
};
$(‘#chartContainer’).jqxChart(settings);

}, false);
</script>
<metadata
id=”metadata2991″>
<rdf:RDF>
<cc:Work
rdf:about=””>
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource=”http://purl.org/dc/dcmitype/StillImage” />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label=”Layer 1″
inkscape:groupmode=”layer”
id=”layer1″>
<g
id=”chartContainer”>
</g>
</g>
</svg>

[DimitarParticipant]

Hi Carlo,

The jqxChart widget can be displayed in an HTML page, as explained in the Getting Started tutorial. However, we cannot provide you with any guidance about rendering the chart in SVG documents, which is currently not supported and may or may not be achievable.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts