How do I display data from an .xml file using Chart.js?

Question

I'm a very new user of Javascript and data files. I am building a webpage that uses charts built with Chart.js to display character data from an .xml file exported from a creative writing program. The original xml file structure had all the data stored in attributes, so I've redesigned it so that it is in elements instead.

My aim is to draw and count data from this file and display it in a chart. For example, to draw the number of females and males from the gender element in my .xml file and display that in a chart. How would I do that using Javascript? I already have the webpage part-built and functioning with the data hard-coded into the JS, but that isn't suitable as I need to link it to the program I'm working with.

HTML:

<center><h4>Genders</h4>
  <canvas id="genderchart" width="250px" height="250px"></canvas></center>

JS for above chart:

    var ctx = document.getElementById("genderchart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["NB ", "M ", "F "], 
    datasets: [{
      backgroundColor: [
        "#FFEB3B",
        "#3F51B5",
        "#E91E63"
      ],
      data: [1, 16, 13]

    }]
  },
  options: {
  legend: {
    display: true,
    labels: {
      boxWidth: 13,
    }
  },
}
});

The .xml file is extremely long because it contains data other than gender, but this is the basic structure of the section I'd like to input:

<characterInfoList>
<harryPotter>
<gender>male</gender>
</harryPotter>

<ronWeasley>
<gender>male</gender>
</ronWeasley>

<hermioneGranger>
<gender>female</gender>
</hermioneGranger>

<lordVoldemort>
<gender>male</gender>
</lordVoldemort>

<albusDumbledore>
<gender>male</gender>
</albusDumbledore>

<severusSnape>
<gender>male</gender>
</severusSnape>
</characterInfoList>

Can anyone help? This is my first time posting here but I've gotten so much help from the questions of others' posted before me. I'm really sorry if this question is super basic but I'm just finding it so difficult.

It's better to have data in JSON format, but if your only option is XML you can check api.jquery.com/jQuery.parseXML — t3mplar
– t3mplar, Commented Feb 28, 2017 at 14:56
Just in case anyone is still wondering, I've decided to go with the default data format for Charts.js, which is JSON; I'm just planning on discussing in my report why that change was necessary. Thank you so much to everyone that answered and tried to help! — Kat
– Kat, Commented Mar 16, 2017 at 11:08

Kara · Accepted Answer · 2017-02-28 16:43:30Z

1

I think you should convert the xml file into JSON since as I know,the chartjs use the JSON as data source.

If the xml is long file, I think you should import it into a database table.then iterate the table by other language and generate the target JSON file.by the way,load a large file in a web application isn't a smart idea. You should build a web service to dynamically accept request and send response. Personally, I recommend nodejs for a beginner.

edited Feb 28, 2017 at 16:43

Kara

6,23616 gold badges54 silver badges58 bronze badges

answered Feb 28, 2017 at 14:29

GyxLove521

213 bronze badges

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

1 Comment

Kat Over a year ago

Because it's a project I've sort of committed to and I have a deadline, I'm more or less blocked into how I've said I'm going to do it. :( Thank you for the response, I'll talk to my supervisor about my methods and see what I can change up.

Collectives™ on Stack Overflow

How do I display data from an .xml file using Chart.js?

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