jQuery UI Widgets Forums Chart chart with xml ?

Tagged: , , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  thecatz 7 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • chart with xml ? #8096

    thecatz
    Member

    hello,

    i’m a noob with jquerry, and i need to creat a chart, a barchart for exemple. I’ve downloaded the package but i really need help to import data from xml to this chart plugin.

    My xml, is like this :

    Hours
    Visits

    <Row Dim1="0h" Metric1="3454"
    <Row Dim1="1h" Metric1="1735"

    usually i use pchart on php to creat some bar chart, but i realy want to use this js plugin, can someone help, and explain me how to make this ( i’m a really noob on js ! )

    Thx a lot

    • This topic was modified 7 years, 8 months ago by  thecatz.
    • This topic was modified 7 years, 8 months ago by  thecatz.
    • This topic was modified 7 years, 8 months ago by  thecatz.
    chart with xml ? #8139

    Dimitar
    Participant

    Hello thecatz,

    Please take a look at the jqxChart documentation and more specifically Chart Data Sources, where it is explained how to bind the chart to multiple types of data, including xml.

    Best Regards,
    Dimitar

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

    chart with xml ? #8168

    thecatz
    Member

    thx, for your help. i’v try the code, but the chart doesn’t display ? i’v only change the path for the css and script.
    change : jquery-1.7.1.min.js to jquery-1.7.2.min.js

    my test page : http://www.ledvdclub.powa.fr/chart/test.html

    do i miss someting ?

    • This reply was modified 7 years, 8 months ago by  thecatz.
    chart with xml ? #8170

    Dimitar
    Participant

    Hi thecatz,

    Here is a working example. Please note that the dataField property is case sensitive.

    <html lang="en">
    <head>
    <title id='Description'>jqxChart Line Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // prepare the data
    var source = {
    datafields: [{ name: 'date' }, { name: 'quantity' }, { name: 'description' }],
    root: "orders",
    record: "order",
    datatype: "xml",
    url: 'xmldata.xml'
    }
    var dataAdapter = new $.jqx.dataAdapter(source);
    // prepare jqxChart settings
    var settings = {
    title: "Order Details",
    showLegend: true,
    source: dataAdapter,
    categoryAxis: {
    dataField: 'date',
    formatFunction: function (value) {
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    return months[new Date(value).getMonth()];
    },
    showGridLines: true
    },
    colorScheme: 'scheme01',
    seriesGroups: [{
    type: 'column',
    valueAxis: {
    displayValueAxis: true,
    axisSize: 'auto',
    tickMarksColor: '#888888'
    },
    series: [{ dataField: 'quantity', displayText: 'quantity' }]
    }]
    };
    // setup the chart
    $('#jqxChart').jqxChart(settings);
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxChart' style="width: 680px; height: 400px">
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    chart with xml ? #8318

    thecatz
    Member

    thx a lot, that’s work fine. i’ve tried to make the same chart with my own xml.

    Is not a simpe xml, it is a bit particular, that why i need your help too :

    <?xml version="1.0" encoding="utf-8"?>
    <Export>
    <Columns>
    <Dim1>Heures</Dim1>
    <Metric1>Visites</Metric1>
    <Var1>Visites var</Var1>
    <Diff1>Visites Diff</Diff1>
    <Rat1>Visites rat</Rat1>
    <Metric12>% Visites</Metric12>
    <Var12>% Visites var</Var12>
    <Diff12>% Visites Diff</Diff12>
    <Metric2>Pages vues</Metric2>
    <Var2>Pages vues var</Var2>
    <Diff2>Pages vues Diff</Diff2>
    <Rat2>Pages vues rat</Rat2>
    <Metric5>Pages vues / visites</Metric5>
    <Var5>Pages vues / visites var</Var5>
    <Diff5>Pages vues / visites Diff</Diff5>
    </Columns>
    <Row Dim1="0h" Metric1="4864" Var1="" Diff1="4864" Rat1="0,0206478781163905" Metric12="0,0206478781163905" Var12="" Diff12="-2147483648" Metric2="121643" Var2="" Diff2="121643" Rat2="0,111153347447986" Metric5="25,0088404605263" Var5="" Diff5="25,0088404605263" />
    <Row Dim1="1h" Metric1="2660" Var1="" Diff1="2660" Rat1="0,0112918083449011" Metric12="0,0112918083449011" Var12="" Diff12="-2147483648" Metric2="7371" Var2="" Diff2="7371" Rat2="0,00673537584603393" Metric5="2,77105263157895" Var5="" Diff5="2,77105263157895" />
    <Row Dim1="2h" Metric1="2200" Var1="" Diff1="2200" Rat1="0,00933908960856479" Metric12="0,00933908960856479" Var12="" Diff12="-2147483648" Metric2="7209" Var2="" Diff2="7209" Rat2="0,00658734560765956" Metric5="3,27681818181818" Var5="" Diff5="3,27681818181818" />
    <Row Dim1="3h" Metric1="1789" Var1="" Diff1="1789" Rat1="0,00759437786805564" Metric12="0,00759437786805564" Var12="" Diff12="-2147483648" Metric2="5728" Var2="" Diff2="5728" Rat2="0,00523405682350866" Metric5="3,20178870877585" Var5="" Diff5="3,20178870877585" />
    <Row Dim1="4h" Metric1="1805" Var1="" Diff1="1805" Rat1="0,0076622985197543" Metric12="0,0076622985197543" Var12="" Diff12="-2147483648" Metric2="5521" Var2="" Diff2="5521" Rat2="0,00504490707447474" Metric5="3,05872576177285" Var5="" Diff5="3,05872576177285" />
    <Row Dim1="5h" Metric1="1903" Var1="" Diff1="1903" Rat1="0,00807831251140855" Metric12="0,00807831251140855" Var12="" Diff12="-2147483648" Metric2="18007" Var2="" Diff2="18007" Rat2="0,0164542006321439" Metric5="9,46242774566474" Var5="" Diff5="9,46242774566474" />
    <Row Dim1="6h" Metric1="4012" Var1="" Diff1="4012" Rat1="0,0170311034134373" Metric12="0,0170311034134373" Var12="" Diff12="-2147483648" Metric2="19149" Var2="" Diff2="19149" Rat2="0,0174977224359929" Metric5="4,77293120638086" Var5="" Diff5="4,77293120638086" />
    <Row Dim1="7h" Metric1="9411" Var1="" Diff1="9411" Rat1="0,0399500783210015" Metric12="0,0399500783210015" Var12="" Diff12="-2147483648" Metric2="43172" Var2="" Diff2="43172" Rat2="0,0394491447598666" Metric5="4,58739772606524" Var5="" Diff5="4,58739772606524" />
    <Row Dim1="8h" Metric1="20074" Var1="" Diff1="20074" Rat1="0,0852149476374226" Metric12="0,0852149476374226" Var12="" Diff12="-2147483648" Metric2="105566" Var2="" Diff2="105566" Rat2="0,096462716939685" Metric5="5,25884228355086" Var5="" Diff5="5,25884228355086" />
    <Row Dim1="9h" Metric1="26699" Var1="" Diff1="26699" Rat1="0,113338342481396" Metric12="0,113338342481396" Var12="" Diff12="-2147483648" Metric2="161494" Var2="" Diff2="161494" Rat2="0,147567872321178" Metric5="6,04869096220832" Var5="" Diff5="6,04869096220832" />
    <Row Dim1="10h" Metric1="28808" Var1="" Diff1="28808" Rat1="0,122291133383425" Metric12="0,122291133383425" Var12="" Diff12="-2147483648" Metric2="137822" Var2="" Diff2="137822" Rat2="0,125937182180449" Metric5="4,78415717856151" Var5="" Diff5="4,78415717856151" />
    <Row Dim1="11h" Metric1="32459" Var1="" Diff1="32459" Rat1="0,137789777092911" Metric12="0,137789777092911" Var12="" Diff12="-2147483648" Metric2="115790" Var2="" Diff2="115790" Rat2="0,105805069761534" Metric5="3,56726947841893" Var5="" Diff5="3,56726947841893" />
    <Row Dim1="12h" Metric1="22911" Var1="" Diff1="22911" Rat1="0,09725812819174" Metric12="0,09725812819174" Var12="" Diff12="-2147483648" Metric2="84039" Var2="" Diff2="84039" Rat2="0,0767920568070609" Metric5="3,66806337567108" Var5="" Diff5="3,66806337567108" />
    <Row Dim1="13h" Metric1="22772" Var1="" Diff1="22772" Rat1="0,096668067530108" Metric12="0,096668067530108" Var12="" Diff12="-2147483648" Metric2="85051" Var2="" Diff2="85051" Rat2="0,0777167889134489" Metric5="3,73489372914105" Var5="" Diff5="3,73489372914105" />
    <Row Dim1="14h" Metric1="21564" Var1="" Diff1="21564" Rat1="0,0915400583268596" Metric12="0,0915400583268596" Var12="" Diff12="-2147483648" Metric2="81633" Var2="" Diff2="81633" Rat2="0,0745935336371304" Metric5="3,78561491374513" Var5="" Diff5="3,78561491374513" />
    <Row Dim1="15h" Metric1="20626" Var1="" Diff1="20626" Rat1="0,0875582101210261" Metric12="0,0875582101210261" Var12="" Diff12="-2147483648" Metric2="67946" Var2="" Diff2="67946" Rat2="0,062086806028303" Metric5="3,29419179676137" Var5="" Diff5="3,29419179676137" />
    <Row Dim1="16h" Metric1="11012" Var1="" Diff1="11012" Rat1="0,046746388531598" Metric12="0,046746388531598" Var12="" Diff12="-2147483648" Metric2="27230" Var2="" Diff2="27230" Rat2="0,0248818727835442" Metric5="2,47275699237196" Var5="" Diff5="2,47275699237196" />
    </Export>

    So i’ve take yourt working example and modifiy it myself, i think my problem is on “var source” cause my xml is a bit strange :

    <html lang="en">
    <head>
    <title id='Description'>jqxChart Line Series Example</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // prepare the data
    var source = {
    datafields: [{ name: 'Dim1' }, { name: 'Metric1' }],
    root: "Export",
    record: "Row",
    datatype: "xml",
    url: 'graph.xml'
    }
    var dataAdapter = new $.jqx.dataAdapter(source);
    // prepare jqxChart settings
    var settings = {
    title: "test",
    showLegend: true,
    source: dataAdapter,
    categoryAxis: {
    dataField: 'Dim1',
    formatFunction: function (value) {
    var hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
    return hours[new Dim1(value).getHours()];
    },
    showGridLines: true
    },
    colorScheme: 'scheme01',
    seriesGroups: [{
    type: 'column',
    valueAxis: {
    displayValueAxis: true,
    axisSize: 'auto',
    tickMarksColor: '#888888'
    },
    series: [{ dataField: 'Dim1', displayText: 'dim' }]
    }]
    };
    // setup the chart
    $('#jqxChart').jqxChart(settings);
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxChart' style="width: 680px; height: 400px">
    </div>
    </body>
    </html>

    to see the result : http://www.ledvdclub.powa.fr/chart/test2.html

    thx for ur help

    • This reply was modified 7 years, 8 months ago by  thecatz.
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.