Data Visualization

( 3160717 )

<!DOCTYPE html>

<html lang="en-IN" dir="ltr">

<head>

    <title>Read JSON File to Draw Simple Bar Chart</title>

    <meta charset="utf-8">

    <meta name="author" content="SidPro" />

    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <meta name="description" content="Data visualization using javaScript and HTML" />

    <script src="js/jquery-3.5.1.min.js"></script>

    <style>

        #mytable {

            font-family: Arial, Helvetica, sans-serif;

            border-collapse: collapse;

            width: 100%;

}

        body {

            background: #e4fde1;

}

        #mytable td,

        #mytable th {

            border: 1px solid #ddd;

            padding: 8px;

}

        #mytable tr:nth-child(even) {

            background-color: #f2f2f2;

}

        #mytable tr:hover {

            background-color: #ddd;

}

        #mytable th {

            padding-top: 12px;

            padding-bottom: 12px;

            text-align: left;

            background-color: cornflowerblue;

            color: white;

}

        legend {

            float: right;

}

    </style>

</head>

<body>

    <h1>Get data from JSON file and draw Simple Bar Chart</h1>

    <canvas id="myCanvas" style="background: #2e3340;"></canvas>

    <legend for="myCanvas"></legend>

</body>

<script>

    var myCanvas = document.getElementById("myCanvas");

    myCanvas.width = window.innerWidth - 200;

    myCanvas.height = window.innerHeight - 120;

    var ctx = myCanvas.getContext("2d");

    function drawLine(ctx, startX, startY, endX, endY, color) {

        ctx.save();

        ctx.strokeStyle = color;

        ctx.beginPath();

        ctx.moveTo(startX, startY);

        ctx.lineTo(endX, endY);

        ctx.stroke();

        ctx.restore();

}

    function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height, color) {

        ctx.save();

        ctx.fillStyle = color;

        ctx.fillRect(upperLeftCornerX, upperLeftCornerY, width, height);

        ctx.restore();

}

    var Barchart = function (options) {

        this.options = options;

        this.canvas = options.canvas;

        this.ctx = this.canvas.getContext("2d");

        this.colors = options.colors;

        this.draw = function () {

            var maxValue = 0;

            for (var categ in this.options.data) {

                maxValue = Math.max(maxValue, this.options.data[categ]);

}

            var canvasActualHeight = this.canvas.height - this.options.padding * 2;

            var canvasActualWidth = this.canvas.width - this.options.padding * 2;

            //drawing the grid lines

            var gridValue = 0;

            while (gridValue <= maxValue) {

                var gridY = canvasActualHeight * (1 - gridValue / maxValue) + this.options.padding;

                drawLine(

                    this.ctx,

0,

                    gridY,

                    this.canvas.width,

                    gridY,

                    this.options.gridColor

);

                //writing grid markers

                this.ctx.save();

                this.ctx.fillStyle = this.options.gridColor;

                this.ctx.textBaseline = "bottom";

                this.ctx.font = "bold 10px Arial";

                this.ctx.fillText(gridValue, 10, gridY - 2);

                this.ctx.restore();

                gridValue += this.options.gridScale;

}

            //drawing the bars

            var barIndex = 0;

            var numberOfBars = Object.keys(this.options.data).length;

            var barSize = (canvasActualWidth) / numberOfBars;

            for (categ in this.options.data) {

                var val = this.options.data[categ];

                var barHeight = Math.round(canvasActualHeight * val / maxValue);

                drawBar(

                    this.ctx,

                    this.options.padding + barIndex * barSize,

                    this.canvas.height - barHeight - this.options.padding,

                    barSize,

                    barHeight,

                    this.colors[barIndex % this.colors.length]

);

                barIndex++;

}

            //drawing series name

            this.ctx.save();

            this.ctx.textBaseline = "bottom";

            this.ctx.textAlign = "center";

            this.ctx.fillStyle = "#fff";

            this.ctx.font = "bold 24px Arial";

            this.ctx.fillText(this.options.seriesName, this.canvas.width / 2, this.canvas.height);

            this.ctx.restore();

            //draw legend

            barIndex = 0;

            var legend = document.querySelector("legend[for='myCanvas']");

            var ul = document.createElement("ul");

            legend.append(ul);

            for (categ in this.options.data) {

                var li = document.createElement("li");

                li.style.listStyle = "none";

                li.style.borderLeft = "20px solid " + this.colors[barIndex % this.colors.length];

                li.style.padding = "5px";

                li.textContent = categ;

                ul.append(li);

                barIndex++;

}

}

}

    var myVinyls = {};

    var data;

    $(document).ready(function () {

        $.ajax({

            type: "GET",

            url: "data/regional_sales.json",

            dataType: "json",

            success: jsonParser

});

});

    function jsonParser(json) {

        var theData = json.sales.region;

        theData.forEach(function (v) {

            myVinyls[v.territory] = parseInt(v.employees);

});

        var myBarchart = new Barchart({

            canvas: myCanvas,

            seriesName: "Regional Employees Data",

            padding: 50,

            gridScale: 25,

            gridColor: "#eeeeee",

            data: myVinyls,

            colors: ["#ED553B", "#20639B", "#3CAEA3", "#F6D55C", "#173F5F", "#7D001A"]

});

        myBarchart.draw();

}

</script>

</html>