Friday, March 11, 2022

DV Lab -3-H- Develop Following Program Using HTML5 and JavaScript

GTU DV Lab -3- Develop Following Program Using HTML5 and JavaScript


3-H- Read JSON Data and draw Data Table

File Name-1= DV Lab3h JavaScript Bar Charts json1.html
Program Code:

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {            
      title:{
        text: "GTU DV LAB-3-H-Fruits sold in First & Second Quarter"              
      },

      data: [  //array of dataSeries     
      { //dataSeries - first quarter
   /*** Change type "column" to "bar", "area", "line" or "pie"***/        
       type: "column",
       name: "First Quarter",
       dataPoints: [
       { label: "banana", y: 58 },
       { label: "orange", y: 29 },
       { label: "apple", y: 80 },                                    
       { label: "mango", y: 74 },
       { label: "grape", y: 64 }
       ]
     },
     { //dataSeries - second quarter

      type: "column",
      name: "Second Quarter",                
      dataPoints: [
      { label: "banana", y: 63 },
      { label: "orange", y: 73 },
      { label: "apple", y: 88 },                                    
      { label: "mango", y: 77 },
      { label: "grape", y: 60 }
      ]
    }
    ]
  });

    chart.render();
  }
  </script>
  <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>



Output:








Posted by at No comments:
Labels: , , , , , ,

DV Lab -3-G- Develop Following Program Using HTML5 and JavaScript

GTU DV Lab -3- Develop Following Program Using HTML5 and JavaScript



3-G- Read the data XML file and draw Simple Chart

File Name-1= DV Lab3-g draw Data Table.html
Program Code:

<!DOCTYPE html>
<html>
<head>
  <title>Chart using XML Data</title>
  <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <script type="text/javascript">
  window.onload = function() {
var dataPoints = [];
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=xml", function(data) {
$(data).find("point").each(function () {
var $dataPoint = $(this);
var x = $dataPoint.find("x").text();
var y = $dataPoint.find("y").text();
dataPoints.push({x: parseFloat(x), y: parseFloat(y)});
});
var chart = new CanvasJS.Chart("chartContainer", {
title: {
    text: "GTU DV LAB-3-G-Chart Using XML Data",
},
data: [{
    type: "column",
    dataPoints: dataPoints,
  }]
});
chart.render();
});
  }
  </script>
</head>
<body>
<div id="chartContainer" style="width:100%; height:300px;"></div>
</body>
</html>



Here we have to write 2-files.
Second file is XML file which is shown below.

File Name-2= DV Lab3-g XML file.xml
Program Code:
<?xml version="1.0"?>
<data>
<point>
<x>5</x>
<y>8</y>
</point>
<point>
<x>6</x>
<y>7</y>
</point>
<point>
<x>7</x>
<y>10</y>
</point>
<point>
<x>8</x>
<y>15</y>
</point>
<point>
<x>9</x>
<y>16</y>
</point>
<point>
<x>10</x>
<y>21</y>
</point>
<point>
<x>11</x>
<y>22</y>
</point>
<point>
<x>12</x>
<y>26</y>
</point>
<point>
<x>13</x>
<y>29</y>
</point>
<point>
<x>14</x>
<y>27</y>
</point>
</data>



Output:






Posted by at No comments:
Labels: , , , , , ,

DV Lab -3-F- Develop Following Program Using HTML5 and JavaScript

GTU DV Lab -3- Develop Following Program Using HTML5 and JavaScript



3-F- Read the data XML file and draw Data Table

File Name-1= DV Lab3-f draw Data Table.html
Program Code:

<!DOCTYPE html>
<html>
<head>
  <title>Chart using XML Data</title>
  <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <script type="text/javascript">
  window.onload = function() {
var dataPoints = [];
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=xml", function(data) {
$(data).find("point").each(function () {
var $dataPoint = $(this);
var x = $dataPoint.find("x").text();
var y = $dataPoint.find("y").text();
dataPoints.push({x: parseFloat(x), y: parseFloat(y)});
});
var chart = new CanvasJS.Chart("chartContainer", {
title: {
    text: "GTU DV LAB-3-f-Chart Using XML Data",
},
data: [{
    type: "column",
    dataPoints: dataPoints,
  }]
});
chart.render();
});
  }
  </script>
</head>
<body>
<div id="chartContainer" style="width:100%; height:300px;"></div>
</body>
</html>



Here we have to write 2-files.
Second file is XML file which is shown below.

File Name-2= DV Lab3-f XML file.xml
Program Code:
<?xml version="1.0"?>
<data>
<point>
<x>5</x>
<y>8</y>
</point>
<point>
<x>6</x>
<y>7</y>
</point>
<point>
<x>7</x>
<y>10</y>
</point>
<point>
<x>8</x>
<y>15</y>
</point>
<point>
<x>80</x>
<y>16</y>
</point>
<point>
<x>20</x>
<y>23</y>
</point>
<point>
<x>11</x>
<y>22</y>
</point>
<point>
<x>12</x>
<y>26</y>
</point>
<point>
<x>13</x>
<y>29</y>
</point>
<point>
<x>45</x>
<y>27</y>
</point>
</data>



Output:





Posted by at No comments:

DV Lab -3-A & C- Develop Following Program Using HTML5 and JavaScript

GTU DV Lab -3- Develop Following Program Using HTML5 and JavaScript



3-A- Develop the simple bar chart usingTML5 CANVAS

File Name= DV Lab3a JavaScript Bar Charts.html
Program Code:

<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"GTU DV Lab-3-a-Fortune 500 Companies by Country"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
title: "Number of Companies"
},
data: [{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{ y: 3, label: "Sweden" },
{ y: 7, label: "Taiwan" },
{ y: 5, label: "Russia" },
{ y: 9, label: "Spain" },
{ y: 7, label: "Brazil" },
{ y: 7, label: "India" },
{ y: 9, label: "Italy" },
{ y: 8, label: "Australia" },
{ y: 11, label: "Canada" },
{ y: 15, label: "South Korea" },
{ y: 12, label: "Netherlands" },
{ y: 15, label: "Switzerland" },
{ y: 25, label: "Britain" },
{ y: 28, label: "Germany" },
{ y: 29, label: "France" },
{ y: 52, label: "Japan" },
{ y: 103, label: "China" },
{ y: 134, label: "US" }
]
}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Output:





3-C- Read the data .txt file and draw Simple Bar Chart

File Name= DV Lab3c JavaScript Bar Charts.html
Program Code:

<!DOCTYPE HTML>
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">

window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "GTU DV LAB-3-c-My First Chart in CanvasJS"              
},
data: [              
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
{ label: "apple",  y: 50  },
{ label: "orange", y: 15  },
{ label: "banana", y: 25  },
{ label: "mango",  y: 90  },
{ label: "grape",  y: 28  }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>


Output:




Posted by at No comments:
Subscribe to: Posts (Atom)