Generating charts using JSON data with the help of JavaScript

Question

Generating charts using JSON data with the help of JavaScript

Hi there! I have a JSON file shown in the first image and I would like to create a chart similar to the one in the second image using JavaScript (using any library). Can anyone provide me with a simple example code on how to achieve this?

javascript json charts bar-chart

Answer 1

Answer №1

ZingChart could be a great solution for this particular scenario. Check out the example below:

var myConfig = {
 type: "bar", 
 "scale-x":{
  "values":[
    "ahbass marrakech",
    "massira 1 marrakech",
    "rue laayoune marrakech"
    ]
},
series : [
{
values : [2,1,1]
}
]
};

zingchart.render({ 
id : 'myChart', 
data : myConfig, 
height: 400, 
width: 600 
});

<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>

If you are exploring your options, you might find this comparison of JavaScript charting frameworks useful.

Just to be transparent, I am part of the ZingChart team. Feel free to reach out if you have any questions about the demonstration.

Answer 2

ZingChart could be a great solution for this particular scenario. Check out the example below:

var myConfig = {
 type: "bar", 
 "scale-x":{
  "values":[
    "ahbass marrakech",
    "massira 1 marrakech",
    "rue laayoune marrakech"
    ]
},
series : [
{
values : [2,1,1]
}
]
};

zingchart.render({ 
id : 'myChart', 
data : myConfig, 
height: 400, 
width: 600 
});

<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>

If you are exploring your options, you might find this comparison of JavaScript charting frameworks useful.

Just to be transparent, I am part of the ZingChart team. Feel free to reach out if you have any questions about the demonstration.

Answer 3

Answer №2

Check out CanvasJS.

Here is an illustrative example of how to display a chart using data from an external JSON file.

$(document).ready(function() {
  var datapoints = [];
  $.getJSON("https://api.myjson.com/bins/45rin", function(result) {
    for (var i = 0; i <= result.datapoints.length - 1; i++) {
      datapoints.push({
        label: result.datapoints[i].label,
        y: parseInt(result.datapoints[i].y)
      });
    }

    var chart = new CanvasJS.Chart("chartContainer", {
      data: [{
        type: "column",
        datapoints: datapoints
      }]
    });

    chart.render();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

Answer 4

Check out CanvasJS.

Here is an illustrative example of how to display a chart using data from an external JSON file.

$(document).ready(function() {
  var datapoints = [];
  $.getJSON("https://api.myjson.com/bins/45rin", function(result) {
    for (var i = 0; i <= result.datapoints.length - 1; i++) {
      datapoints.push({
        label: result.datapoints[i].label,
        y: parseInt(result.datapoints[i].y)
      });
    }

    var chart = new CanvasJS.Chart("chartContainer", {
      data: [{
        type: "column",
        datapoints: datapoints
      }]
    });

    chart.render();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

Answer 5

Answer №3

Google Charts is an excellent tool for creating charts and graphs using JavaScript, especially for beginners. I remember using it when I was exploring different charting libraries in JS.

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Age', 'Weight'],
                    [8,   12],
                    [4,   5.5],
                    [11,  14],
                    [4,   5],
                    [3,   3.5],
                    [6.5, 7],
                ]);

                var options = {
                    title: 'Age vs. Weight comparison',
                    hAxis: {title: 'Age', minValue: 0, maxValue: 15},
                    vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
                    legend: 'none'
                };

                var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
                chart.draw(data, options);
            }
        </script>
    </head>
    <body>
        <div id="chart" style="width:900px;height:500px;"></div>
    </body>
</html>

When you run the code above, you will see the chart like this: https://i.stack.imgur.com/UikVP.png

If you have JSON data, consider using JSON.parse to dynamically load the data instead of hard-coding it as shown in my example.

Answer 6

Google Charts is an excellent tool for creating charts and graphs using JavaScript, especially for beginners. I remember using it when I was exploring different charting libraries in JS.

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Age', 'Weight'],
                    [8,   12],
                    [4,   5.5],
                    [11,  14],
                    [4,   5],
                    [3,   3.5],
                    [6.5, 7],
                ]);

                var options = {
                    title: 'Age vs. Weight comparison',
                    hAxis: {title: 'Age', minValue: 0, maxValue: 15},
                    vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
                    legend: 'none'
                };

                var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
                chart.draw(data, options);
            }
        </script>
    </head>
    <body>
        <div id="chart" style="width:900px;height:500px;"></div>
    </body>
</html>

When you run the code above, you will see the chart like this: https://i.stack.imgur.com/UikVP.png

If you have JSON data, consider using JSON.parse to dynamically load the data instead of hard-coding it as shown in my example.

Generating charts using JSON data with the help of JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

The error message "TypeError: res.json is not a function in express.router" indicates that

Unable to launch React Native project on emulator now

What is the best way to interact with the member variables and methods within the VideoJs function in an Angular 2 project

Is there a way to dynamically change the height in jQuery/JavaScript?

Changing the size of an image in an HTML5 canvas

Here is a guide on how to develop a PHP function that interacts with a textarea to display text in the specified color by using syntax like [color:red]

Transforming a collection of Plain Old Java Objects into JSON will solely display the "id" attributes

Error: The JSON data contains an unexpected token at the beginning Express

Encountering a problem while attempting to incorporate SQLite into a Node.js environment

Is there a way to select and handle multiple elements using async wdio with the same selector?

Issue with Backbone Event Dropping Functionality

From Panda's Den to JSON Empire: Unraveling the Dataframe

python decoding json using Twisted

Update: Cannot mark as invalid a nested document that has not been included in an array

Ensuring the accuracy of nested objects through class validator in combination with nestjs

Update the content of the page without reloading images

How to assign the 'src' attribute to an HTML element using Node.js

Javascript Developer Platform glitches

Updating Arrays in Node.js isn't happening as expected

Retrieve the values and IDs for every span element within the form