CODEWITHSUNDEEP
javascriptxml
Kat
Kat

Reputation: 13

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

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.

Upvotes: 1

Views: 1688

Answers (1)

GyxLove521
GyxLove521

Reputation: 21

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.

Upvotes: 1

Related Questions