Parse XML data into Chart.js Line Chart

Question

I'm trying to combine two javascripts into one but am struggling to get it to work. I'm not sure if what I'm trying to do is possible, but I thought stackoverflow is the best place to get help.

The first javascript is Chart.js, specifically the Line Chart option. The second script is an XML in HTML script by w3schools.

What I would like to do is using an XML file to populate the data for the line chart. I modified the code accordingly, but I have only very basic knowledge of javascript and couldn't get it to work. This is what I tried:

<canvas id="canvas1" width="350" height="300"></canvas>
<script>
   if (window.XMLHttpRequest)
   {    // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
   }
   else
   {    // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.open("GET","data_chart.xml",false);
   xmlhttp.send();
   xmlDoc=xmlhttp.responseXML; 

   var x=xmlDoc.getElementsByTagName("Row")
   for (i=0;i<x.length;i++)

   var lineChartData = {
                labels : ["1","2","3","4","5"],
                datasets : [{
                     fillColor : "rgba(0,0,0,0.5)",
                     strokeColor : "rgba(0,0,0,1)",
                     pointColor : "rgba(0,0,0,1)",
                     pointStrokeColor : "#fff",
                     data : [x[i].getElementsByTagName("data_chart_1")]
                   }]
           }
   var myLine = new   
   Chart(document.getElementById("canvas1").getContext("2d")).Line(lineChartData);

</script>

So, the idea is that the data section of the variable lineChartData is populated by getting all elements in the row data_chart_1 from the XML file data_chart.xml. Is something like this possible? How would I have to update the code to make this work?

Thank you very much for your help. I hope my question was clear.

Do you mean what is displayed on the page? Basically, it shows the canvas with the grid lines for the graph but it doesn't show the line graph itself (presumably because it can't read the data). I'm sorry if I misunderstood what you meant with the response. In terms of the code, I followed the w3schools example. — rf2012
– rf2012, Commented Oct 27, 2013 at 13:36
The data is set up this way: <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <Row> <data_chart_1>1,2,3,4,5</data_chart_1> </Row> </Root> — rf2012
– rf2012, Commented Oct 27, 2013 at 13:41
please check now and get back to me. and try not to use http:.//w3fools.com — codeandcloud
– codeandcloud, Commented Oct 27, 2013 at 13:52

codeandcloud · Accepted Answer · 2013-10-27 13:49:44Z

2

Try this

var firstRow = xmlDoc.getElementsByTagName("Row")[0];
//console.log(firstRow);
var dataChart = firstRow.firstChild.nodeValue;
//console.log(dataChart);
var chartData = dataChart.split(",");
.......................
data : chartData

answered Oct 27, 2013 at 13:49

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rf2012 Over a year ago

Yes, this did the job beautifully! Thank you so much for your help naveen!

Collectives™ on Stack Overflow

Parse XML data into Chart.js Line Chart

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related