KostaMalsev · May 9, 2022 08:58
diff --git a/graphSimple.html b/graphSimple.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Scatter Chart</title>

    <link href="styles.css" rel="stylesheet" />

    <style>
      
        #chart {
      max-width: 650px;
      margin: 35px auto;
    }
      
    </style>

    <script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/[email protected]/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>

    
    <script src="apexcharts.min.js"></script>

    
  </head>

  <body>
     <div id="chart"></div>

    <script>
    
      //Generating the data
          let per = [];
          let area = [];
          i = 0;
          let data_=[];
          
          while (i < 30) {
            i++;
            let d = 0;
            while (d < 30) {
              //area.push(i*d);
              //per.push(2*i+2*d);
              data_.push([2*i+2*d,i*d]);
              d++
            }
          }
      
        var options = {
          series: [{
          name: "Perimeter vs Area of rectangle",
          data: data_/*[
          [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]
          ]
          */
        },
        /*{
          name: "SAMPLE B",
          data: [
          [36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
        },
        */
        ],
          chart: {
          height: 700,
          type: 'scatter',
          zoom: {
            enabled: true,
            type: 'xy'
          }
        },
        xaxis: {
          tickAmount: 10,
          labels: {
            formatter: function(val) {
              return parseFloat(val).toFixed(1)
            }
          }
        },
        yaxis: {
          tickAmount: 7
        },
        title: {
          text: 'Rectangle area and perimeter',
          align: 'left'
        },
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
      
      
    </script>

    
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Scatter Chart</title>

	<link href="styles.css" rel="stylesheet" />

	<style>

	#chart {
	max-width: 650px;
	margin: 35px auto;
	}

	</style>

	<script>
	window.Promise \|\|
	document.write(
	'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
	)
	window.Promise \|\|
	document.write(
	'<script src="https://cdn.jsdelivr.net/npm/[email protected]/classList.min.js"><\/script>'
	)
	window.Promise \|\|
	document.write(
	'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
	)
	</script>


	<script src="apexcharts.min.js"></script>


	</head>

	<body>
	<div id="chart"></div>

	<script>

	//Generating the data
	let per = [];
	let area = [];
	i = 0;
	let data_=[];

	while (i < 30) {
	i++;
	let d = 0;
	while (d < 30) {
	//area.push(i*d);
	//per.push(2i+2d);
	data_.push([2i+2d,i*d]);
	d++
	}
	}

	var options = {
	series: [{
	name: "Perimeter vs Area of rectangle",
	data: data_/*[
	[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]
	]
	*/
	},
	/*{
	name: "SAMPLE B",
	data: [
	[36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
	},
	*/
	],
	chart: {
	height: 700,
	type: 'scatter',
	zoom: {
	enabled: true,
	type: 'xy'
	}
	},
	xaxis: {
	tickAmount: 10,
	labels: {
	formatter: function(val) {
	return parseFloat(val).toFixed(1)
	}
	}
	},
	yaxis: {
	tickAmount: 7
	},
	title: {
	text: 'Rectangle area and perimeter',
	align: 'left'
	},
	};

	var chart = new ApexCharts(document.querySelector("#chart"), options);
	chart.render();


	</script>


	</body>
	</html>