NATURAL LANGUAGE PROCESSING LAB – INTERNAL 2

==============================================================

WEEK 7: READ XML DATA AND DISPLAY TABLE & CHART

AIM:
To read XML data, display it in a table and draw a simple chart.

DESCRIPTION:
This program reads an XML file containing student data. It extracts
name and marks, displays them in an HTML table, and draws a bar chart
using Canvas.

PROGRAM:

%%html
<!DOCTYPE html>
<html>
<body>

<input type="file" id="f">

<table border="1" id="t">
<tr><th>Name</th><th>Marks</th></tr>
</table>

<canvas id="c" width="300" height="200"></canvas>

<script>
f.onchange = e => {
  let r = new FileReader();

  r.onload = () => {
    let s = new DOMParser()
    .parseFromString(r.result,"text/xml")
    .getElementsByTagName("Student");

    let ctx = c.getContext("2d");

    for(let i=0;i<s.length;i++){
      let n = s[i].children[0].textContent;
      let m = s[i].children[1].textContent;

      let row = t.insertRow();
      row.insertCell(0).innerHTML = n;
      row.insertCell(1).innerHTML = m;

      ctx.fillRect(i*60+30,200-m,30,m);
    }
  };

  r.readAsText(e.target.files[0]);
};
</script>

</body>
</html>

INPUT (XML FILE):

<?xml version="1.0" encoding="UTF-8"?>
<Class>
    <Student>
        <Name>Alice Johnson</Name>
        <Marks>95</Marks>
    </Student>
    <Student>
        <Name>Bob Smith</Name>
        <Marks>88</Marks>
    </Student>
    <Student>
        <Name>Charlie Davis</Name>
        <Marks>92</Marks>
    </Student>
</Class>

OUTPUT:
Displays student data in table and bar chart.

==============================================================

WEEK 8: READ JSON DATA AND DISPLAY TABLE & CHART

AIM:
To read JSON data and display it in table and chart format.

DESCRIPTION:
This program reads JSON data, extracts name and marks, and displays
them in a table. It also draws a bar chart using Canvas.

PROGRAM:

%%html
<!DOCTYPE html>
<html>
<body>

<input type="file" id="f"><br><br>

<table border="1" id="t">
<tr><th>Name</th><th>Marks</th></tr>
</table>

<canvas id="c" width="300" height="200"></canvas>

<script>
f.onchange = e => {
  let r = new FileReader();

  r.onload = () => {
    let data = JSON.parse(r.result);

    let ctx = c.getContext("2d");

    for(let i=0;i<data.length;i++){
      let row = t.insertRow();
      row.insertCell(0).innerHTML = data[i].name;
      row.insertCell(1).innerHTML = data[i].marks;

      ctx.fillRect(i*60+30,200-data[i].marks,30,data[i].marks);
    }
  };

  r.readAsText(e.target.files[0]);
};
</script>

</body>
</html>

INPUT (JSON FILE):

[
  {"name":"Alice","marks":90},
  {"name":"Bob","marks":75},
  {"name":"Charlie","marks":85}
]

OUTPUT:
Displays JSON data in table and bar chart.

==============================================================

WEEK 9 (a): COLUMN CHART USING CANVAS.JS

AIM:
To display healthcare data using column chart.

DESCRIPTION:
This program uses CanvasJS to display healthcare-related data
such as number of cases in different diseases.

PROGRAM:

%%html
<!DOCTYPE html>
<html>
<body>

<div id="c1" style="height:300px"></div>

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script>
new CanvasJS.Chart("c1",{
  data:[{type:"column",
    dataPoints:[
      {label:"Fever",y:30},
      {label:"Cold",y:20},
      {label:"Covid",y:40}
    ]
  }]
}).render();
</script>

</body>
</html>

OUTPUT:
Displays column chart showing healthcare data.

==============================================================

WEEK 11 (a): BAR CHART USING GOOGLE CHARTS API

AIM:
To draw bar chart using Google Charts API.

DESCRIPTION:
This program uses Google Charts API to visualize market analysis data
in the form of a bar chart.

PROGRAM:

%%html
<!DOCTYPE html>
<html>
<body>

<div id="bar" style="height:300px"></div>

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current',{packages:['corechart']});

google.charts.setOnLoadCallback(()=>{
  let d = google.visualization.arrayToDataTable([
    ['Item','Value'],
    ['A',10],['B',20],['C',30]
  ]);

  new google.visualization.BarChart(bar).draw(d);
});
</script>

</body>
</html>

OUTPUT:
Displays bar chart using Google Charts API.

==============================================================