How to create dynamic bar chart in javascript

How to create a JavaScript bar chart and why is this important? Every day, data visualization becomes all the more powerful and important area of the Web. The volume of information grows, and it must be made understandable as fast as possible. That’s when data visualization instruments like charts and dashboards become a great help.

Table of Contents Show

How to Build JavaScript Bar Chart
1. Create an HTML page
2. Reference all necessary files
3. Put together the data
4. Write the code for the chart
Modify Chart Type
Tune Bar Chart
How do you make a dynamic bar graph in HTML?
How do you add dynamic data to a chart?
What is a dynamic bar chart?
How do I make Chartjs dynamic?

Creating HTML5 charts might seem a complicated task, but this assumption is wrong. This article blows this prejudice to pieces and shows how to build an interactive bar chart using JavaScript.

The result will look like on the picture above. Then you’ll also learn how to quickly modify and customize such a JavaScript (HTML5) bar chart. All the JS chart examples used along the tutorial can be found on CodePen.

How to Build JavaScript Bar Chart

There are 4 basic steps you should take to create a simple bar chart for your application or website:

Create an HTML page.
Reference all necessary files.
Put together the data.
Write the code for a chart.

1. Create an HTML page

The very first thing you should do is to create an HTML page. It should look like the following:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Bar Chart</title>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%"></div>
  </body>
</html>

The container we have created will be a container for a chart. You can set other values for the width and height parameters if you don’t want your chart to fill the whole page.

Let’s move to the next step.

2. Reference all necessary files

Reference the AnyChart JavaScript charting library in the <script> tag in the <head> section:

<!DOCTYPE html>
<html>
  <head>
      <title>JavaScript Bar Chart</title>
      <script src="https://cdn.anychart.com/releases/8.0.0/js/anychart-base.min.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%"></div>
  </body>
</html>

The whole code of the JS chart sample is written in the <script> tag too. Add two more lines:

<!DOCTYPE html>
<html>
  <head>
      <title>JavaScript Bar Chart</title>
      <script src="https://cdn.anychart.com/releases/8.0.0/js/anychart-base.min.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%"></div>
    <script>
        <!-- chart code will be here -->
    </script>
  </body>
</html>

The entire code of the JavaScript charting example will be put between those lines.

Now the preparations are over. It’s time to move to the next step.

3. Put together the data

The first thing you need when it comes to data visualization is the data itself. As we’re making a simple chart sample now, let’s arrange some simple data.

A simple data of a simple two-dimension chart can be presented as a table with two columns: X and Y. X is usually for timestamps or categories and Y holds the values according to the categories.

Our chart will show the 10 deadliest recorded earthquakes in the XXth century, data is obtained from Wikipedia: List of earthquakes.

Place (Year)	Death toll
San-Francisco (1906)	1500
Messina (1908)	87000
Ashgabat (1948)	175000
Chile (1960)	10000
Tian Shan (1976)	242000
Armenia (1988)	25000
Iran (1990)	50000

The categories, which are spread among the X-axis, can be of one type or another, and it is not necessary for them to be numeric. Let’s set the values of the first column as categories of the X-axis. The number of victims will become the Y-axis values.

Convert this data into a special JavaScript object that contains data array and data header settings:

var data = {
  header: ["Name", "Death toll"],
  rows: [
    ["San-Francisco (1906)", 1500],
    ["Messina (1908)", 87000],
    ["Ashgabat (1948)", 175000],
    ["Chile (1960)", 10000],
    ["Tian Shan (1976)", 242000],
    ["Armenia (1988)", 25000],
    ["Iran (1990)", 50000]
]}

All goes well. Now let’s move to the next step.

4. Write the code for the chart

Finally, all preparations are made, it’s time to start coding!

As you should remember, we’ve specified above that all of the JavaScript charting sample code must be written inside of the <script></script> tags.

First, put the function that waits until the page is ready:

<script>
anychart.onDocumentReady(function() {
    // the code to create a chart will be here
});
</script>

Second, add the data into the sample:

anychart.onDocumentReady(function() {
    // the data 
    var data = {
      header: ["Name", "Death toll"],
      rows: [
        ["San-Francisco (1906)", 1500],
        ["Messina (1908)", 87000],
        ["Ashgabat (1948)", 175000],
        ["Chile (1960)", 10000],
        ["Tian Shan (1976)", 242000],
        ["Armenia (1988)", 25000],
        ["Iran (1990)", 50000]
    ]};
});

Now, specify the JavaScript chart type. You can find the whole list of the chart types AnyChart provides in the Supported Charts Types list. In our sample, we’ll choose the Bar Chart type with the data specified in the data variable.

// create the chart
var chart = anychart.bar();

// add the data
chart.data(data);

It’s better for a chart to have a title, to make it clear what it demonstrates from the very first look at it:

// set the chart title
chart.title("The deadliest earthquakes in the XXth century");

Now, the last thing we should do to finish our chart and run it, is to set the container for the chart and draw it:

chart.container('container');
chart.draw();

Bingo! Look at the result of our JavaScript charting below:

See the Pen Creating a JavaScript Bar Chart by AnyChart JavaScript Charts (@AnyChart) on CodePen.

The whole code of this interactive HTML5 bar chart example should look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Bar Chart</title>
    <script src="https://cdn.anychart.com/releases/8.0.0/js/anychart-base.min.js">>/script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%"></div>
    <script>
      anychart.onDocumentReady(function() {

        // set the data
        var data = {
            header: ["Name", "Death toll"],
            rows: [
              ["San-Francisco (1906)", 1500],
              ["Messina (1908)", 87000],
              ["Ashgabat (1948)", 175000],
              ["Chile (1960)", 10000],
              ["Tian Shan (1976)", 242000],
              ["Armenia (1988)", 25000],
              ["Iran (1990)", 50000]
        ]};

        // create the chart
        var chart = anychart.bar();

        // add the data
        chart.data(data);

        // set the chart title
        chart.title("The deadliest earthquakes in the XXth century");

        // draw
        chart.container("container");
        chart.draw();
      });
    </script>
  </body>
</html>

Modify Chart Type

There are situations when you might doubt how to arrange it in the right way and which chart type would visualize this data best, you can get an idea what chart type you need from tools like Chartopedia.

To change the chart type, simply change the bar() method of the chart to the column() one:

// create the chart
chart = anychart.column();

That’s it, our JS bar chart is now a JS column chart:

See the Pen Creating a JavaScript Bar Chart: Modify to a JavaScript Column Chart by AnyChart JavaScript Charts (@AnyChart) on CodePen.

Tune Bar Chart

Charts can be tuned in many ways. One of the things that may be of interest is the ability to change general look and feel.

One of the easiest ways to do that is to change the chart theme. That can be done in the following two steps.

First, we need to link one of the predefined themes:

<script src="https://cdn.anychart.com/releases/8.0.0/themes/dark_earth.min.js" type="text/javascript"></script>

And then tell the chart to use it:

anychart.theme(anychart.themes.darkEarth);

That’s it, take a look at our JavaScript bar chart which looks completely different now:

See the Pen Creating a JavaScript Bar Chart: Tuning by AnyChart JavaScript Charts (@AnyChart) on CodePen.

Conclusion

As you can see, there is nothing difficult in creating JavaScript charts with the AnyChart JS library. Visit the AnyChart Docs and API to know everything about building and adjusting the interactive HTML5 charts for your projects and websites. Feel free to take the sample created above as the basis for your experiments and explore charting with AnyChart.

Categories: AnyChart charting component, HTML5, JavaScript, JavaScript chart tutorials, Tips and tricks
15 Comments »

How do you make a dynamic bar graph in HTML?

Here are the steps for creating Dynamic Chart..

Step1: Create a basic chart as usual. ... .

Step2: Now, we see that values inside dps are being rendered. ... .

Step3: If you don't want the dataPoints to keep getting accumulated, you can remove old values from the beginning of the Array as shown below..

How do you add dynamic data to a chart?

Here are the steps to insert a chart and use dynamic chart ranges:.

Go to the Insert tab..

Click on 'Insert Line or Area Chart' and insert the 'Line with markers' chart. ... .

With the chart selected, go to the Design tab..

Click on Select Data..

What is a dynamic bar chart?

A dynamic chart is a special chart in Excel which updates itself when the range of the chart is updated. In static charts, the chart does not change itself when the range is updated. To create a dynamic chart in Excel, the range or the source of data needs to be dynamic in nature.

How do I make Chartjs dynamic?

you can extract values from table by using jquery text() function , by building correct data structure for chart. js you can generate chart data dynamically from table . First of all you have to extract labels from table . you can select rows and by iterating each row you can get label data from first columns.