Building a simple graph in 1 minute

Building a simple scatter plot graph in 2 minutes ApexCharts

Area as a function of a perimeter of a rectangle

While doing a lot of numerical research and coding in javascript, it became a hustle to use Numbers/Excel/Matlab for fast visualization of the code-generated data.

After browsing the net a bit we found an excellent open-source project ApexCharts.

ApexCharts is a javascript library that is easily imported into your HTML page.

It has a variety of different chart types a bit like Excel but better looking.

Here is an example of the Scatter plot chart, where the x-axis is the perimeter of the rectangle and the y-axis is the area of the same rectangle.

The graph can easily be adjusted to new data and configuration, edit the options variable.

var options = {
          series: [{
          name: "Perimeter vs Area of rectangle",
          data: myData //is a [[1,3],[1,5]] for example
          }],
        chart: {
          height: 700,
          type: 'scatter', //here you define the type of chart
          zoom: {
            enabled: true,
            type: 'xy'
          }
        },
        xaxis: {
          tickAmount: 10, //the resolution of the ticks
          labels: {
            formatter: function(val) {
              return parseFloat(val).toFixed(1)
            }
          }
        },
        yaxis: {
          tickAmount: 7
        },
        title: {
          text: 'Rectangle area and perimeter', //your title
          align: 'left'
        },
    };

Here is the full HTML page, you will need to include the styles.css file and the library itself (which is available in the repo provided)

Here is the javascript vanilla demo on codeit:

The demo shows a scatter plot of calculated area of a rectangle vs it’s perimeter. (In case you wondered, there is no algebraic connection between the two :-))

Run KostaMalsev/graphsimple with Codeit

Here is our repo on GitHub.