==============================================================
WEEK 1: BASIC SHAPES USING HTML5 CANVAS
==============================================================

AIM:
To draw basic graphical shapes using HTML5 Canvas.

DESCRIPTION:
This program demonstrates how to draw basic graphical shapes using the HTML5 Canvas element. Canvas provides a drawable region defined in HTML and controlled using JavaScript. By accessing the 2D rendering context, different shapes such as lines, rectangles, and circles can be created. The program first draws a straight line using moveTo() and lineTo(). Then, a rectangle is drawn using strokeRect(), followed by a circle using arc(). Finally, a filled rectangle is created using fillRect() with a specified color. This example helps understand coordinate systems, drawing paths, and rendering graphics dynamically in web applications.

PROGRAM:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid black;"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

ctx.moveTo(10,10);
ctx.lineTo(150,10);
ctx.stroke();

ctx.strokeRect(10,30,100,50);

ctx.beginPath();
ctx.arc(200,60,30,0,2*Math.PI);
ctx.stroke();

ctx.fillStyle = "lightblue";
ctx.fillRect(10,100,100,50);
</script>
</body>
</html>

OUTPUT:
+--------------------------------------------------+
|  ----------                                      |
|                                                  |
|  +---------+            (   ○   )                |
|  |         |                                   |
|  |         |                                   |
|  +---------+                                   |
|                                                  |
|  [ FILLED RECTANGLE ]                            |
+--------------------------------------------------+

==============================================================
WEEK 2: BASIC SHAPES USING HTML5 SVG
==============================================================

AIM:
To draw basic shapes using SVG.

DESCRIPTION:
This program demonstrates how to create basic shapes using Scalable Vector Graphics (SVG). SVG is an XML-based vector image format that allows developers to define shapes directly within HTML. Unlike Canvas, SVG elements are scalable and maintain clarity at any resolution. The program uses tags such as <line>, <rect>, <circle>, and <ellipse> to draw shapes. Each element has attributes that define position, size, stroke, and fill color. This method is useful for designing responsive and interactive graphics, icons, and diagrams in modern web applications.

PROGRAM:
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200" style="border:1px solid black;">
  <line x1="10" y1="10" x2="150" y2="10" stroke="black"/>
  <rect x="10" y="30" width="100" height="50" fill="lightgreen" stroke="black"/>
  <circle cx="200" cy="60" r="30" fill="lightblue" stroke="black"/>
  <ellipse cx="150" cy="150" rx="40" ry="20" fill="pink" stroke="black"/>
</svg>
</body>
</html>

OUTPUT:
+--------------------------------------------------+
|  ----------                                      |
|                                                  |
|  [ GREEN RECT ]        ( BLUE CIRCLE )           |
|                                                  |
|             ( PINK ELLIPSE )                     |
+--------------------------------------------------+

==============================================================
WEEK 3: USER INPUT USING JAVASCRIPT
==============================================================

AIM:
To accept user input and display dynamic output.

DESCRIPTION:
This program demonstrates how to handle user input using HTML and JavaScript. A text input field is provided for the user to enter their name. When the user clicks the submit button, a JavaScript function is triggered. This function retrieves the input value using getElementById() and displays a personalized greeting message using innerHTML. This example highlights key concepts such as DOM manipulation, event handling, and dynamic content updates, which are essential for building interactive and responsive web applications.

PROGRAM:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="name" placeholder="Enter your name">
<button onclick="showMessage()">Submit</button>
<p id="output"></p>

<script>
function showMessage() {
  let name = document.getElementById("name").value;
  document.getElementById("output").innerHTML = "Hello " + name + "!";
}
</script>
</body>
</html>

OUTPUT:
+--------------------------------------------------+
| Enter your name: [  SYAM  ]   [ Submit ]          |
|                                                  |
| Hello SYAM!                                      |
+--------------------------------------------------+

==============================================================
WEEK 4: SIMPLE BAR CHART USING CANVAS
==============================================================

AIM:
To draw a simple bar chart using Canvas.

DESCRIPTION:
This program illustrates how to create a simple bar chart using HTML5 Canvas. An array of values is defined along with labels. A loop is used to draw bars using fillRect(), where the height of each bar represents the corresponding value. Labels are displayed below each bar using fillText(). This method helps in converting numerical data into visual representation, making it easier to understand patterns and comparisons. It is a fundamental concept in data visualization.

PROGRAM:
<!DOCTYPE html>
<html>
<body>
<canvas id="barChart" width="350" height="250" style="border:1px solid black;"></canvas>
<script>
const canvas = document.getElementById("barChart");
const ctx = canvas.getContext("2d");

const values = [50,80,40,70];
const labels = ["A","B","C","D"];

for(let i=0;i<values.length;i++){
  ctx.fillRect(50+i*60,200-values[i],40,values[i]);
  ctx.fillText(labels[i],60+i*60,220);
}
</script>
</body>
</html>

OUTPUT:
+--------------------------------------------------+
|        █                                         |
|        █     █                                   |
|  █     █     █     █                             |
|  █     █     █     █                             |
|  A     B     C     D                             |
+--------------------------------------------------+

==============================================================
WEEK 5: READ TXT FILE AND DISPLAY TABLE & CHART
==============================================================

AIM:
To read data from a TXT file and display it.

DESCRIPTION:
This program reads data from a text file using the FileReader API. The file contains comma-separated values representing names and numbers. The data is split into lines and processed one by one. Each line is parsed and displayed in an HTML table dynamically. At the same time, a bar chart is drawn using Canvas. This program demonstrates file handling, string manipulation, dynamic table generation, and graphical representation of data.

PROGRAM:
<!DOCTYPE html>
<html>
<body>
<input type="file" id="file"><br><br>
<table border="1" id="t">
<tr><th>Name</th><th>Value</th></tr>
</table>
<canvas id="c" width="300" height="200" style="border:1px solid black;"></canvas>

<script>
file.onchange = function(e){
 let r=new FileReader();
 r.onload=function(){
  let lines=r.result.split("\n");
  let ctx=c.getContext("2d");
  let x=30;

  for(let i=0;i<lines.length;i++){
    let parts=lines[i].split(",");
    let name=parts[0];
    let value=parseInt(parts[1]);

    t.innerHTML+="<tr><td>"+name+"</td><td>"+value+"</td></tr>";
    ctx.fillRect(x,200-value,30,value);
    ctx.fillText(name,x+5,195);
    x+=50;
  }
 };
 r.readAsText(e.target.files[0]);
};
</script>
</body>
</html>

OUTPUT:
TABLE:
+----------+-------+
| Name     | Value |
+----------+-------+
| A        | 50    |
| B        | 80    |
+----------+-------+

CHART:
|   █      |
| █ █      |
| A B      |

==============================================================
WEEK 6: READ CSV FILE AND DISPLAY TABLE & CHART
==============================================================

AIM:
To read CSV file and display data.

DESCRIPTION:
This program reads structured CSV data using FileReader. The first row is treated as header and skipped. Each row is split into name and value fields. The data is displayed in an HTML table dynamically. A bar chart is also drawn using Canvas. This demonstrates handling structured files and visualizing data effectively.

PROGRAM:
<!DOCTYPE html>
<html>
<body>
<input type="file" id="file"><br><br>
<table border="1" id="table">
<tr><th>Name</th><th>Value</th></tr>
</table>
<canvas id="canvas" width="300" height="200" style="border:1px solid black;"></canvas>

<script>
file.onchange=function(e){
 let reader=new FileReader();
 reader.onload=function(){
  let lines=reader.result.split("\n");
  let ctx=canvas.getContext("2d");
  let x=30;

  for(let i=1;i<lines.length;i++){
    let data=lines[i].split(",");
    let name=data[0];
    let value=parseInt(data[1]);

    table.innerHTML+="<tr><td>"+name+"</td><td>"+value+"</td></tr>";
    ctx.fillRect(x,200-value,30,value);
    ctx.fillText(name,x+5,195);
    x+=50;
  }
 };
 reader.readAsText(e.target.files[0]);
};
</script>
</body>
</html>

OUTPUT:
TABLE:
+----------+-------+
| Name     | Value |
+----------+-------+
| X        | 40    |
| Y        | 60    |
+----------+-------+

CHART:
|   █      |
| █ █      |
| X Y      |


==============================================================
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 demonstrates how to read and process XML data using JavaScript. The user uploads 
an XML file containing student details such as name and marks. The FileReader API is used to read the 
file, and DOMParser converts the XML string into a document object. The program extracts required values 
from each student node and displays them in an HTML table dynamically. It also draws a bar chart using Canvas, 
where each bar represents student marks. This helps in understanding XML parsing and data visualization.

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 shows how to read and display JSON data in a web page. The user selects a 
JSON file containing name and marks data. Using FileReader, the file is read and converted into 
a JavaScript object using JSON.parse(). The data is then displayed in an HTML table. A bar chart is
also drawn using Canvas to represent the marks visually. This program helps in understanding JSON handling, 
data extraction, and graphical representation in web applications.


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 demonstrates how to create a column chart using the CanvasJS library. The 
data is defined using label and value pairs and passed to the chart configuration. CanvasJS 
automatically generates the chart with proper scaling, axes, and styling. It simplifies the process 
of creating charts compared to manual drawing using Canvas. This program is useful for understanding how 
external libraries can be used for efficient and professional data visualization in web applications.


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 demonstrates how to create a bar chart using the Google Charts API. 
The required chart package is loaded, and the data is defined using array format. The data 
is converted into a table format using arrayToDataTable(). The BarChart function is used to render the 
chart inside a HTML element. The API handles layout, scaling, and labeling automatically. This program helps 
in understanding how to use APIs for creating interactive and visually appealing charts.

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.

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