jQuery UI Widgets Forums Chart Embedding jqxChart in a svg document

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 10 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • carlo
    Participant

    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


    Dimitar
    Participant

    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/


    carlo
    Participant

    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>

    Embedding jqxChart in a svg document #55185

    Dimitar
    Participant

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.