chart with xml ? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: bind, chart, data, jqxChart, type, XML

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

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

Author

chart with xml ? Posts

September 18, 2012 at 12:01 pm chart with xml ? #8096

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

September 19, 2012 at 5:34 am 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/

September 19, 2012 at 9:14 am 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 ?

September 19, 2012 at 9:39 am 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/

September 21, 2012 at 2:43 pm 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

Author

Posts

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

You must be logged in to reply to this topic.