Forem: AnyChart

How to Enable Pinch-to-Zoom in Stock Charts — JavaScript Chart Tips

andreykh — Fri, 10 Oct 2025 06:32:39 +0000

Stock charts are designed to handle large volumes of time-based data, and smooth navigation is key to working with them effectively. One common need is zooming — whether to focus on a specific time range in greater detail or to get a broader view of the data.

In our JavaScript stock charts, zooming works out of the box through the scroller element, which appears by default as the main navigational UI control, making it easy to adjust the visible range on the go. For even greater flexibility, the range selection UI provides extra tools like preset time period buttons and date input fields. You can also activate zooming via mouse wheel scrolling with the zoomOnMouseWheel() method, which corresponds to the two-finger swipe gesture on touchpads and trackpads.

Pinch-to-zoom is another intuitive zooming option. It allows users to zoom in and out naturally on mobile and touch devices by moving two fingers farther apart or closer together. This is also easy to implement — and it is exactly what we cover in this edition of JS Chart Tips. Learn how to add pinch-to-zoom to your JavaScript stock chart!

Question: How to Add Pinch-to-Zoom to JavaScript Stock Chart?

Recently, our Support Team received several questions about enabling pinch-to-zoom in our JavaScript stock charts. Since this feature provides a smooth and intuitive way for users to zoom in and out of time-based data using familiar gestures — particularly on mobile — we figured it would be helpful to share the solution publicly, not just with those who reached out.

Here is an animation showing the pinch zoom behavior we are talking about — zooming in or out of the timeline with a simple two-finger pinch gesture:

So, how exactly can you add pinch zooming? Let us show you! Below, we will walk you through how to enable pinch-to-zoom functionality in a stock chart using JavaScript.

Solution: Implementing Pinch Zoom in JS Stock Charts

Overview

Pinch-to-zoom essentially mirrors the behavior of holding Ctrl (or Cmd on Mac) while scrolling the mouse wheel. So, the solution involves capturing mouse wheel events triggered when the user scrolls while holding Ctrl/Cmd, preventing the default browser behavior (which would otherwise zoom the page), and dynamically adjusting the chart’s visible range by updating the X-axis scale.

This approach provides smooth, intuitive zooming — whether users scroll while holding Ctrl/Cmd or perform a pinch gesture.

Now, let’s see how this can be implemented with just a few lines of code.

In Detail

First, assuming you have already created a stock chart, access the container where the chart is rendered. You can do this by selecting the container element using document.getElementById:

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

Second, add an event listener to detect when the user scrolls while holding Ctrl (or Cmd on Mac). This is done using the mousewheel event:

container.addEventListener("mousewheel", function(e) {
  // ensure zooming only happens when Ctrl (or Cmd on Mac) is pressed
  if (e.ctrlKey) {
    // prevent the default browser zoom behavior
    e.preventDefault();
    // zoom logic will go here
  }
});

Third, once a zoom event is detected, dynamically update the X-axis scale to zoom in or out by adjusting the visible range:

// retrieve the x-axis scale
var xScale = chart.xScale();

// get the current visible range
var max = xScale.getMaximum();
var min = xScale.getMinimum();

// calculate the current range
var gap = max - min;

// update the range dynamically
chart.selectRange(min - gap * e.deltaY / 200, max + gap * e.deltaY / 200);

That is basically it — your stock chart now supports pinch-to-zoom behavior.

For reference, here is the complete code, combining all the steps above:

var container = document.getElementById("container");
container.addEventListener("mousewheel", function(e) {
  if (e.ctrlKey) {
    e.preventDefault();
    xScale = chart.xScale();
    max = xScale.getMaximum();
    min = xScale.getMinimum();
    gap = max - min;
    chart.selectRange(min - gap*e.deltaY/200 , max + gap*e.deltaY/200);
  }
});

Example

Check out an example of a stock chart with pinch-to-zoom, and feel free to experiment further with its code and visualization:

Stock Chart with Pinch-to-Zoom | AnyChart Playground

Further Learning

Learn more in our JavaScript charting documentation:

Wrapping Up

Now you know how to add pinch-to-zoom support to your JavaScript stock chart, making navigation even more intuitive with familiar touch gestures and scroll actions.

Keep following the JS Chart Tips series for more practical solutions inspired by real-world cases and feature requests from our customers. If you have any questions or need assistance, our Support Team is always ready to help.

Enjoy smooth zooming into your data with our JavaScript charts!

Custom Image Markers in Quadrant Charts — JS Chart Tips

andreykh — Tue, 07 Oct 2025 10:30:48 +0000

Displaying unique images as markers can add a distinctive touch to your charts, making data visualization more engaging and informative. In this edition of JS Chart Tips, we will guide you through the process of using custom image markers for each data point in a quadrant chart with our JavaScript charting library.

Question: How to Display Custom Images as Markers in Quadrants?

A user recently reached out to our Support Team with a question that, in a nutshell, boils down to the following: “Can I change the marker in a quadrant chart into a custom image?” We recognized the need to achieve something like what is shown below:

So, the short answer is yes, and now we will show you exactly how. If you have a similar requirement, follow along!

Solution: Adding Images as Markers for Quadrant Data Points

Overview

When you create a JS quadrant chart with AnyChart, data is represented as a marker series by default. To make these markers appear as custom images, use the fill() method and specify the image source URL.

To display unique images for each data point, add a custom property in your dataset containing the image URL. By passing a custom function into the fill() method, you can dynamically extract and apply the image URLs for the series markers.

In Detail

Let's now see exactly how this solution looks in a quick example.

First of all, we create a basic quadrant chart. The following JavaScript code is enough to generate such a visualization, with data introduced as an array of objects:

anychart.onDocumentReady(function () {
  // create data
  var data = [
    {x: 4, value: 42},
    {x: 13, value: 59},
    {x: 25, value: 68},
    {x: 25, value: 63},
    {x: 44, value: 54},
    {x: 55, value: 58},
    {x: 56, value: 46},
    {x: 60, value: 54},
    {x: 72, value: 73}
  ];

  // create a chart
  var chart = anychart.quadrant(data);

  // set the chart title
  chart.title("Quadrant Chart with Images as Markers");

  // set the container id
  chart.container("container");

  // initiate drawing the chart
  chart.draw();
});

Second, for each data point, you can specify the URL of an image to be used as a marker by adding a custom property. In this example, here's how we add an image to the last data point:

{x: 72, value: 73, image: "https://pbs.twimg.com/profile_images/1389594666287476744/jbdbQ5Oh_400x400.jpg"}

Third, we customize the series by using the fill() method with a custom function to dynamically extract and apply the image URLs for each marker. In the example below, the function is set for the normal state of the data points. It applies the image URL from the dataset to each data point, and if the URL is absent, it applies a default image URL instead:

series.normal()
  .fill(function(){
    return {
      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png"
    };
  });

Fourth, we can customize the marker appearance to ensure the images display as intended. For example, let's adjust the size and fill mode, as well as configure how markers look not only in the normal state but also in hovered and selected states:

// customize series appearance in the normal state
series.normal()
  .size(15)
  .fill(function(){
    return {
      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png",
      mode: "fit"
    };
  });

// customize series appearance in the hovered state
series.hovered()
  .size(20)
  .fill(function(){
    return {
      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png",
      mode: "fit"
    };
  });

// customize series appearance in the selected state
series.selected()
  .size(25)
  .fill(function(){
    return {
      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png",
      mode: "fit"
    };
  });

That's it! Our quadrant chart now uses images as markers.

If you have a similar case, you might prefer a more concise version to achieve the same result:

// define fill logic
function customFill(point) {
  return {
    src: this.getData("image") || "https://www.anychart.com/_design/img/static/AnyChart-circle.png",
    mode: "fit"
  };
};

// apply fill logic to different states
series.normal().size(15).fill(customFill);
series.hovered().size(20).fill(customFill);
series.selected().size(25).fill(customFill);

Examples

Check out an example of a JavaScript quadrant chart with images as markers, and feel free to experiment further with its code and visualization:

Quadrant Chart with Image Markers | AnyChart Playground

Further Learning

To learn more, refer to our JavaScript charting documentation:

And the API reference:

Wrapping Up

Whenever you need custom image markers for your quadrant charts, now you know how to implement them. For more tips and tricks, keep following our JavaScript Chart Tips series. And feel free to contact our Support Team whenever you have any questions regarding any of the chart types or features of our JavaScript charting library. Have a great data visualization time!

Custom Time Intervals in Stock Charts — JS Chart Tips

andreykh — Thu, 30 Jan 2025 18:23:51 +0000

Grouping data points into appropriate time intervals is essential for making stock charts more readable and insightful. While raw data may be collected at a high frequency, such as every minute, financial analysts and traders often need to view broader trends, where grouping data into 5-minute, 15-minute, 1-hour, 1-day, and other time frames can provide clearer insights. In this edition of JS Chart Tips, we will walk you through the process of setting a custom time interval for a stock chart using our JavaScript charting library.

Question: How to Set Stock Data Grouping Intervals?

Recently, our Support Team received a question from a user who wanted to change the default interval of their candlestick chart. Specifically, they had data with a 1-minute interval and wanted each candlestick to represent 5 minutes.

Below is a common scenario when working with grouped time intervals, and we will now demonstrate how to achieve this:

Solution: Creating Custom Data Grouping in Stock Charts

Overview

If you have stock data recorded at a short time interval but want to display points grouped into longer periods — either as a fixed setting or with interactive switching — this can be easily achieved using the Data Grouping feature.

In our JavaScript stock charts, the grouping() method lets you control how data is aggregated into larger intervals, allowing you to easily customize how your candlesticks, OHLC bars, or data points in other stock chart series appear.

In Detail

First, access the grouping() object from your stock chart:

var grouping = chart.grouping();

Second, enable forced grouping to ensure the chart applies your custom settings:

grouping.forced(true);

Third, define the grouping levels by specifying the desired time unit and interval. In the original customer question, the request was to use a five-minute grouping:

grouping.levels([{
  unit: 'minute',
  count: 5
}]);

See the complete code enabling this type of stock data grouping below:

// create a grouping variable
var grouping = chart.grouping();

// force the grouping
grouping.forced(true);

// set the grouping level to 5 minutes
grouping.levels([{
  unit: 'minute',
  count: 5
}]);

Of course, you're more than welcome to use method chaining if you desire:

chart.grouping().forced(true).levels([{unit: 'minute', count: 5}]);

Examples

Check out an example of a JS candlestick chart with a 5-minute interval, and feel free to experiment further with its code and visualization:

Candlestick Stock Chart with 5-Minute Interval | AnyChart Playground

For a demonstration of an interactive approach that allows switching between different time intervals, explore this example using grouping control buttons for 1, 5, and 10 minutes:

Candlestick Stock Chart with Grouping Control Buttons | AnyChart Playground

Further Learning

To learn more about data grouping in stock charts, refer to our JavaScript charting documentation, which includes additional examples:

Data Grouping — Stock Charts | AnyChart JS Documentation

Wrapping Up

Applying custom time frame intervals in stock charts can help users better analyze financial data by focusing on meaningful periods. With the data grouping feature, it is easy to control how candlesticks or bars are displayed, ensuring clear and concise data visualization.

For any additional questions, feel free to reach out to our Support Team.

Stay connected with our JavaScript Chart Tips series, where we share best practices and techniques inspired by real-world cases from our customers.

Happy coding and charting with JavaScript!

Python Django Financial Trading Dashboard — Integrating AnyChart JS Charts

andreykh — Thu, 05 Dec 2024 09:48:35 +0000

We are pleased to share a helpful article we've found on EODHD APIs, where Michael Whittle, a seasoned developer and top Medium author, shows how he integrated our JavaScript charting library into his Python Django-based trading dashboard.

In particular, he discusses his experience migrating a treemap from D3.js to AnyChart and explains why he chose our solution for implementing a stock chart, highlighting the intuitive code and enhanced functionality.

Read on to discover how you can elevate your financial data visualizations in Python Django web applications with AnyChart JS Charts.

This article builds upon the previous two in the series, “Build a Financial Trading Dashboard with Python Django” and “Enhancing the Financial Trading Dashboard with Python Django”.

Initially, I created the treemap on the landing page using the D3.js library. While it worked well, I wanted to explore other charting options, so I evaluated both Chart.js and AnyChart. Ultimately, I decided to migrate the treemap from D3.js to AnyChart. Although the visual appearance of the charts is quite similar, I found AnyChart’s code significantly more intuitive and easier to understand. Additionally, I personally feel that the AnyChart treemap offers slightly more functionality and appears more polished. That said, I also liked the aesthetic of Chart.js, which remains a viable option.

In the previous article, I created a page displaying the historical data of a market, presented neatly using a Bootstrap data table. For this article, I wanted to include an appealing stock chart above the table. Once again, I considered the three charting libraries, but I was particularly impressed with the way AnyChart presented the data and the functionality it offered. This article will explain how this was achieved.

Finally, I discovered another useful feature available in Bootstrap. In the previous article, I demonstrated how to add an “Export to Excel” button. Similarly, with just one line of code, you can also add a “Print” button. This feature takes the data from the Bootstrap table and presents it in a print-friendly format.

Quick jump:

Updating the View

Updating the Template — index.html

Updating the Template — historical_data.html

Summary

Next Steps

Updating the View

I only had to make one change to a view to get the historical data stock chart working.

def fetch_historical_data(request, market, interval):
  now = datetime.now()

  if interval in ["m", "w", "d"]:
    end_date = now.date().isoformat()
    start_date = (now - timedelta(days=300)).date().isoformat()
  else:
    end_date = now.strftime("%Y-%m-%dT%H:%M")
    start_date = (now - timedelta(hours=300)).strftime("%Y-%m-%dT%H:%M")

  start_date = request.GET.get("from", start_date)
  end_date = request.GET.get("to", end_date)

  def parse_datetime(dt_str):
    try:
      return datetime.strptime(dt_str, "%Y-%m-%dT%H:%M:%S")
    except ValueError:
      try:
        return datetime.strptime(dt_str, "%Y-%m-%dT%H:%M")
      except ValueError:
        return datetime.strptime(dt_str, "%Y-%m-%d")

  start_date_parsed = parse_datetime(start_date)
  end_date_parsed = parse_datetime(end_date)

  if interval in ["m", "w", "d"]:
    start_date = start_date_parsed.strftime("%Y-%m-%d")
    end_date = end_date_parsed.strftime("%Y-%m-%d")
  else:
    start_date_unix = int(start_date_parsed.timestamp())
    end_date_unix = int(end_date_parsed.timestamp())

  endpoint = "eod" if interval in ["m", "w", "d"] else "intraday"
  interval_type = "period" if interval in ["m", "w", "d"] else "interval"

  if interval not in ["m", "w", "d"]:
    url = f"https://eodhd.com/api/{endpoint}/{market}?{interval_type}={interval}&from={start_date_unix}&to={end_date_unix}&api_token={settings.EODHD_API_TOKEN}&fmt=json"
  else:
    url = f"https://eodhd.com/api/{endpoint}/{market}?{interval_type}={interval}&from={start_date}&to={end_date}&api_token={settings.EODHD_API_TOKEN}&fmt=json"

  print(url)
  response = requests.get(url)
  data = response.json()

  def format_unix_timestamp(unix_ts):
    return datetime.utcfromtimestamp(unix_ts).strftime("%Y-%m-%d %H:%M:%S")

  for entry in data:
    if "date" in entry:
      entry["timestamp"] = entry.pop("date")
    elif "datetime" in entry:
      datetime_value = entry.pop("datetime")
      try:
        entry["timestamp"] = format_unix_timestamp(int(datetime_value))
      except ValueError:
        entry["timestamp"] = datetime_value

  if not data or "error" in data:
    data = []

  raw_data = data
  historical_data_json = json.dumps(data)

  return render(
    request,
    "historical/historical_data.html",
    {
      "market": market,
      "interval": interval,
      "historical_data": raw_data,  # Raw Python data for the table
      "historical_data_json": historical_data_json,  # JSON for the script
      "start_date": (
        start_date
        if interval in ["m", "w", "d"]
        else start_date_parsed.strftime("%Y-%m-%dT%H:%M")
      ),
      "end_date": (
        end_date
        if interval in ["m", "w", "d"]
        else end_date_parsed.strftime("%Y-%m-%dT%H:%M")
      ),
    },
  )

If you pay close attention to the function’s output, you’ll notice that I have separated the data into two parts. The first, “historical_data”, contains the raw data returned by the API, which is used for the Bootstrap data table. The second, “historical_data_json”, is a sanitised version of the data in JSON format, required for the AnyChart stock chart. Getting this to work was actually quite challenging. I wanted to provide two ways of visualising the historical data, but each required the data in a different format. This approach proved to be an effective solution.

Updating the Template — index.html

As I mentioned above, my initial treemap used the D3.js library. I evaluated both the Chart.js and AnyChart libraries. I found the AnyChart library to be initiative and look a lot nicer and more polished. I’ve included the converted code below.

GOTCHA

I encountered one of the strangest bug that had me puzzled for several days. When I initially converted the treemap code from D3.js to AnyChart, it worked flawlessly. I then shifted my focus to the Historical Data stock chart, but when I returned to the AnyChart treemap, it wasn’t rendering properly. Although the API was receiving data for 110 market indices, only 11 were displaying.

To debug this, I had to strip the code down to its simplest components. The “problem,” as it turned out, was related to my inclusion of daily_return as the value for the treemap. I chose to use daily_return instead of the number of constituents because it created a more visually appealing colour gradient between high and low values. However, I discovered that treemaps require positive numbers as values to render correctly—that’s simply how they work.

When I initially got it working, market conditions must have been exceptionally good, as all the daily returns were positive. By the time I revisited the code a few days later, some daily returns were negative, which caused only 11 entries to display.

To address this, I devised a simple yet effective solution. I ensured that the value passed to the treemap was always absolute (a positive number) and removed this value from the cell display. Instead, I added it to a tooltip that appears on mouse hover. This allowed the treemap to render correctly with a pleasing colour gradient, while still enabling the actual value to be displayed when needed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Market Indices Treemap</title>

  https://cdn.anychart.com/releases/8.13.0/js/anychart-bundle.min.js
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      background-color: #343a40;
      color: #ffffff;
    }
    #treemap {
      width: 100%;
      height: 80vh;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="container mt-5">
    <form action="{% url 'search_market_data' %}" method="get" class="d-flex justify-content-center my-4">
      <input type="text" name="query" class="form-control w-50" placeholder="Search market data..." required>
      <button type="submit" class="btn btn-primary ml-2">Search</button>
    </form>

    <div id="treemap"></div>
  </div>

  <script>
    const data = [
      { 
        name: "Market Indices", 
        children: [
          {% for index in indices %}
          {
            name: "{{ index.code }} [{{ index.constituents }}]",
            value: Math.abs(parseFloat("{{ index.daily_return|default:0 }}")) || 0,
            originalValue: parseFloat("{{ index.daily_return|default:0 }}"),
            id: {{ forloop.counter }},
            link: "/constituents/{{ index.index_id }}/",
            description: "Constituents: {{ index.constituents }}"
          },
          {% endfor %}
        ]
      }
    ];

    anychart.onDocumentReady(function() {
      const chart = anychart.treeMap(data, "as-tree");

      chart.background().fill("#343a40");

      const colorScale = anychart.scales.linearColor();
      colorScale.colors(["#d73027", "#fee08b", "#1a9850"]);
      chart.colorScale(colorScale);

      chart.labels()
        .fontColor("#ffffff")
        .fontSize(function() {
          return this.getData("value") > 100 ? 16 : 12;
        })
        .hAlign("center")
        .vAlign("middle")
        .format("{%name}");

      chart.tooltip()
        .useHtml(true)
        .format(function() {
          return `<strong>${this.getData('name')}</strong><br>
              Value: ${this.getData('originalValue')}<br>
              Link: <a href="${this.getData('link')}" target="_blank">${this.getData('link')}</a>`;
        });

      chart.hovered()
        .fill(anychart.color.lighten("#007bff", 0.4))
        .stroke("#d3d3d3");

      chart.listen("pointClick", function(e) {
        const link = e.point.get("link");
        if (link) {
          window.location.href = link;
        }
      });

      chart.maxDepth(null);

      chart.padding(10, 10, 10, 10);
      chart.stroke("#ffffff");
      chart.minHeight(5);
      chart.minWidth(5);

      chart.labels().fontSize(11);

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

Updating the Template — historical_data.html

The next part was to add the AnyChart stock chart above the historical data Bootstrap table. As I mentioned above, I also added the “Print” button which could be handy.

I found both Chart.js and AnyChart had really pleasant feature rich graphs. I decided to use AnyChart because I didn’t want to mix the libraries in the app, but I also quite liked the way the graph looked.

What I really nice is that the graph is interactive. You can pan, zoom, and mouse over the data points for additional information. As a stock start you also can see the candlesticks visually represented like most trading applications. A green bar if the close is higher than the open, and a red car if the close is lower than the open.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Historical Data for {{ market }} ({{ interval }})</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap4.min.css">

  <style>
    body {
      background-color: #343a40;
      color: #ffffff;
    }

    .table {
      background-color: #212529;
    }

    .table th, .table td {
      color: #ffffff;
    }

    .chart-container {
      margin-bottom: 20px;
    }

    .dt-buttons .btn {
      margin-right: 10px;
    }

    .page-item.active .page-link {
      z-index: 3;
      color: #ffffff !important;
      background-color: #495057 !important;
      border-color: #495057 !important;
    }

    .page-link {
      color: #ffffff !important;
      background-color: #6c757d !important;
      border-color: #343a40 !important;
    }

    .page-link:hover {
      color: #adb5bd !important;
      background-color: #5a6268 !important;
      border-color: #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
      color: #ffffff !important;
      background-color: #6c757d !important;
      border: 1px solid #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
      background-color: #5a6268 !important;
      border: 1px solid #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
      color: #ffffff !important;
      background-color: #495057 !important;
      border: 1px solid #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
      background-color: #6c757d !important;
      color: #ffffff !important;
    }

    .btn-dark {
      background-color: #6c757d !important;
      border-color: #6c757d !important;
      color: #ffffff !important;
    }

    .btn-dark:hover {
      background-color: #5a6268 !important;
      border-color: #5a6268 !important;
    }
  </style>
</head>

<body>
  <div class="container mt-5">
    <h2 class="mb-4">Historical Data for {{ market }} ({{ interval }})</h2>

    <div class="row">
      <div class="col-12 chart-container">
        <div id="candlestickChart" style="height: 500px; width: 100%;"></div>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <table id="historicalTable" class="table table-dark table-striped table-bordered">
          <thead class="thead-dark">
            <tr>
              <th>Timestamp</th>
              <th>Open</th>
              <th>High</th>
              <th>Low</th>
              <th>Close</th>
              <th>Volume</th>
            </tr>
          </thead>
          <tbody>
            {% for entry in historical_data %}
            <tr>
              <td>{{ entry.timestamp }}</td>
              <td>{{ entry.open }}</td>
              <td>{{ entry.high }}</td>
              <td>{{ entry.low }}</td>
              <td>{{ entry.close }}</td>
              <td>{{ entry.volume }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <a href="javascript:history.back()" class="btn btn-dark mt-4">Back</a>
  </div>

  <script id="historicalData" type="application/json">
    {{ historical_data_json|safe }}
  </script>

  https://code.jquery.com/jquery-3.5.1.min.js
  https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
  https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js
  https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js
  https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap4.min.js
  https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
  https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js
  https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js
  https://cdn.anychart.com/releases/8.13.0/js/anychart-bundle.min.js

  <script>
    $(document).ready(function() {
      $('#historicalTable').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        info: true,
        lengthMenu: [10, 25, 50, 100],
        order: [[4, "desc"]],
        dom: 'Bfrtip',
        buttons: [
          {
            extend: 'excel',
            text: 'Export to Excel'
          },
          {
            extend: 'print',
            text: 'Print'
          }
        ]
      });
    });

    document.addEventListener("DOMContentLoaded", function () {
      const rawData = document.getElementById("historicalData").textContent;
      const historicalData = JSON.parse(rawData);

      const chartData = historicalData.map(entry => [
        entry.timestamp,
        entry.open,
        entry.high,
        entry.low,
        entry.close
      ]);

      anychart.onDocumentReady(function () {
        const chart = anychart.stock();

        const table = anychart.data.table();
        table.addData(chartData);

        const mapping = table.mapAs({
          open: 1,
          high: 2,
          low: 3,
          close: 4
        });

        const plot = chart.plot(0);
        plot.candlestick(mapping).name('Price');

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

</html>

Summary

I find the code of AnyChart's JavaScript charting library straightforward to read and understand. However, the graphs display a “trial version” watermark. The purchasing of a licence removes this watermark and offers additional support. Despite this, the trial version has functioned well for me.

Next Steps

The next article in the series will explore incorporating fundamental data and market capitalisation into the application.

Originally published on EODHD.com, a one-stop shop for financial data APIs, under the title "AnyChart integration for the Financial Trading Dashboard with Python Django" in November 2024.

Written by Michael Whittle, a solution architect, developer, and analyst with over twenty years of experience, and a top author on Medium.

Useful AnyChart Links

Creating a Roman History Timeline Chart in JavaScript

andreykh — Fri, 11 Oct 2024 07:10:57 +0000

Ever caught yourself thinking about the Roman Empire more often than you’d like to admit? You’re not alone, and we’ve got just the thing for you! With the recent AnyChart JS Charts 8.13.0 release, we’ve enhanced our timeline chart for better support of historical data visualization.

We’d love to showcase this improvement in action. We’ve added a Roman History Timeline to our gallery of timeline chart examples, and we now invite you to discover how it was developed from scratch. In this in-depth JavaScript charting tutorial, we’ll cover everything from A to Z, meticulously guiding you through each step — from setting up the HTML environment to adding detailed data and customizing the visualization to make the chart both informative and engaging. The final result is an interactive timeline that you can proudly call your own Roman Empire.

So, whether you’re a history enthusiast caught up in the recent meme trend or a developer eager to expand your data visualization skills, follow along and learn how to create compelling historical timeline charts using JavaScript!

Introduction
Step 1: Setting Up Environment
- 1.1. Create Basic HTML Document
- 1.2. Create Container for Chart
- 1.3. Include All Necessary Resources
- 1.4. Complete HTML Setup
Step 2: Adding Data
- 2.1. Define Periods (Ranges)
- 2.2. Define Events (Moments)
- 2.3. Complete Data Loading Function
Step 3: Creating Timeline Chart
- 3.1. Prepare Ground
- 3.2. Set Up Chart
- 3.3. Set Data to Chart
  - 3.3.1. Load Data
  - 3.3.2. Set Series for Periods (Ranges)
  - 3.3.3. Set Series for Events (Moments)
- 3.4. Customize Tooltips
  - 3.4.1. Configure Period Tooltips
  - 3.4.2. Configure Event Tooltips
  - 3.4.3. Complete Tooltip Customization
- 3.5. Enhance Navigation
  - 3.5.1. Add Scrollbar
  - 3.5.2. Set Up Zoom Interactivity
  - 3.5.3. Add Zoom Control Buttons
- 3.6. Add Era Designators
- 3.7. Set Font for Axis Labels
- 3.8. Set Chart Title
- 3.9. Set Container and Draw Chart
- 3.10. Complete JavaScript Timeline Code
Step 4: CSS Styling
- 4.1. Style HTML, Body, Container
- 4.2. Style Zoom Control Buttons
- 4.3. Style Tooltips
- 4.4. Complete CSS Code
Result: Timeline Chart of Roman History
Wrapping Up

Introduction

Visualizing historical data can be challenging, especially when dealing with extensive timelines and precise dates. With the latest improvements in the AnyChart JavaScript charting library, creating detailed and accurate timeline charts is more accessible than ever.

In this tutorial, we’ll build an interactive JS timeline for a web page, which illustrates significant periods and events in Roman history, complete with custom tooltips and convenient navigation. Take a glance below to see how the final result will look, and let’s begin!

Step 1: Setting Up Environment

To get started with building our timeline, we need to set up a basic HTML structure for our webpage. This includes setting up the document, creating a container to display the chart, and linking the necessary resources.

1.1. Create Basic HTML Document

First, we need to create a basic HTML document that defines the structure of the page. This is the foundation of any webpage.

<!DOCTYPE html>
<html>
  <head>
    <title>Roman Civilization Timeline with All Data</title>
  </head>
  <body>
  </body>
</html>

1.2. Create Container for Chart

Next, we need a container where the timeline chart will be displayed. This can be a simple <div> element with a specific ID, placed in the <body> section:

<div id="container"></div>

This element will act as the placeholder for our chart. We will reference it in the JavaScript code to generate the visualization.

1.3. Include All Necessary Resources

Now, it’s time to include the necessary resources for our web project. Let’s use a custom web font. For example, Cinzel from Google Fonts. Simply include the relevant links in the <head> section:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">

We also need to connect the AnyChart JavaScript library to bring in the charting functionality. Link the required modules similarly in the <head> section:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-timeline.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-ui.min.js"></script>

These <script> tags include the core charting library, the dedicated timeline chart module, and the UI module to customize the user interface. Now, we are ready to place the JavaScript timeline charting code within the <script> tag in the <body> section:

<script>
  // The place for the JavaScript charting code
</script>

1.4. Complete HTML Setup

At this point, here’s what the complete HTML structure looks like:

<!DOCTYPE html>
<html>
  <head>
    <title>Roman Empire Timeline</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
    <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-timeline.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-ui.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // The place for the JavaScript charting code
    </script>
  </body>
</html>

Step 2. Adding Data

Now that we’ve set up the structure, it’s time to add data that will populate our timeline. There are multiple ways to do this. Here, within the JavaScript code of the chart, we’ll create a function called loadData() to add all the data as objects:

function loadData(){
  // The data comes here…
};

The data to be visualized consists of two main types:

Periods: Time ranges representing significant durations, like reigns of emperors or historical eras.
Events: Specific historical moments, such as battles or important occurrences.

Let’s proceed by adding the data for each type.

2.1. Define Periods (Ranges)

Periods are represented as time ranges. Each one has:

name: The label or title, such as “Legendary” or “Emperors.”
direction: Defines the orientation on the timeline as either pointing "up" (up) or "down" (down).
ranges: An array of specific data ranges, each with a name or title (name) to identify the period, start (start) and end (end) dates that mark the time span, and additional attributes like images (img) and descriptions (description).

For example, here’s the code defining the period of “Legendary” kings:

var periods = [{}];
periods[0] = {};
periods[0].name = "Legendary";
periods[0].direction = "up";
periods[0].ranges = [
  {
    name: "Romulus", 
    start: new Date(Date.UTC(-753, 0, 0)), 
    end: new Date(Date.UTC(-717, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg/250px-Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg",
    description: "The legendary founder and first king of Rome, who established the city's foundations."
  },
  // Other kings follow
];

Add more periods in a similar manner:

// 1) Add periods (ranges):
var periods = [{}];

// legendaries' years of life
periods[0] = {};
periods[0].name = "Legendary";
periods[0].direction = "up";
periods[0].ranges = [
  {
    name: "Romulus", 
    start: new Date(Date.UTC(-753, 0, 0)), 
    end: new Date(Date.UTC(-717, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg/250px-Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg",
    description: "The legendary founder and first king of Rome, who established the city's foundations."
  },

  // Other legendary kings follow

];

// consuls' years of rule
periods[1] = {};  
periods[1].name = "Consuls";
periods[1].direction = "up";
periods[1].ranges = [
  {
    name: "Consulate", 
    start: new Date(Date.UTC(-509, 0, 0)), 
    end: new Date(Date.UTC(-27, 0, 16)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Roman_SPQR_banner.svg/150px-Roman_SPQR_banner.svg.png",
    description: "Consuls were elected annually, and the position was often shared by two individuals, making it difficult to track the exact reign periods for all consuls over the centuries."
  }
];

// emperors' years of life
periods[2] = {};    
periods[2].name = "Emperors";
periods[2].direction = "up";
periods[2].ranges = [
  {
    name: "Augustus",
    start: new Date(Date.UTC(-27, 0, 16)),
    end: new Date("0014-08-19"),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Augustus_of_Prima_Porta_%28inv._2290%29.jpg/250px-Augustus_of_Prima_Porta_%28inv._2290%29.jpg",
    description: "First Roman emperor, marking the transition from the Roman Republic to the Empire."
  },

  // Other emperors follow

];

// historical states' years of existence
periods[3] = {};
periods[3].name = "Historical states";
periods[3].direction = "down";
periods[3].ranges = [
  {
    x: "Roman Kingdom", 
    start: new Date(Date.UTC(-753)), 
    end: new Date(Date.UTC(-509)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Platner_-_Ancient_Rome_city_growth.jpg/375px-Platner_-_Ancient_Rome_city_growth.jpg",
    description: "The Roman Kingdom is the earliest period of Roman history, traditionally dated from the founding of Rome in 753 BC to the overthrow of the last king in 509 BC, marking the transition from a monarchy to a republic."
  },

  // Other states follow

];

2.2. Define Events (Moments)

Events are individual moments that don't span long periods but occur on specific dates. Each one has:

name: The event’s title (e.g., "Sack of Rome by Gauls").
direction: Orientation on the timeline (up or down).
moments: An array of events that include names (y), dates (x), and additional attributes like images (img) and descriptions (description).

For example, here's how to define wars and battles:

var events = [];
events[0] = {};  
events[0].name = "Wars and Battles";
events[0].direction = "up";
events[0].moments = [
  {
    y: "Sack of Rome by Gauls", 
    x: new Date(Date.UTC(-390, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/8/88/La_Bataille_de_l%27allia_-_G.Surand.jpg",
    description: "Gauls under Brennus sacked Rome after the Battle of the Allia, causing major devastation."
  },
  // Other wars and battles follow
];

Add more events similarly:

// 2) Add moments (events):
var events = [];

// wars and battles
events[0] = {};  
events[0].name = "Wars and Battles";
events[0].direction = "up";
events[0].moments = [
  {
    y: "Sack of Rome by Gauls", 
    x: new Date(Date.UTC(-390, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/8/88/La_Bataille_de_l%27allia_-_G.Surand.jpg",
    description: "Gauls under Brennus sacked Rome after the Battle of the Allia, causing major devastation."
  },
  // Other wars and battles follow
];

// establishments
events[1] = {};  
events[1].name = "Establishments";
events[1].direction = "down";
events[1].moments = [
  {
    y: "Establishment of Rome", 
    x: new Date(Date.UTC(-753, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Kapitolinische_Wölfin_Museum_Capitolini.jpg/330px-Kapitolinische_Wölfin_Museum_Capitolini.jpg",
    description: "Rome was founded, according to legend, by Romulus and Remus."
  },

  // Other establishments follow

];

// disasters
events[2] = {};  
events[2].name = "Disasters";
events[2].direction = "down";
events[2].moments = [
  {
    y: "Assassination of Julius Caesar", 
    x: new Date(Date.UTC(-44, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Vincenzo_Camuccini_-_La_morte_di_Cesare.jpg/375px-Vincenzo_Camuccini_-_La_morte_di_Cesare.jpg",
    description: "Caesar was killed by Roman senators to stop his increasing power."
  },

// Other disasters follow

];

2.3. Complete Data Loading Function

Once all periods and events are defined, the loadData() function can be finalized, ensuring it returns both periods and events to populate the timeline chart:

// Function to add data for the timeline chart:
function loadData(){

  // 1) Add periods (ranges)
  // …

  // 2) Add events (moments)
  // …

  return {"periods": periods, "events": events}

};

This loadData() function is crucial, as it prepares the dataset that will feed into the chart graphically representing the periods and events of Roman history. With this step complete, we’re now ready to configure the timeline visualization of this data.

Step 3. Creating Timeline Chart

Now, let’s initialize and generate the timeline chart with the data we’ve added.

3.1. Prepare Ground

As previously mentioned, all the JavaScript code responsible for chart creation should be inside the <script> tag within the <body> section of the HTML document. Additionally, to ensure all the main charting code runs only after the entire page has fully loaded with all external resources, wrap it within the anychart.onDocumentReady() function. This prevents errors related to accessing elements before they exist. Here’s the basic structure:

<body>
  <script>
    anychart.onDocumentReady(function () {
      // The place for the main JavaScript Timeline Chart code
    });
  </script>
</body>

Then, declare a chart variable. In a typical case, it could be done within the anychart.onDocumentReady() function. However, since we will need to access it from other functions as well, we will declare it outside the function. The rest of the JavaScript code will be placed inside anychart.onDocumentReady(), unless specified otherwise.

<body>
  <script>
    // Create a chart variable here to be accessible from various places in the script
    var chart;
    // Ensure the main charting code runs after the page has loaded with all external resources
    anychart.onDocumentReady(function () {
      // Main JavaScript Timeline Chart code goes here
    });
    // Other functions go here
  </script>
</body>

3.2. Set Up Chart

Now, we need to set up the timeline chart. To create this type of data visualization, use the anychart.timeline() method. This initializes the chart object, which will be later configured with data and styling options.

chart = anychart.timeline();

To make sure the chart displays data within the right time frame, set the minimum and maximum dates for the timeline's scale. This helps display all periods and events properly, from early Roman history to later stages.

chart.scale().minimum(Date.UTC(-1000));
chart.scale().maximum(Date.UTC(1500));

These two lines define the visible range of the timeline from 1000 BC to 1500 AD.

3.3. Set Data to Chart

It’s time to populate the timeline with the data we’ve structured in the loadData() function in Step 2. Recall that this data includes periods (ranges) and events (moments).

3.3.1. Load Data

First, retrieve the structured data by calling loadData():

var data = loadData();

Now, we’ll set up the data series.

3.3.2. Set Series for Periods (Ranges)

To display the periods, i.e. a range series, use the range() method. The data for periods is in the periods array, and we will loop through it to set each period in the chart. Here’s how to loop through the periods and bind them to the chart:

// 1) Set the range series for periods (e.g., rulers, empires)
for (let i = 0; i < data.periods.length; i++) {
  var period = data.periods[i];
  var range = chart.range(period.ranges);
  range.name(period.name);
  range.direction(period.direction);    
  range.labels().fontFamily("Cinzel");
};

3.3.3. Set Series for Events (Moments)

For events, use the moment() method. Similarly, we’ll loop through the events array and create a moment series for each set of events.

// 2) Set the moment series for events (e.g., battles, establishment of states)
for (let i = 0; i < data.events.length; i++) {
  var event = data.events[i];
  var moment = chart.moment(event.moments);
  moment.name(event.name);
  moment.direction(event.direction);
  moment.labels().fontFamily("Cinzel");
};

3.4. Customize Tooltips

Tooltips enhance user experience by providing additional details when users hover over periods and events in the timeline. Both the period (range) and event (moment) series support rich HTML content, allowing you to display descriptions, images, and other information in a user-friendly format. Let’s customize the tooltips.

3.4.1. Configure Period Tooltips

For example, here’s how you can customize the tooltip for the range series (periods). First, create a tooltip variable:

var tooltip = range.tooltip();

Second, enable HTML content in the tooltip:

tooltip.useHtml(true);

Third, format the tooltip to include all the information that needs to be displayed, in the desired way:

tooltip.format(function(){
  var img = this.getData("img");
  var description = this.getData("description");
  return "<center><img src='" + img + "'/></center><p style='max-width: 250px;'>" + description + "</p>";
});

Fourth, if you don’t want to have the line separating the tooltip header from the tooltip content, simply remove it:

tooltip.separator(false);

Finally, it’s possible to customize the tooltip header separately:

// enable HTML in the tooltip header
tooltip.title().useHtml(true);
// format the tooltip header
tooltip.titleFormat(function(){
  // use the anychart.format.dateTime() method to format the dates      
  var start = anychart.format.dateTime(this.start, "y G");
  var end = anychart.format.dateTime( this.end, "y G");
  return "<p>" + this.x + " (" + start + " – " + end + ")</p>";
});

Here’s how the entire tooltip customization code looks in this case:

// create a variable
var tooltip = range.tooltip();
// enable HTML in the tooltip
tooltip.useHtml(true);
// format the tooltip content
tooltip.format(function(){
  var img = this.getData("img");
  var description = this.getData("description");
  return "<center><img src='" + img + "'/></center><p style='max-width: 250px;'>" + description + "</p>";
});
// disable the tooltip separator
tooltip.separator(false);
// enable HTML in the tooltip header
tooltip.title().useHtml(true);
// format the tooltip header
tooltip.titleFormat(function(){
  // use the anychart.format.dateTime() method to format the dates      
  var start = anychart.format.dateTime(this.start, "y G");
  var end = anychart.format.dateTime( this.end, "y G");
  return "<p>" + this.x + " (" + start + " – " + end + ")</p>";
});

3.4.2. Configure Event Tooltips

Similarly, customization can be applied to the tooltip of the moment series (events):

// create a variable
var tooltip = moment.tooltip();
// enable HTML in the tooltip
tooltip.useHtml(true);
// format the tooltip content
tooltip.format(function(){
  var img = this.getData("img");
  var description = this.getData("description");
  return "<center><img src='" + img + "'/></center><p style= 'max-width: 250px;'>" + description + "</p>";
});
// disable the tooltip separator
tooltip.separator(false);
// enable HTML in the tooltip header
tooltip.title().useHtml(true);
// format the tooltip header
tooltip.titleFormat(function(){
  var x = new Date(this.x);
  // use the anychart.format.dateTime() method for date formatting
  var formatted = anychart.format.dateTime(x, "y G");
  return "<p>" + this.value + ", " + formatted + "</p>";
});

3.4.3. Complete Tooltip Customization

Finally, let’s combine everything within the series configuration functions to ensure proper functionality in the current setting.

// 1) Set the range series for periods (e.g., rulers, empires)
for (let i = 0; i < data.periods.length; i++) {
  var period = data.periods[i];
  var range = chart.range(period.ranges);
  range.name(period.name);
  range.direction(period.direction);    
  range.labels().fontFamily("Cinzel");
  // Customize the range series tooltip:
  var tooltip = range.tooltip();
  // enable HTML in the tooltip
  tooltip.useHtml(true);
  // format the tooltip content
  tooltip.format(function(){
    var img = this.getData("img");
    var description = this.getData("description");
    return "<center><img src='" + img + "'/></center><p style='max-width: 250px;'>" + description + "</p>";
  });
  // disable the tooltip separator
  tooltip.separator(false);
  // enable HTML in the tooltip header
  tooltip.title().useHtml(true);
  // format the tooltip header
  tooltip.titleFormat(function(){
    // use the anychart.format.dateTime() method to format the dates      
    var start = anychart.format.dateTime(this.start, "y G");
    var end = anychart.format.dateTime( this.end, "y G");
    return "<p>" + this.x + " (" + start + " – " + end + ")</p>";
  });
};

// 2) Set the moment series for events (e.g., battles, establishment of states)
for (let i = 0; i < data.events.length; i++) {
  var event = data.events[i];
  var moment = chart.moment(event.moments);
  moment.name(event.name);
  moment.direction(event.direction);
  moment.labels().fontFamily("Cinzel");
  // Configure the moment series tooltip:
  var tooltip = moment.tooltip();
  // enable HTML in the tooltip
  tooltip.useHtml(true);
  // format the tooltip content
  tooltip.format(function(){
    var img = this.getData("img");
    var description = this.getData("description");
    return "<center><img src='" + img + "'/></center><p style= 'max-width: 250px;'>" + description + "</p>";
  });
  // disable the tooltip separator
  tooltip.separator(false);
  // enable HTML in the tooltip header
  tooltip.title().useHtml(true);
  // format the tooltip header
  tooltip.titleFormat(function(){
    var x = new Date(this.x);
    // use the anychart.format.dateTime() method for date formatting
    var formatted = anychart.format.dateTime(x, "y G");
    return "<p>" + this.value + ", " + formatted + "</p>";
  });
};

3.5. Enhance Navigation

Navigation plays a critical role in timeline charts, especially when working with extensive historical datasets. By default, you can use the mouse to navigate timeline charts: move along the timeline by dragging, and zoom in and out using the mouse wheel. To enrich this behavior and make the visualization even more navigable, let’s add a scrollbar element (scroller), zoom-on-click functionality (to zoom in on a moment or range), and zoom control buttons (to easily focus on specific eras in the timeline of Roman history).

3.5.1. Add Scrollbar

Adding a scrollbar allows users to navigate through the timeline easily. It can be enabled with a single line of code:

chart.scroller(true);

The scroller will appear below the timeline.

3.5.2. Set Up Zoom Interactivity

To make the timeline more interactive, let’s add an event listener that zooms into a specific period or event when clicked. Here’s how. First, add an event listener that triggers when a point (either a period or event) is clicked:

chart.listen("pointClick", function(e){
  // Configure the chart listener here
};

Second, declare variables that will define the area for zooming:

var start, end, gap;

Third, determine if the clicked element is a moment or a period:

var type = e.series.getType();

Fourth, configure the behavior for moments. We’ll zoom in on them with a 50-year margin before and after:

if (type == "moment") {
  var momentDate =  e.point.get("x");
  start = momentDate;
  end = momentDate;
  // 50 years in milliseconds
  gap = 1577880000000;
}

Fifth, specify the desired behavior for non-moment elements, i.e. periods. We’ll zoom into them with a 10% margin before and after.

else {
  start = e.point.get("start");
  end = e.point.get("end");
  gap = (end - start)/10;
}

Now that all prerequisites have been set up, use the zoomTo() method to finalize the configuration of the zooming functionality within the event listener.

chart.zoomTo(start - gap, end + gap);

Check out the entire code that configures this zoom interactivity within the event listener:

// Add an event listener to zoom into an element when it's clicked:
chart.listen("pointClick", function(e){
  var start, end, gap;
  // check if the clicked element is a moment or a period
  var type = e.series.getType();
  // configure the behavior for moments
  if (type == "moment") {
    var momentDate =  e.point.get("x");
    // zoom into the moment, showing 50 years before and after it
    start = momentDate;
    end = momentDate;
    // 50 years in milliseconds
    gap = 1577880000000;
  } else { // for periods (non-moment elements)
    // zoom into the period, showing 10% of its length before its start and after its end
    start = e.point.get("start");
    end = e.point.get("end");
    gap = (end - start)/10;
  };
  // zoom into the element when it's clicked
  chart.zoomTo(start - gap, end + gap);    
});

Importantly, since we're working with years and centuries (without the need for quarters, months, and so on), we should patch the zoom levels on the timeline scale. Configure this using a new function placed outside of anychart.onDocumentReady().

// Function to patch the zoom levels on the timeline scale
function patchedZoomLevels(){
  var customZoomLevels = [
    [
      {"unit": "month", "count": 1},
      {"unit": "quarter", "count": 1},
      {"unit": "year", "count": 1}
    ],
    [
      {"unit": "quarter", "count": 1},
      {"unit": "year", "count": 1},
      {"unit": "year", "count": 10}
    ],
    [
      {"unit": "year", "count": 1},
      {"unit": "year", "count": 10},
      {"unit": "year", "count": 50}
    ],
    [
      {"unit": "year", "count": 10},
      {"unit": "year", "count": 50},
      {"unit": "year", "count": 100}
    ],
    [
      {"unit": "year", "count": 50},
      {"unit": "year", "count": 100},
      {"unit": "year", "count": 500}
    ]    
  ];
  return customZoomLevels;  
};

Once the custom zoom levels are defined, call this function inside the anychart.onDocumentReady() block. This ensures the zoom levels are patched before the chart is drawn.

chart.scale().zoomLevels(patchedZoomLevels());

One more important thing: don’t forget to disable the selection functionality to ensure click tracking works correctly for zooming.

chart.interactivity().selectionMode("none");

3.5.3. Add Zoom Control Buttons

Next, let’s add buttons to facilitate zooming into key periods of Roman history: the Kingdom, Republic, Empire, and Two Empires. First, set up the period buttons in the <body> section of the HTML page.

<button id="period-button" onclick="zoomTo('kingdom')">Roman Kingdom</button>
<button id="period-button" onclick="zoomTo('republic')">Roman Republic</button>
<button id="period-button" onclick="zoomTo('empire')">Roman Empire</button>
<button id="period-button" onclick="zoomTo('empires')">Two Empires</button>

Then, write JavaScript to make the period buttons functional, using zoomTo(period) to implement zooming into the target periods when buttons are clicked.

function zoomTo(period) {
  switch (period) {
    case "kingdom":
      chart.zoomTo(Date.UTC(-755), Date.UTC(-505));
      break
    case "republic":
      chart.zoomTo(Date.UTC(-515), Date.UTC(-20));
      break
    case "empire":
      chart.zoomTo(Date.UTC(-40), Date.UTC(410));
      break
    case "empires":
      chart.zoomTo(Date.UTC(380), Date.UTC(1460));
      break
  } 
};

Let’s also add a button to reset the zoom level to fit the entire timeline within the chart, using zoomOut() with the chart.fit() method.

<button id="zoom-out" onclick="zoomOut()">Zoom out</button>

function zoomOut() {
  chart.fit();  
};

3.6. Add Era Designators

In this step, we’ll introduce era designators into our timeline chart. They will be appended to the years to indicate the era. AnyChart uses locales to manage date and time formats, including era designations such as “BC” (Before Christ) and “AD” (Anno Domini) or “BCE” (Before Common Era) and “CE” (Common Era), depending on the locale. You can modify the locale’s format properties to include era designators through a custom function placed outside the anychart.onDocumentReady() function.

function patchDateTimeLocale(){
  // read the current output locale and create a structured clone of it
  var currentOutputLocale =  structuredClone(anychart.format.locales[anychart.format.outputLocale()]);
  // read the formats object to prepare for creating a custom version of the locale
  var dateTimeLocaleFormats = currentOutputLocale.dateTimeLocale.formats;
  // loop through all available format keys to find those related to the current scale
  for (var format in dateTimeLocaleFormats){
    // "timeline_" is the scale we are looking for
    if (format.startsWith("timeline_")){
      // read and loop through an array of format values to insert an era designator
      var formatValues = dateTimeLocaleFormats[format];
      for (var i = 0; i < formatValues.length; i++) {
        // formats are usually represented by strings like "yyyy" or "dd MMMM yy HH:mm.SSS"
        var formatValue = formatValues[i];
        // there are two possible configurations of year representation inside a locale string "yyyy" and "yy"
        // we need to find both versions or neither to correctly modify the locale string
        var index4Y = formatValue.search(/y{4}/g)
        var index2Y = formatValue.search(/y{2}/g)
        // if there is a string representing a "yyyy" year, modify the format to include an era designator
        if (index4Y >= 0) {
          /*
          Create a new string that includes everything before and after the index identified earlier.
          The new string will include an era designator, but ensure the indexes are adjusted correctly,
          as we want to insert the era designator after the part of the string that represents the year.
          */
          var formatValuePatched1 = formatValue.slice(0, index4Y) + "y G" + formatValue.slice(index4Y + 4);
          formatValues[i] = formatValuePatched1;
        // if there is a string representing a "yy" year, modify the format to include an era designator
        } else if (index2Y > -1) {
          var formatValuePatched2 = formatValue.slice(0, index2Y + 1) + "y G" + formatValue.slice(index2Y + 3)
          formatValues[i] = formatValuePatched2
        }
      }
    }
  }
  // add the custom current output locale to AnyChart
  anychart.format.locales["custom"] = currentOutputLocale;
  // set the custom locale as the active locale
  anychart.format.outputLocale("custom");
};

Once the locale patching function is set, call it in the anychart.onDocumentReady() block. Make sure to put it before rendering the chart, so the timeline properly displays the era designators.

patchDateTimeLocale();

3.7. Set Font for Axis Labels

We’ve already applied the Cinzel font to series labels and tooltips. To maintain consistent typography throughout the timeline, we'll also set the axis label font to match the overall design. Here’s how to set it:

chart.axis().labels().fontFamily("Cinzel");

3.8. Set Chart Title

A title helps users immediately understand what the chart represents. We can easily add a title using the chart.title() method:

chart.title({
  text: "Roman Civilization",
  fontFamily: "Cinzel",
  fontSize: 32
});

3.9. Set Container and Draw Chart

To display the chart, we need to link it to a container and then render it. The container is the <div> element with id="container" that we created in the HTML.

chart.container("container");

Finally, draw the chart.

chart.draw();

This command renders the entire timeline chart in the specified container on the page.

3.10. Complete JavaScript Timeline Code

Feel free to view the complete JavaScript code for the timeline chart on AnyChart Playground. There, you can also download the entire project as an HTML file or ZIP archive.

Step 4. CSS Styling

Before viewing the final result, remember that CSS is essential for ensuring our page appears exactly how we want it. Let’s apply CSS to style the entire web timeline visualization, making the project look clean, organized, and visually appealing.

4.1. Style HTML, Body, Container

The following CSS ensures that the webpage and the chart container take up the full screen while maintaining a consistent layout. The container is positioned absolutely to cover the available space, ensuring the chart adjusts to fit the window properly.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  position: absolute;
  min-width: 1000px;
  width: 100%;
  top: 40px;
  bottom: 0;
}

4.2. Style Zoom Control Buttons

The following CSS styles the zoom control buttons, which are used to zoom in (and out) on specific periods of Roman history. The buttons are styled to look consistent with the Roman theme, using the “Cinzel” font and a modern blue shade for hover effects.

#period-button, #zoom-out {
  background-color: #bad5f1;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: "Cinzel", serif;
  margin-top: 5px;
  margin-left: 5px;
}

#period-button:hover, #zoom-out:hover {
  color: #fff;
  background-color: #1976d2;
}

#zoom-out {
  position: absolute;
  right: 5px;
}

4.3. Style Tooltips

To make the tooltip content, including images and text, more visually appealing and legible, we apply styles to the images and paragraphs that appear inside the tooltips.

img {
  max-width: 300px;
  max-height: 300px;
}

p {
  font-family: "Cinzel", serif;
  margin-top: 1px;
  margin-bottom: 1px;
}

4.4. Complete CSS Code

Here’s the complete CSS code that styles the container, buttons, and tooltip content.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  position: absolute;
  min-width: 1000px;
  width: 100%;
  top: 40px;
  bottom: 0;
}

#period-button, #zoom-out {
  background-color: #bad5f1;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: "Cinzel", serif;
  margin-top: 5px;
  margin-left: 5px;
}

#period-button:hover, #zoom-out:hover {
  color: #fff;
  background-color: #1976d2;
}

#zoom-out {
  position: absolute;
  right: 5px;
}

img {
  max-width: 300px;
  max-height: 300px;
}

p {
  font-family: "Cinzel", serif;
  margin-top: 1px;
  margin-bottom: 1px;
}

Result: Timeline Chart of Roman History

After following all the steps, including setting up the environment, adding data, configuring the chart, and applying styling, we now have a fully functional, interactive Timeline Chart of Roman Civilization with zoom control, custom tooltips, and a visually consistent design. The timeline displays historical periods and events with detailed information, providing an immersive experience.

Check it out on AnyChart Playground with the full source code, where you can also tweak the settings, modify the data, and experiment with new features.

Wrapping Up

Congratulations! We’ve successfully created a detailed, interactive timeline chart of Roman history using JavaScript. We’ve walked through everything from setting up the HTML structure, data, tooltips, zoom controls, and more. Hopefully, the steps were clear, and you’re now ready to build your own timeline visualizations.

Explore more examples in our timeline chart gallery and dive into the timeline chart documentation to discover other customization options and possibilities.

Happy JavaScript timeline charting!

How to Create an OHLC Chart in JavaScript

andreykh — Mon, 20 Nov 2023 06:57:13 +0000

Unearthing insights from vast datasets is an intricate blend of art and science. In the realm of financial analysis, a pivotal instrument for visually exploring complex data is the Open-High-Low-Close (OHLC) chart. This tutorial is your roadmap to swiftly crafting your OHLC chart using JavaScript, a step-by-step journey. We'll harness S&P 500 data, and by the end of this article, you'll possess the skills to orchestrate visual stock analysis adeptly.

What Is OHLC Chart?

Before we embark on this data visualization odyssey, let's uncover the essence of the OHLC chart type. An OHLC chart — denoting Open, High, Low, Close — is a potent ally in financial data analysis and visualization. It can meticulously encapsulate stock price dynamics over chosen timeframes, be it a day, an hour, or any other. Here's the significance of each facet within an OHLC chart:

Open (O): The open price inaugurates the financial instrument's price journey within the selected timeframe. It typically manifests as a horizontal mark on the chart's left side.
High (H): The high price represents the zenith reached during the designated time frame, crowning the vertical line.
Low (L): The low price marks the nadir recorded in the same timeframe, visible at the line's lower extremity.
Close (C): The close price is the finale, signaling the financial instrument's value at the selected timeframe's closure. It is often depicted as a horizontal mark on the chart's right side.

In summary, each vertical line in an OHLC chart delineates the price range during a specific time segment. The line's height is dictated by the highest and lowest prices, while the left and right marks signify the opening and closing prices, respectively. OHLC charts serve as indispensable tools for traders and analysts to decipher price trends, gauge price volatility, and pinpoint vital support and resistance levels — making them an integral asset in financial data analysis.

OHLC Chart Example

Take a glance at an example of an OHLC chart below. Actually, it’s the very creation that awaits you at the end of this tutorial — your visual guide to financial storytelling.

Ready to unfurl the financial narrative through the art of OHLC chart development with JavaScript? Without further ado, let’s embark on this data visualization expedition!

A. Building Basic OHLC Chart with JavaScript

Creating an OHLC chart might initially seem complex, but fret not, even if you're new to this. I'm here to guide you through each essential step in crafting a clear and informative one. We can achieve this by following these four steps:

Create a basic web page in HTML
Include the required JavaScript files
Load the data
Write the OHLC charting code

1. Create a basic web page in HTML

To start, let’s create an HTML page for our JS OHLC chart. Adding a <div> element with the ID "container" will provide a place to display the graphic. We can adjust the appearance of the chart by applying CSS rules within the <style> block. Here, we set the width and height properties to 100%, and the margin and padding to 0.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript OHLC Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
</body>
</html>

2. Include the required JavaScript files

Now that the basic HTML structure is in place, it's time to incorporate the JavaScript files necessary for creating our OHLC chart. We can add these to our project in two ways: by downloading and using them locally, or by linking to them through a Content Delivery Network (CDN). For this tutorial, let’s opt for the CDN approach, including links to the essential scripts in the <head> section of our HTML page. We'll use AnyChart JS Charts, and to create an OHLC chart, it’s necessary to include the Core and Stock modules, as well as the Data Adapter one, which will make it easy to load data from a file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript OHLC Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-stock.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    // The entire JS code for our OHLC chart visualization will be here.
  </script>
</body>
</html>

3. Load the data

Now, let's proceed with loading our data. As previously mentioned, we are going to visualize the S&P 500 data over time. This data is sourced from Yahoo Finance and organized in a CSV format, accessible on my GitHub gist. The CSV data contains six columns: Date, Open, High, Low, Close, and Volume, representing the date and corresponding price points for each date. To ensure the data integrates seamlessly into the OHLC view, we utilize the anychart.data.loadCsvFile() method powered by the Data Adapter script. Below is the code snippet we'll use.

anychart.data.loadCsvFile("https://gist.githubusercontent.com/awanshrestha/f234904bcc41b38dc3e6cb98ee563777/raw/c033b77d9ae698b322a6446befee4a7ed88be10e/SandP500Final.csv", function (data) {
  // The OHLC JS code lands here.
});

4. Write the OHLC charting code

Next, we’ll write a few lines of JavaScript code, and our OHLC chart will rise. To start, we employ the anychart.onDocumentReady() function, encapsulating all the code within it. This ensures that the code executes only after the page is fully loaded.

<script>
  anychart.onDocumentReady(function () {
    // The upcoming OHLC chart data and JS code will be in this section
  });
</script>

Then, we load data as explained in Step 3 and create a data table with this data.

anychart.onDocumentReady(function () {

  // load csv data
  anychart.data.loadCsvFile("https://gist.githubusercontent.com/awanshrestha/f234904bcc41b38dc3e6cb98ee563777/raw/c033b77d9ae698b322a6446befee4a7ed88be10e/SandP500Final.csv", function (data) {

    // create a data table
    var dataTable = anychart.data.table();
    dataTable.addData(data);

    // The upcoming OHLC JS charting code will be here

  });

});

As we map the columns from the data table into OHLC format, our data is completely ready.

var mapping = dataTable.mapAs({
  date: 0,
  open: 1,
  high: 2,
  low: 3,
  close: 4
});

Next, we create a stock chart instance, establish a chart plot, and add an OHLC series binding it with the mapped data.

// create a stock chart
var chart = anychart.stock();

// create the chart plot
var plot = chart.plot(0);

// create an ohlc series and bind it to the mapped data
var ohlcSeries = plot.ohlc(mapping);

While doing this, let’s also set the chart to display data within a specific time range, much like zooming into a particular timeframe on a timeline.

chart.selectRange("2021-03-01", "2023-08-20");

Finally, we name the chart, place it in the container created in Step 1, and render the resulting OHLC chart visualization.

// set the chart title
chart.title("S&P 500 OHLC Chart");

// set the container id for the chart
chart.container("container");

// initiate the chart drawing
chart.draw();

Tada! Our basic JavaScript-based OHLC chart is ready for exploration. You can find it on Playground. Additionally, for your convenience, the code is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript OHLC Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-stock.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    anychart.onDocumentReady(function () {
      // load csv data
      anychart.data.loadCsvFile("https://gist.githubusercontent.com/awanshrestha/f234904bcc41b38dc3e6cb98ee563777/raw/c033b77d9ae698b322a6446befee4a7ed88be10e/SandP500Final.csv", function (data) {
        // create a data table
        var dataTable = anychart.data.table();
        dataTable.addData(data);
        // map the columns from the data table into the ohlc format
        var mapping = dataTable.mapAs({
          date: 0,
          open: 1,
          high: 2,
          low: 3,
          close: 4
        });
        // create a stock chart
        var chart = anychart.stock();
        // create the chart plot
        var plot = chart.plot(0);
        // create an ohlc series and bind it to the mapped data
        var ohlcSeries = plot.ohlc(mapping);
        // set the date/time range displayed by default
        chart.selectRange("2021-03-01", "2023-08-20");
        // set the chart title
        chart.title("S&P 500 OHLC Chart");
        // set the container id for the chart
        chart.container("container");
        // initiate the chart drawing
        chart.draw();
      });
    });
  </script>
</body>
</html>

B. Customizing OHLC Chart

Now that our basic JS-based OHLC chart is in place, let's explore ways to enhance its visuals and functionality, making it more informative and visually appealing.

1. Color and outlook customization

A well-chosen color scheme can enhance the visual appeal and clarity of any chart. In this step, we'll tweak the default shades of the chart to infuse more vibrancy into it. First, let’s set the background color of the chart to a soothing light blueish-gray shade.

chart.background().fill("#edf4f5");

Additionally, we can customize the color of the lines, both in normal and different states.

// customize the color of the ohlc bars
ohlcSeries.fallingFill("#ff0d0d");
ohlcSeries.fallingStroke("#ff0d0d");
ohlcSeries.risingFill("#43ff43");
ohlcSeries.risingStroke("#43ff43");

// additional customization for the ohlc series
ohlcSeries.normal().risingStroke("#33ccff");
ohlcSeries.hovered().risingStroke("#33ccff", 1.5);
ohlcSeries.selected().risingStroke("#33ccff", 3);
ohlcSeries.normal().fallingStroke("#ff33cc");
ohlcSeries.hovered().fallingStroke("#ff33cc", 1.5);
ohlcSeries.selected().fallingStroke("#ff33cc", 3);

Also, let’s name the series “S&P” and customize the legend item for the OHLC series to display a rising-falling icon.

// name the ohlc series
ohlcSeries.name("S&P");

// customize the legend item for the ohlc series
// to display a rising/falling icon
ohlcSeries.legendItem().iconType("rising-falling");

2. Add Date Range Selection UI

While there is already a scroller at the bottom of the OHLC visualization to select the date range, we can still improve the navigation experience. Let’s add a date range picker and a range selector, enhancing the chart’s UI.

// create a date range picker
var rangePicker = anychart.ui.rangePicker();
rangePicker.render(chart);

// create a date range selector
var rangeSelector = anychart.ui.rangeSelector();
rangeSelector.render(chart);

3. Integrate event markers

World affairs and events play a significant role in stock market prices, so it can make sense to highlight specific dates and mark these events directly within the OHLC chart. Below is how we can add event markers precisely, with data points for individual events, including symbols, dates, descriptions, and styling attributes for normal, hovered, and selected states.

// add event markers
plot.eventMarkers({
  "groups": [
    {
      "data": [
        {
          "symbol": "1",
          "date": "2020-03-11",
          "description": "The WHO declares COVID-19 a global pandemic",
          "normal": {
            "type": "rect", "width": 40,
            "fill": "#ead9d1", "stroke": "2 #990033",
            "fontColor": "#990033", "fontWeight": 600,
            "connector": { "stroke": "2 #990033" }
          }
        },
        {
          "symbol": "2",
          "date": "2021-03-08",
          "description": "The first COVID-19 vaccine is approved for use in the U.S.",
          "normal": {
            "type": "circle",
            "fill": "#d1ead9", "stroke": "2 #009933",
            "fontColor": "#009933", "fontWeight": 600,
            "connector": { "stroke": "2 #009933" }
          }
        },
        {
          "symbol": "3",
          "date": "2022-02-24",
          "description": "Russia starts a military operation in Ukraine",
          "normal": {
            "type": "rect", "width": 40,
            "fill": "#ead9d1", "stroke": "2 #990033",
            "fontColor": "#990033", "fontWeight": 600,
            "connector": { "stroke": "2 #990033" }
          }
        },
        {
          "symbol": "4",
          "date": "2023-05-03",
          "description": "The Federal Reserve announces a rate hike to combat inflation, exceeding 5%",
          "normal": {
            "type": "circle",
            "fill": "#d1ead9", "stroke": "2 #009933",
            "fontColor": "#009933", "fontWeight": 600,
            "connector": { "stroke": "2 #009933" }
          },
          "hovered": {
            "fill": "white", "stroke": "2 #990033",
            "fontColor": "#990033",
            "connector": { "stroke": "2 #990033" }
          },
          "selected": {
            "fill": "white", "stroke": "2 #4d1a00",
            "fontColor": "#4d1a00",
            "connector": { "stroke": "2 #4d1a00" }
          }
        },
      ]
    }
  ]
});

// set the event marker symbol
plot.eventMarkers().format(function () {
  return this.getData("symbol");
});

4. Add annotations

Annotations can be greatly helpful in providing additional context, emphasizing specific points or areas to enhance data interpretation. They are particularly useful for explaining trends or outliers, making charts more insightful and easier to understand. To add annotations, start by creating an annotation object.

var annotation = plot.annotations();

Next, let’s create a rectangle annotation with specified coordinates, stroke, and fill properties. The rectangle will mark a particular area on the plot between two dates and two values, with defined stroke and fill colors.

annotation.rectangle({
  xAnchor: "2022-02-24",
  valueAnchor: 3491,
  secondXAnchor: "2022-06-04",
  secondValueAnchor: 4637,
  stroke: "3 #e65a37",
  fill: "#e65a37 0.25"
});

Following this, we create a text label annotation to provide additional information.

annotation.label()
  .xAnchor("2022-02-24")
  .valueAnchor(4900)
  .anchor("left-top")
  .offsetY(5)
  .padding(6)
  .text("First 100 days since Ukraine was attacked")
  .fontColor("#fff")
  .background({
    fill: "#e65a37 0.75",
    stroke: "0.5 #2d2d2d",
    corners: 2
});

5. Add KDJ indicator

In the realm of technical analysis, numerous indicators aid in the evaluation of stock trends. Let's explore how to integrate the KDJ indicator, a popular tool for analyzing and predicting stock trends, helping identify potential buy and sell signals. To begin, we create a new plot specifically for displaying the KDJ indicator.

var kdjPlot = chart.plot(1);

To calculate the KDJ indicator, we need specific data points, typically high, low, and closing prices. We map these data points from the original data table to use with the KDJ indicator.

var kdjMapping = dataTable.mapAs({
  high: 2,
  low: 3,
  close: 4
});

We then create the KDJ indicator itself, specifying the mapping and the default periods for %K, %D, and %J.

var kdj = kdjPlot.kdj(kdjMapping, 14, 3, 3);
// (default values: 14 periods for %k, 3 periods for %d, 3 periods for %j)
kdj.kSeries().stroke("purple"); // customize the %k line color
kdj.dSeries().stroke("green");  // customize the %d line color
kdj.jSeries().stroke("orange"); // customize the %j line color

To ensure the KDJ plot is displayed appropriately, we can set its height.

kdjPlot.height("20%");

6. Display volume data in the scroller

The scroller is enabled by default at the bottom of an OHLC stock chart and is used for navigation through time. It’s possible to incorporate a series into it to enhance its functionality. For instance, let’s supply the scroller with a series representing volume data. We first map the volume data to the scroller.

var volumeMapping = dataTable.mapAs({
  "value": 5
});

Then we integrate the volume data into the scroller, making it appear as a line series.

chart.scroller().line(volumeMapping);

Our final JavaScript (HTML5) OHLC chart is complete after all these steps! Feel free to check it out with the full code below, as well as on Playground where you can make further changes as needed and continue experimenting with various other features (get inspired by the stock chart gallery and the stock chart documentation).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript OHLC Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-stock.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    anychart.onDocumentReady(function () {
      // load csv data
      anychart.data.loadCsvFile("https://gist.githubusercontent.com/awanshrestha/f234904bcc41b38dc3e6cb98ee563777/raw/c033b77d9ae698b322a6446befee4a7ed88be10e/SandP500Final.csv", function (data) {
        // create a data table
        var dataTable = anychart.data.table();
        dataTable.addData(data);
        // map the columns from the data table into the ohlc format
        var mapping = dataTable.mapAs({
          date: 0,
          open: 1,
          high: 2,
          low: 3,
          close: 4
        });
        // add the volume data mapping
        var volumeMapping = dataTable.mapAs({
          "value": 5
        });
        // create a stock chart
        var chart = anychart.stock();
        // create the chart plot
        var plot = chart.plot(0);
        // create an ohlc series and bind it to the mapped data
        var ohlcSeries = plot.ohlc(mapping);
        // set the chart background color
        chart.background().fill("#edf4f5");
        // add the volume data as the scroller series
        chart.scroller().line(volumeMapping);
        // customize the color of the ohlc bars
        ohlcSeries.fallingFill("#ff0d0d");
        ohlcSeries.fallingStroke("#ff0d0d");
        ohlcSeries.risingFill("#43ff43");
        ohlcSeries.risingStroke("#43ff43");
        // additional customization for the ohlc series
        ohlcSeries.normal().risingStroke("#33ccff");
        ohlcSeries.hovered().risingStroke("#33ccff", 1.5);
        ohlcSeries.selected().risingStroke("#33ccff", 3);
        ohlcSeries.normal().fallingStroke("#ff33cc");
        ohlcSeries.hovered().fallingStroke("#ff33cc", 1.5);
        ohlcSeries.selected().fallingStroke("#ff33cc", 3);
        // name the ohlc series
        ohlcSeries.name("S&P");
        // customize the legend item for the ohlc series
        // to display a rising/falling icon
        ohlcSeries.legendItem().iconType("rising-falling");
        // create a date range picker
        var rangePicker = anychart.ui.rangePicker();
        rangePicker.render(chart);
        // create a date range selector
        var rangeSelector = anychart.ui.rangeSelector();
        rangeSelector.render(chart);
        // add event markers
        plot.eventMarkers({
          "groups": [
            {
              "data": [
                {
                  "symbol": "1",
                  "date": "2020-03-11",
                  "description": "The WHO declares COVID-19 a global pandemic",
                  "normal": {
                    "type": "rect", "width": 40,
                    "fill": "#ead9d1", "stroke": "2 #990033",
                    "fontColor": "#990033", "fontWeight": 600,
                    "connector": { "stroke": "2 #990033" }
                  }
                },
                {
                  "symbol": "2",
                  "date": "2021-03-08",
                  "description": "The first COVID-19 vaccine is approved for use in the U.S.",
                  "normal": {
                    "type": "circle",
                    "fill": "#d1ead9", "stroke": "2 #009933",
                    "fontColor": "#009933", "fontWeight": 600,
                    "connector": { "stroke": "2 #009933" }
                  }
                },
                {
                  "symbol": "3",
                  "date": "2022-02-24",
                  "description": "Russia starts a military operation in Ukraine",
                  "normal": {
                    "type": "rect", "width": 40,
                    "fill": "#ead9d1", "stroke": "2 #990033",
                    "fontColor": "#990033", "fontWeight": 600,
                    "connector": { "stroke": "2 #990033" }
                  }
                },
                {
                  "symbol": "4",
                  "date": "2023-05-03",
                  "description": "The Federal Reserve announces a rate hike to combat inflation, exceeding 5%",
                  "normal": {
                    "type": "circle",
                    "fill": "#d1ead9", "stroke": "2 #009933",
                    "fontColor": "#009933", "fontWeight": 600,
                    "connector": { "stroke": "2 #009933" }
                  },
                  "hovered": {
                    "fill": "white", "stroke": "2 #990033",
                    "fontColor": "#990033",
                    "connector": { "stroke": "2 #990033" }
                  },
                  "selected": {
                    "fill": "white", "stroke": "2 #4d1a00",
                    "fontColor": "#4d1a00",
                    "connector": { "stroke": "2 #4d1a00" }
                  }
                },
              ]
            }
          ]
        });
        // set the event marker symbol
        plot.eventMarkers().format(function () {
          return this.getData("symbol");
        });
        // create annotations
        var annotation = plot.annotations();
        // create a rectangle annotation
        annotation.rectangle({
          xAnchor: "2022-02-24",
          valueAnchor: 3491,
          secondXAnchor: "2022-06-04",
          secondValueAnchor: 4637,
          stroke: "3 #e65a37",
          fill: "#e65a37 0.25"
        });
        // create a text label annotation
        annotation.label()
          .xAnchor("2022-02-24")
          .valueAnchor(4900)
          .anchor("left-top")
          .offsetY(5)
          .padding(6)
          .text("First 100 days since Ukraine was attacked")
          .fontColor("#fff")
          .background({
            fill: "#e65a37 0.75",
            stroke: "0.5 #2d2d2d",
            corners: 2
          });
        // create a kdj indicator plot
        var kdjPlot = chart.plot(1);
        // map the necessary data for the kdj calculation
        var kdjMapping = dataTable.mapAs({
          high: 2,
          low: 3,
          close: 4
        });
        // create a kdj indicator
        var kdj = kdjPlot.kdj(kdjMapping, 14, 3, 3);
        // (default values: 14 periods for %k, 3 periods for %d, 3 periods for %j)
        kdj.kSeries().stroke("purple"); // customize the %k line color
        kdj.dSeries().stroke("green");  // customize the %d line color
        kdj.jSeries().stroke("orange"); // customize the %j line color
        // set the kdj plot's height
        kdjPlot.height("20%");
        // set the date/time range displayed by default
        chart.selectRange("2021-03-01", "2023-08-20");
        // set the chart title
        chart.title("S&P 500 OHLC Chart");
        // set the container id for the chart
        chart.container("container");
        // initiate the chart drawing
        chart.draw();
      });
    });
  </script>
</body>
</html>

Conclusion

Delving into the world of OHLC charts might have appeared daunting initially, but in just a few minutes, we’ve created a stunning one using JavaScript. I hope this tutorial has been enlightening and enjoyable, and that it has equipped you with the skills to create and customize interactive OHLC charts for your specific needs. The stage is now set for you to explore and tailor these charts further to align with your distinct requirements. If you ever find yourself in need of assistance or have any questions, don't hesitate to reach out. I'm here to help you on your charting journey. Happy charting!

Check out more JavaScript charting tutorials.

Got a guest post idea? Let’s make it work!

Nobel Laureates’ Countries, or Creating a Word Cloud with JS

andreykh — Fri, 13 Oct 2023 14:06:16 +0000

The Nobel Prize 2023 announcements are just around the corner, scheduled from October 2 to 9. Recently, I stumbled upon this news, sparking my interest in Nobel laureates and their countries of origin.

This curiosity led me to the comprehensive list of Nobel Prize winners on Britannica, which I transformed into an interactive tag cloud (or word cloud) using JavaScript, providing an elegant means to explore and uncover the countries with the highest number of Nobel laureates throughout history.

During this process, it dawned on me that this visualization could serve as an excellent illustrative example for a tutorial on creating interactive JS-based tag clouds. So, if you share my curiosity about Nobel laureates by country, you're in for a treat right below! and if you're eager to learn how I brought this tag cloud to life — and, therefore, how you can create your own — read on!

B. Customizing JS Tag Cloud

After getting that basic JavaScript tag cloud, I decided to add some customizations to improve the chart’s view.

1. Modifying the Font

First, I changed the font. For the title customization, I used HTML.

chart
  .title()
  .enabled(true)
  .useHtml(true)
  .text(
    '<span style="font-size: 20px;">Nobel Laureates by Country</span>'
  );

I also adjusted the tags.

chart
  .normal()
  .fontWeight(600)
  .fontVariant('small-caps');

2. Changing the Angle

Second, I changed the way the tags are oriented by setting the angle to zero to make them all displayed horizontally.

chart.angles([0]);

3. Improving the Visual Appearance

Third, I changed the colors and added a color range. I created a color scale using the anychart.scales.ordinalColor() function and passed an array of colors to it. Then I set the color scale to the tag cloud chart and added a color range.

// create and configure a color scale
let customColorScale = anychart.scales.ordinalColor();
customColorScale.colors(['#077fe8', '#1c9447', '#970fff',  '#c47900', '#e80707','#323238']);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

// get the color range
let colorRange = chart.colorRange();
// enable the color range
colorRange
  .enabled(true)
  .colorLineSize(15);

4. Enhancing the Tooltip

Fourth, I improved the tooltip, a hint that shows up when you hover over the words in an interactive tag cloud. I accessed the tooltip() function and used the format() function to change the tooltip content.

chart
  .tooltip()
  .format('Total Nobel Laureates: {%value}\n Continent: {%category}');

5. Adding interactivity With Link Opening

Finally, I decided to add an event listener so that a new page opens up to provide more information when a country is clicked. I used the listen() function to "listen" when one clicks on a country’s tag. When I could access the URL property in the data array and add the window.open() function to open the web page with that URL. I also passed the _blank property to make the URL open in a new tab.

chart.listen("pointClick", function(e){
  var url = e.point.get("url").toString();
  window.open(url, "_blank");
});

After all these customizations, I ended up getting a cool, interactive, JavaScript-based tag cloud demonstrated below.

It's the final version of the tag cloud I was satisfied with. Check it out with the full source code on CodePen [and on Playground] and feel free to play around with colors, interactivity, and so on — use all your creativity, and I am sure you will enjoy the process. For your convenience, I am also putting the final JS tag cloud code below.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Tag Cloud</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-tag-cloud.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add data
        var data = [
          { "x": "Alsace", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Austria", "value": 12, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Austria"},
          { "x": "Austria-Hungary", "value": 3, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Austria"},
          { "x": "Australia", "value": 8, "category": "Australia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Australia"},
          { "x": "Argentina", "value": 5, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Argentina"},
          { "x": "Bangladesh", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Bangladesh"},
          { "x": "Belarus", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Belarus"},
          { "x": "Belgium", "value": 9, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Belgium"},
          { "x": "Bulgaria", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Bulgaria"},
          { "x": "Canada", "value": 15, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Canada"},
          { "x": "Chile", "value": 2, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Chile"},
          { "x": "China", "value": 5, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#China,_(People's_Republic_of_China)"},
          { "x": "Colombia", "value": 2, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Colombia"},
          { "x": "Costa Rica", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Costa_Rica"},
          { "x": "Cyprus", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Cyprus"},
          { "x": "Czechoslovakia", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Czech_Republic"},
          { "x": "Democratic Republic of the Congo", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Congo,_Democratic_Republic"},
          { "x": "Denmark", "value": 13, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Denmark"},
          { "x": "Egypt", "value": 4, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Egypt"},
          { "x": "Ethiopia", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ethiopia"},
          { "x": "Finland", "value": 4, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Finland"},
          { "x": "France", "value": 60, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#France"},
          { "x": "Germany", "value": 61, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Ghana", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ghana"},
          { "x": "Greece", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Greece"},
          { "x": "Guatemala", "value": 2, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Guatemala"},
          { "x": "Hungary", "value": 3, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Hungary"},
          { "x": "Iceland", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iceland"},
          { "x": "India", "value": 5, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#India"},
          { "x": "Iran", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iran"},
          { "x": "Iraq", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iraq"},
          { "x": "Ireland", "value": 7, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ireland"},
          { "x": "Israel", "value": 13, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Israel"},
          { "x": "Italy", "value": 15, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Italy"},
          { "x": "Japan", "value": 25, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Japan"},
          { "x": "Kenya", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Kenya"},
          { "x": "Liberia", "value": 2, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Liberia"},
          { "x": "Luxembourg", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Luxembourg"},
          { "x": "Mexico", "value": 2, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Mexico"},
          { "x": "Myanmar", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Myanmar"},
          { "x": "Netherlands", "value": 19, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Netherlands"},
          { "x": "Nigeria", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Nigeria"},
          { "x": "Norway", "value": 11, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Norway"},
          { "x": "Northern Ireland", "value": 4, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ireland"},
          { "x": "Pakistan", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Pakistan"},    
          { "x": "Peru", "value": 1, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Peru"},
          { "x": "Philippines", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Philippines"},
          { "x": "Poland", "value": 5, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Poland"},
          { "x": "Portugal", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Portugal"},
          { "x": "Russia", "value": 7, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union"},
          { "x": "Spain", "value": 6, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Spain"},
          { "x": "South Africa", "value": 7, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#South_Africa"},
          { "x": "South Korea", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#South_Korea"},
          { "x": "St. Lucia", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Saint_Lucia"},
          { "x": "Sweden", "value": 34, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Sweden"},
          { "x": "Switzerland", "value": 24, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Switzerland"},
          { "x": "Tanzania", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Tanzania"},
          { "x": "Tibet", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Tibet"},
          { "x": "Timorese", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#East_Timor"},
          { "x": "Trinidad", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Trinidad_and_Tobago"},
          { "x": "Turkey", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Turkey"},
          { "x": "Ukraine", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ukraine"},
          { "x": "United Kingdom", "value": 119, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#United_Kingdom"},
          { "x": "United States", "value": 393, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#United_States"},
          { "x": "U.S.S.R.", "value": 15, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union"},
          { "x": "Vietnam", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Vietnam"},
          { "x": "West Germany", "value": 23, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Yemen", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Yemen"},
          { "x": "Yugoslavia", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Yugoslavia"}
        ];
        // create a tag cloud with the added data
        var chart = anychart.tagCloud(data);
        // set the chart title
        chart.title("Nobel Laureates by Country");
        // set the container element id
        chart.container("container");
        // initiate the drawing of the chart
        chart.draw();
      });
    </script>
  </body>
</html>

Conclusion

Well, this is how I created my tag cloud using JavaScript (HTML5), displaying the statistics of the Nobel laureates by country. I hope my stepwise tutorial will help you quickly get your own charts of this type up and running. Leave your questions in the comments, if any, and I would love to check out your tag clouds.

Published with the permission of Awan Shrestha. Originally appeared on HackerNoon with the title "Nobel Laureates by Country - Or Creating a Tag Cloud With JavaScript" on October 2, 2023.

You may also like to read the JavaScript World Cloud Tutorial originally published on the AnyChart blog earlier, visualizing the most popular languages worldwide.

Check out more JavaScript charting tutorials and continue mastering interactive data visualization.

How to Create a Pie Chart in JavaScript: IPL Winnership

andreykh — Sat, 30 Sep 2023 12:46:26 +0000

The pie chart, a widely used chart type yet also a topic of debate here and there, has cemented its place in the realm of data visualization. When used appropriately, it provides an intuitive insight into the composition of data, with each slice of the pie representing a distinct component. In this tutorial, I'll guide you through a straightforward path of creating interactive pie charts using JavaScript.

Every chart begins with data. To demonstrate the concepts in this tutorial, I decided to visualize the composition of the Indian Premier League (IPL) winnership over its 16-season history.

Whether you're a novice or an experienced coder, get ready to immediately acquire the valuable skills of crafting visually appealing JS-based pie charts from scratch.

Steps to Create a JS Pie Chart

The toss is done, and it's time to step onto the field. Come along as I guide you through crafting a functional, interactive pie chart with JavaScript in just four straightforward steps.

1. Setting the stage

Before we dive into code, let's prepare our canvas. Every chart needs a container, so we'll start by creating a simple HTML page. Within it, we'll define a container element with a unique ID to host our pie chart. If you want the chart to fill the entire page, set the container's width and height parameters in CSS to 100%.

<html>
  <head>
    <title>Pie Chart in JS</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
        } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Gathering tools

Building a JavaScript pie graph from scratch can be a daunting task, but we're in luck! There are plenty of JS charting libraries that provide pre-built functions and features, making data visualization development seamless. For this tutorial, I’ve chosen the AnyChart JS library, suitable for beginners and experts alike, but feel free to use your favorite one as the logic of the process will be the same.

We'll connect the necessary library files from a content delivery network (CDN). These scripts will reside in the <head> section of our HTML page, setting the stage for our pie chart. The JavaScript code itself will be placed between the <script> and </script> tags, which can be added to either the <head> or the <body> sections.

<html>
  <head>
    <title>Pie Chart in JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pie.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS Pie Chart will come here
    </script>
  </body>
</html>

3. Adding data

Charts rely on data, and we've got options for how to incorporate it. In this tutorial, we'll manually input the data directly into our JavaScript charting code. However, keep in mind that you can, of course, also fetch data from databases or files.

let data = anychart.data.set([
  ["Chennai Super Kings", 5],
  ["Mumbai Indians", 5],
  ["Kolkatta Knight Riders", 2],
  ["Deccan Chargers", 1],
  ["Gujarat Titans", 1],
  ["Rajasthan Royal", 1],
  ["Sunrisers Hyderabad", 1],
]);

4. Writing a JavaScript charting code

Now, let's transition from scoring singles to hitting those thrilling fours and sixes. You'll see how just a few lines of code can create an interactive JS pie chart in no time.

Firstly, to ensure everything runs smoothly, we enclose all our code within a function. This guarantees that our chart-building process only begins after the page has fully loaded. The data goes directly there as the first ball.

anychart.onDocumentReady(function () {
  // add the data
  let data = anychart.data.set([
    ["Chennai Super Kings", 5],
    ["Mumbai Indians", 5],
    ["Kolkatta Knight Riders", 2],
    ["Deccan Chargers", 1],
    ["Gujarat Titans", 1],
    ["Rajasthan Royal", 1],
    ["Sunrisers Hyderabad", 1]
  ]);
  // The upcoming JS code goes here...
});

Now, for the game-changing moment — we create a pie chart instance with a single line of code.

let chart = anychart.pie(data);

To provide context to our pie graphic and help viewers understand its purpose, let’s add a descriptive title.

chart.title("IPL Winnership Over 16 Seasons");

Lastly, we refer to the HTML element designated earlier as the chart container and, with a simple command, draw the resulting pie chart.

chart.container("container");
chart.draw();

And there you have it! A nice chart that vividly visualizes the composition of the IPL winnership over the entire span of 16 seasons. You'll notice that the top two teams dominate, accounting for almost two-thirds of all IPL titles during this period. Feel free to explore the initial version here with the code; the complete HTML/CSS/JS code is also below.

<html>
  <head>
    <title>Pie Chart in JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pie.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add the data
        let data = anychart.data.set([
          ["Chennai Super Kings", 5],
          ["Mumbai Indians", 5],
          ["Kolkatta Knight Riders", 2],
          ["Deccan Chargers", 1],
          ["Gujarat Titans", 1],
          ["Rajasthan Royal", 1],
          ["Sunrisers Hyderabad", 1],
        ]);
        // create a pie chart with the data
        let chart = anychart.pie(data);
        // set the chart title
        chart.title("IPL Winnership Over 16 Seasons");
        // set container id for the chart
        chart.container("container");
        // initiate chart drawing
        chart.draw();
      });
    </script>
  </body>
</html>

Some Options to Customize a Pie Chart

Now that we've created a basic JS pie chart, let's delve into possible ways of customizing it to elevate its visual appeal.

1. Modify the color palette

A smart way to enhance a chart is by using colors that are relevant to the data it represents. In our case, since we're plotting IPL teams, why not incorporate the primary colors from each team's logo?

To achieve this, we'll create a customized color palette and apply it to the initial pie chart.

// create a custom palette
let palette = anychart.palettes.distinctColors();
// set the colors according to the team brands
palette.items([
  {color: "#004f91"},
  {color: "#fcce06"},
  {color: "#3a225d"},
  {color: "#9a1c22"},
  {color: "#254aa5"},
  {color: "#D9E3EF"},
  {color: "#02183c"}
]);
// set the palette to the chart
chart.palette(palette);

2. Format the labels and disable the legend

Let's enhance the readability of the pie chart by improving the labels on the slices. We can display information about both the team and the number of titles won in an explicit manner.

Using abbreviations instead of full team names can be a wise choice to maintain chart conciseness and visual appeal. So, first, we’ll incorporate the abbreviations into the data.

// add the data
let data = anychart.data.set([
  ["Chennai Super Kings", 5, "CSK"],
  ["Mumbai Indians", 5, "MI"],
  ["Kolkatta Knight Riders", 2, "KKR"],
  ["Deccan Chargers", 1, "DC"],
  ["Gujarat Titans", 1, "GT"],
  ["Rajasthan Royal", 1, "RR"],
  ["Sunrisers Hyderabad", 1, "SRH"]
]);
// create a pie chart with the data, naming the values in the dataset
let chart = anychart.pie(data.mapAs({name: 0, value: 1, abbr: 2}));

Next, we'll proceed to configure the labels themselves. Our goal is to format them, displaying the team abbreviation alongside the number of titles won. Additionally, we'll specify a font size larger than the default to ensure the labels have a more pronounced visual impact. To guarantee that all labels, including those exceeding the pie slice boundaries, remain easily visible, we'll position them outside the chart; adjusting the label position to "outside" ensures each label is automatically linked to its corresponding slice with a connecting line.

chart
  .labels()
  .format("{%abbr} — {%value}")
  .fontSize(14)
  .position("outside");

Since all labels are now readily visible, let’s disable the legend to avoid redundancy.

chart.legend(false);

3. Improve the tooltip

Using a tooltip is an effective approach to providing additional information within a chart. While our pie visualization already presents the necessary information, we can further enhance it by modifying the tooltip using the format() function.

chart
  .tooltip()
  .format("Percent of total wins: {%PercentValue}{decimalsCount: 1}%");

4. Enhance the chart title

A title can be an important element that complements a data graphic. For example, let’s customize the pie chart’s one and include a subtitle to highlight the main takeaway.

chart
  .title()
  .enabled(true)
  .useHtml(true)
  .text(
    '<span style = "color: #111; font-size:20px; margin-bottom:10px; dy:20px">IPL Winnership Over 16 Seasons</span>' +
      '<br/><span style="color:#173685; font-size: 15px;">Among the 10 current IPL teams, 2 dominate, and 3 have never won the title</span>'
  );

Observe the sophisticated and refined appearance of the JavaScript pie chart now! You can access the interactive version along with the code for this tutorial’s final chart here; the complete HTML/CSS/JS code is also below.

<html>
  <head>
    <title>Pie Chart in JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pie.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add the data
        let data = anychart.data.set([
          ["Chennai Super Kings", 5, "CSK"],
          ["Mumbai Indians", 5, "MI"],
          ["Kolkatta Knight Riders", 2, "KKR"],
          ["Deccan Chargers", 1, "DC"],
          ["Gujarat Titans", 1, "GT"],
          ["Rajasthan Royal", 1, "RR"],
          ["Sunrisers Hyderabad", 1, "SRH"]
        ]);
        // create a pie chart with the data, naming the values in the dataset
        let chart = anychart.pie(data.mapAs({name: 0, value: 1, abbr: 2}));
        // create a custom palette
        let palette = anychart.palettes.distinctColors();
        // set the colors according to the team brands
        palette.items([
          {color: "#004f91"},
          {color: "#fcce06"},
          {color: "#3a225d"},
          {color: "#9a1c22"},
          {color: "#254aa5"},
          {color: "#D9E3EF"},
          {color: "#02183c"}
        ]);
        // set the palette to the chart
        chart.palette(palette);
        // configure the labels
        chart
          .labels()
          .format("{%abbr} — {%value}")
          .fontSize(14)
          .position("outside");
        // disable the chart legend
        chart.legend(false);
        // format the tooltip
        chart
          .tooltip()
          .format("Percent of total wins: {%PercentValue}{decimalsCount: 1}%");
        // set chart title text settings
        chart
          .title()
          .enabled(true)
          .useHtml(true)
          .text(
            '<span style = "color: #111; font-size:20px; margin-bottom:10px; dy:20px">IPL Winnership Over 16 Seasons</span>' +
              '<br/><span style="color:#173685; font-size: 15px;">Among the 10 current IPL teams, 2 dominate, and 3 have never won the title</span>'
          );
        // set container id for the chart
        chart.container("container");
        // initiate chart drawing
        chart.draw();
      });
    </script>
  </body>
</html>

Conclusion

Wrapping up, I hope this JS pie charting tutorial will be helpful to you. Feel free to adapt what you've learned here to your projects and datasets. Should you have any questions or innovative ideas, don't hesitate to get in touch.

Creating engaging charts can be as captivating as watching IPL matches. Start your visualization journey and tell compelling data stories.

Building a Bubble Chart (JS): Top 30 Most-Liked YouTube Videos

andreykh — Wed, 02 Aug 2023 16:24:38 +0000

Do you want to turn that data chaos into a comprehensible data show? Look no further than data visualization! And let me tell you, one chart to rule them all is the bubble chart. It's like blowing bubbles at your data and watching them pop into understanding! And the best part? With JavaScript, you can easily create an interactive bubble chart, and I will show you how!

Bubble charts are versatile data visualizations that display data points in the form of bubbles, where the bubbles' size, color, and position represent different variables. In this tutorial, I'll walk you through building these graphics step by step, making the process a breeze. For illustration, we'll take data on the popularity of various YouTube videos and use JavaScript to create an interactive bubble chart showcasing the top 30 most-liked videos of all time, categorized by year of release, views, and likes.

By the end of this tutorial, you'll be able to create visually-stunning JS-based bubble charts without any hassle. So let's dive into the world of data bubbles and turn numbers into a visual feast for the eyes!

Bubble Chart That Will Be Created

Take a quick look at the JS bubble chart we will build together in this tutorial, and follow along!

A. Creating a Basic JS Bubble Chart

Don't be intimidated if you're new to creating JS charts — it's easier than you might think! In fact, all you need to do is follow these four steps to make it happen:

Create a web page in HTML.
Include the required JavaScript files.
Add the data.
Write some JS charting code

1. Create a web page in HTML

The first step is a breeze — just create a basic HTML web page! From there, we'll add a <div> element and give it a unique ID like "container” to create the space for the bubble chart. To ensure that the graph takes up the entire page, we’ll use CSS code within the <style> tag to set the width and height to 100%; of course, this can be completely customized to fit your exact needs and preferences.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Bubble Chart</title>
    <style type="text/css">     
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Include the required JavaScript files

After setting up a basic HTML page, the next step is to include the necessary JavaScript files in the <head> section. There are numerous charting libraries available. In this tutorial, we'll be using AnyChart. This library supports bubble charts and offers comprehensive documentation. But no matter which library you choose, the basic steps for creating a chart are similar.

To create a bubble chart, we’ll use the Base module. The data will be in a JSON file, so we’ll need the Data Adapter module to load it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Bubble Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-base.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
    <style type="text/css">     
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // All the code for the bubble chart will come here.
    </script>
  </body>
</html>

3. Add the data

I compiled the data about the top 30 most liked YouTube videos from BuzzGuru and YouTube and saved it in a JSON file, which you can find here.

In each object in the dataset represents a YouTube video and is to be visualized as one bubble. The objects have five properties: "x" for the year of upload to YouTube, "value" for the number of YouTube views, "size" for the number of YouTube likes, as well as "title" and "genre".

To load the data into a bubble plot, we’ll use the anychart.data.loadJsonFile() function.

anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/8df51b9b1c44b2d1bd3ebeb0757b5fb0/raw/28ee08902d393e02278a7ef7e3461b33e34c6c90/Top-liked-YouTube-Videos.json",
function (data) {});

You will find out where to put this code in a few moments.

4. Write some JS charting code

It’s time for a few lines of JavaScript code that will construct the visualization!

To begin, wrap the code in an anychart.onDocumentReady() function ensures that it only executes once the page is fully loaded.

<script>
  anychart.onDocumentReady(function () {
    // The bubble chart data and code will be in this section.
  });
</script>

Add the data from Step 3.

<script>
  anychart.onDocumentReady(function () {
    anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/8df51b9b1c44b2d1bd3ebeb0757b5fb0/raw/28ee08902d393e02278a7ef7e3461b33e34c6c90/Top-liked-YouTube-Videos.json",
    function (data) {
      // The upcoming JS code will be here.
    });
  });
</script>

Pass the data to the anychart.bubble() function to create a bubble chart object.

chart = anychart.bubble(data);

It's possible to set the minimum and maximum bubble size using the minBubblesize() and maxBubblesize() functions respectively.

chart.minBubbleSize("3%");
chart.maxBubbleSize("12%");

Finally, let’s give the bubble chart a title and insert it into the designated <div> container. Once this is done, we can use the draw() function to render the visualization on the web page.

chart.title("Top 30 Most Liked YouTube Videos");
chart.container("container");
chart.draw();

It's here! Our first JavaScript bubble chart is ready. Its interactive version with the full code can be found on Playground. The code is also provided below for your convenience.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Bubble Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-base.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
    <style type="text/css">     
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function() {
        // load data
        anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/8df51b9b1c44b2d1bd3ebeb0757b5fb0/raw/28ee08902d393e02278a7ef7e3461b33e34c6c90/Top-liked-YouTube-Videos.json",
        function (data) {
          // create a bubble chart    
          chart =  anychart.bubble(data);   
          // set the minimum and maximum bubble sizes
          chart.minBubbleSize("3%");
          chart.maxBubbleSize("12%");
          // add a chart title
          chart.title("Top 30 Most Liked YouTube Videos");
          // set the container
          chart.container("container");
          // initiate the chart drawing
          chart.draw();
        })
      });
    </script>
  </body>
</html>

B. Customizing JS Bubble Chart

Let's take our JavaScript bubble chart to the next level by adding some exciting customizations that will make it look even more visually appealing! We can transform our chart from good to great with just a few tweaks. Let's do it!

Name the axes
Arrange the ticks
Enable the grid
Paint the bubbles by genre
Prevent clipping
Add the legend
Enhance the tooltip

FOR A WALKTHROUGH OF THESE JS BUBBLE CHART CUSTOMIZATIONS, CONTINUE READING THE TUTORIAL HERE.

📊 How to Create Pareto Charts in JavaScript 📈

andreykh — Wed, 12 Jul 2023 12:45:57 +0000

Welcome to this step-by-step tutorial that will empower you to create an interactive Pareto chart using JavaScript that will look nice on any device and in any browser! A Pareto chart is a captivating graphical combo representation that showcases individual values through descending bars, while a line graph illustrates the cumulative total. It is a powerful tool highlighting the relative importance of different categories within a dataset. Named after the visionary economist Vilfredo Pareto, the Pareto chart embodies the Pareto principle, also known as the 80/20 rule. This principle reveals that approximately 80% of effects stem from a mere 20% of causes. With their ability to pinpoint the most significant elements driving a specific scenario, Pareto charts have become indispensable in certain areas of data analysis. Every chart needs data, and for this tutorial, I have chosen a dataset to serve as an example for illustration. Together, we will embark on a journey to visualize the major customer complaints for consumer loans in a Pareto chart, demonstrating how easily you can achieve it at every step. So get ready, and let's dive into the world of Pareto charts and create our own interactive masterpiece!

Pareto Chart to Be Created

Take a moment to behold the final Pareto chart that awaits us.

Now, let's dive into the tutorial and follow the steps to learn how to create your own interactive JS Pareto chart without any complaints.

Creating a Pareto Chart

Developing a fully functional Pareto chart is an uncomplicated task that can be completed in four steps. While having an understanding of HTML and JavaScript can be beneficial, it is optional when utilizing a decent JavaScript charting library. The basic steps are as follows:

Create an HTML container.
Incorporate the required scripts.
Input the data you want to visualize.
Configure the visualization using JavaScript.

1. Create an HTML container

To house a chart, you'll need a container. Start by crafting an HTML page that features a block-level element with a unique identifier for easy referencing. To ensure the chart fills the entire page, set the width and height parameters to 100%, or style it based on your preferences.

<html>
  <head>
    <title>Pareto Chart JavaScript</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Incorporate the required scripts

In this tutorial, we will be using the AnyChart JS library as an example. However, the fundamental concepts and steps we discuss can also be applied to other charting libraries. AnyChart is a popular choice due to its extensive examples and comprehensive documentation, making it suitable for beginners and experienced professionals. We will include two essential scripts for the Pareto chart: the core library file, which is a prerequisite for all charts, and the Pareto module. Remember to add these scripts within the <script> tags in the <head> section of your HTML page. The JS charting code is to be placed within the <script> tags in the <body> section.

<html>
  <head>
    <title>Pareto Chart JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pareto.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS Pareto Chart will come here
    </script>
  </body>
</html>

3. Input the data you want to visualize

Since the Pareto chart typically involves a small amount of data, it can be directly integrated:

let data = [
  { x: "Managing the loan or lease", value: 15265 },
  { x: "Problems when you are unable to pay", value: 7678 },
  { x: "Taking out the loan or lease", value: 4370 },
  { x: "Shopping for a loan or lease", value: 2029 },
  { x: "Managing the line of credit", value: 806 },
  { x: "Other issues", value: 1427 }
];

4. Configure the visualization using JavaScript

With everything now in place, let me demonstrate how just a few lines of code can quickly generate an interactive Pareto diagram using JavaScript. To ensure that the enclosed code only runs after the page is fully loaded, encapsulate it within a function like this:

<script>
  anychart.onDocumentLoad(function () {
    // the following code here
  });
</script>

Within the function, first add the data:

anychart.onDocumentLoad(function () {
  let data = [
    { x: "Managing the loan or lease", value: 15265 },
    { x: "Problems when you are unable to pay", value: 7678 },
    { x: "Taking out the loan or lease", value: 4370 },
    { x: "Shopping for a loan or lease", value: 2029 },
    { x: "Managing the line of credit", value: 806 },
    { x: "Other issues", value: 1427 }
  ];
});

Second, create a Pareto chart instance with the provided data:

let chart = anychart.pareto(data);

Third, create two Pareto series, bar (column) and line:

let column = chart.getSeriesAt(0);
let line = chart.getSeriesAt(1);

Fourth, to enhance comprehensibility, add some important captions. For example, name both Y-axes. One (for the Pareto column series) will represent the issue frequency, while the other (for the Pareto line series) will display the cumulative percentage.

chart.yAxis(0).title("Issue frequency");
chart.yAxis(1).title("Cumulative percentage");

Also, it’s always good to properly name the entire chart:

chart.title("Consumer Loan Customer Complaints (CFPB)");

Finally, set the container by referring to the HTML container created in step 1 and initiate the Pareto charting:

chart.container("container");
chart.draw();

And voila! In no time, a visually appealing JavaScript-based Pareto chart displaying consumer grievances is ready! Glance at it and its resulting code below; you can see the interactive version and play with the code here. And keep reading this tutorial for some options to improve this visualization!

<html>
  <head>
    <title>Pareto Chart JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pareto.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add data
        let data = [
          { x: "Managing the loan or lease", value: 15265 },
          { x: "Problems when you are unable to pay", value: 7678 },
          { x: "Taking out the loan or lease", value: 4370 },
          { x: "Shopping for a loan or lease", value: 2029 },
          { x: "Managing the line of credit", value: 806 },
          { x: "Other issues", value: 1427 }
        ];
        // create a pareto chart with the data
        let chart = anychart.pareto(data);
        // set a pareto column series
        let column = chart.getSeriesAt(0);
        // set a pareto line series
        let line = chart.getSeriesAt(1);
        // name the measure axis
        chart.yAxis(0).title("Issue frequency");
        // name the cumulative percentage axis
        chart.yAxis(1).title("Cumulative percentage");
        // add a chart title
        chart.title("Consumer Loan Customer Complaints (CFPB)");
        // set the container element id for the chart
        chart.container("container");
        // initiate the pareto chart drawing
        chart.draw();
      });
    </script>
  </body>
</html>

Customizing a Pareto Chart

Creating a basic Pareto visualization was quite effortless. However, you'll be pleasantly surprised to discover how you can also easily modify the chart and enhance its aesthetics. Let me show you some ways to customize the Pareto chart and take it to the next level.

Modifying the colors
Adding labels to the columns
Improving the tooltip
Setting the interval for the right Y-axis
Adding the reference lines
Adding a crosshair
Arranging the X-axis labels
Enhancing the title

FOR A WALKTHROUGH OF THESE JS PARETO CHART CUSTOMIZATIONS, CONTINUE READING THE TUTORIAL HERE.

Creating a Sunburst Chart in JavaScript

andreykh — Fri, 23 Jun 2023 21:46:07 +0000

In the world of data all around us, charts play a crucial role in helping us explore and understand data more effectively. One powerful visualization technique is the sunburst chart, which allows us to represent hierarchical datasets, providing insights into complex compositions visually. In this tutorial, I'll show you how to create your own stunning interactive sunburst charts using JavaScript effortlessly.

We'll embark on an exciting journey using data about Oscar-winning actors and actresses from countries around the world as an example. Our JS-based sunburst chart will shine a spotlight on the achievements of those born outside the United States, representing the rich diversity of their origins.

Get ready to unlock the secrets of JavaScript sunburst chart development as I’ll guide you step-by-step. Together, we'll learn how to effortlessly bring data to life, creating this mesmerizing visualization that engages and informs. Let's dive in and discover the fascinating world of the sunburst chart!

What Is Sunburst Chart?

The sunburst chart, also known as a radial treemap or multi-level pie chart, is a powerful visualization tool used to represent hierarchical datasets. It showcases data in a circular layout, with nested rings that depict different levels of the hierarchy. The innermost ring represents the top level, while the outer rings correspond to subcategories.

Each ring is divided into slices, each showing a specific data point within its respective category. The size of the slices can sometimes indicate the values associated with the data points. Users can drill down to explore more detailed information and gain deeper insights by clicking on a particular level of the hierarchy.

The sunburst chart offers an intuitive and visually appealing way to analyze hierarchical data, enabling users to easily grasp the relationships and proportions between different categories and subcategories. Its interactive nature facilitates exploration and discovery, making it a valuable tool for visual data analytics.

Sunburst Chart Preview

Behold the grand finale of this tutorial, the magnificent interactive JavaScript-based sunburst chart we'll create together in a step-by-step fashion.

Let's waste no more time and dive right into the charting process!

Creating Basic JS Sunburst Chart

The concept of the interactive sunburst chart may initially seem daunting and time-consuming when it comes to this data visualization development, but fear not! Let’s break it down into four simple steps. I’ll guide you through each, and you'll soon realize it's a breeze.

Create a web page in HTML
Include the required JavaScript files
Add the data
Write some JavaScript code

1. Create a web page in HTML

Let's kick off our sunburst chart adventure by creating a simple HTML page as its foundation. We'll start by setting the page title to "JavaScript Sunburst Chart."

To contain the chart, we'll add an HTML block element as a <div>. Let's give this div an id attribute of "container" so that we can easily reference it later in our journey.

Then let's add a touch of style to our chart. Inside the <style> block, we'll include a few CSS rules that will display our sunburst chart beautifully across the entire screen. We'll set the width and height properties to 100% to ensure it fills the entire available space. Additionally, we'll set the margin and padding to 0, allowing our chart to stand out without any unnecessary boundaries. Remember, these initial rules are just a starting point, and you're welcome to customize them as you see fit!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Sunburst Chart</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

With our basic HTML page set up and our chart container ready to embrace the visual magic, it's time to move forward and unlock the secrets of creating a captivating sunburst chart with JavaScript. Let's continue our journey and bring our data to life in the most stunning way possible!

2. Include the required JavaScript files

Now, it's time to bring the power of JavaScript to our HTML page by including the necessary script files. In the <head> section of our HTML page, we'll ensure that these files find their rightful place. We have a couple of options to achieve this. One option is to download the required script files and include them locally in our project. In this tutorial, let’s take a different approach for efficiency and include the scripts directly from a CDN ("content delivery network").

There are not many JavaScript charting libraries out there that support sunburst charts out of the box. One of those is AnyChart, which has thorough documentation for its vast data visualization capabilities and a gallery full of ready-to-use chart examples, so I’ve chosen it for the sunburst chart development showcase in this tutorial.

AnyChart boasts a modular structure that allows us to seamlessly connect only the specific chart types and features as needed, optimizing the size of the running JavaScript code and ensuring smooth performance. For our sunburst chart to dazzle, we need to add two essential modules: the Core module, which forms the backbone of the library, and the Sunburst module, which specifically empowers us to create captivating sunburst visualizations.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Sunburst Chart</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

With the JavaScript files in place, our HTML page is now armed with the necessary tools to embark on this charting journey. Let's forge ahead and unlock the secrets of crafting a magnificent sunburst chart!

3. Add the data

Fantastic! Let's dive deeper into the world of Oscar-winning actors and actresses and explore their diverse origins. Our focus will be on visualizing data specifically related to non-Americans who have received the prestigious prize in the four primary acting categories since the inception of the Academy Awards:

Best Actor
Best Actress
Best Supporting Actor
Best Supporting Actress

I have obtained a dataset from Wanderu and updated it using the latest data from the official Academy Awards Database and Wikipedia. To make it suitable for our JavaScript sunburst chart, I’ve structured the data into an array of objects, where each object contains essential details such as name, value, and children.

To start we will begin with data from one country for the sake of simplicity and clarity.

var data = [
  {
    name: "World", value: 115, children: [
      {
        name: "Europe", value: 87, children: [
          {
            name: "England", value: 53, children: [
              { name: "Alec Guinness", value: 1 },
              { name: "Ben Kingsley", value: 1 },
              { name: "Charles Laughton", value: 2 },
              { name: "Colin Firth", value: 1 },
              { name: "Daniel Day-Lewis", value: 3 },
              { name: "Daniel Kaluuya", value: 1 },
              { name: "David Niven", value: 1 },
              { name: "Donald Crisp", value: 1 },
              { name: "Eddie Redmayne", value: 1 },
              { name: "Edmund Gwenn", value: 1 },
              { name: "Elizabeth Taylor", value: 2 },
              { name: "Emma Thompson", value: 1 },
              { name: "Gary Oldman", value: 1 },
              { name: "George Arliss", value: 2 },
              { name: "Glenda Jackson", value: 2 },
              { name: "Greer Garson", value: 1 },
              { name: "Helen Mirren", value: 1 },
              { name: "Jeremy Irons", value: 1 },
              { name: "Jessica Tandy", value: 1 },
              { name: "Jim Broadbent", value: 1 },
              { name: "John Gielgud", value: 1 },
              { name: "John Mills", value: 1 },
              { name: "Judi Dench", value: 1 },
              { name: "Julie Andrews", value: 1 },
              { name: "Kate Winslet", value: 1 },
              { name: "Laurence Olivier", value: 1 },
              { name: "Maggie Smith", value: 3 },
              { name: "Margaret Rutherford", value: 1 },
              { name: "Mark Rylance", value: 1 },
              { name: "Michael Caine", value: 2 },
              { name: "Olivia Colman", value: 1 },
              { name: "Paul Scofield", value: 1 },
              { name: "Peggy Ashcroft", value: 1 },
              { name: "Peter Finch", value: 1 },
              { name: "Peter Ustinov", value: 2 },
              { name: "Rachel Weisz", value: 1 },
              { name: "Rex Harrison", value: 1 },
              { name: "Robert Donat", value: 1 },
              { name: "Ronald Colman", value: 1 },
              { name: "Tilda Swinton", value: 1 },
              { name: "Vanessa Redgrave", value: 1 },
              { name: "Victor McLaglen", value: 1 },
              { name: "Wendy Hiller", value: 1 }
            ]
          }
        ]
      }
    ]
  }
];

As we progress, we'll gradually expand our visualization to include data from all countries. So, rest assured, we'll soon have a comprehensive view of the incredible achievements of Oscar-winning actors and actresses from around the world.

Now, let’s harness the power of JavaScript to breathe life into our data visualization masterpiece!

4. Write some JS code

To kick off our journey into the world of JavaScript-based sunburst charts, we'll make sure our code struts its stuff once the stage is set by using the snazzy anychart.onDocumentReady() function.

<script>
  anychart.onDocumentReady(function () {
    // The JS Sunburst Chart's code will be written here.
  }
</script>

Now, let's bring in the data and set the stage by decking it out as a tree.

var chart = anychart.sunburst(data, "as-tree");

We should also add a chart title to make it instantly clear exactly what the upcoming diagram will show. To house our masterpiece, we'll assign it a special container, the very one we designated in our opening act.

chart.title("Non-U.S. Born Oscar Winners for Acting");
chart.container("container");

The complete stage is set, the lights are dimmed, and it's time for our graphic to take center stage! Let’s draw our sunburst chart, transforming data into a mesmerizing visual performance.

chart.draw();

Check out the output and prepare to be amazed as you explore the interactive drill-down feature of our JavaScript (HTML5) sunburst chart! Click here, click there, and witness the dynamic transformation right before your eyes. You can see it right below or visit the AnyChart Playground, where the full code editor awaits your creative touch.

But hold on, there's more! In the next section, we'll unleash our creative powers and dive into customization tips and tricks that will elevate your chart to the next level.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Sunburst Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-sunburst.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function(){
        // create the data
        var data = [
          {
            name: "World", value: 115, children: [
              {
                name: "Europe", value: 87, children: [
                  {
                    name: "England", value: 53, children: [
                      { name: "Alec Guinness", value: 1 },
                      { name: "Ben Kingsley", value: 1 },
                      { name: "Charles Laughton", value: 2 },
                      { name: "Colin Firth", value: 1 },
                      { name: "Daniel Day-Lewis", value: 3 },
                      { name: "Daniel Kaluuya", value: 1 },
                      { name: "David Niven", value: 1 },
                      { name: "Donald Crisp", value: 1 },
                      { name: "Eddie Redmayne", value: 1 },
                      { name: "Edmund Gwenn", value: 1 },
                      { name: "Elizabeth Taylor", value: 2 },
                      { name: "Emma Thompson", value: 1 },
                      { name: "Gary Oldman", value: 1 },
                      { name: "George Arliss", value: 2 },
                      { name: "Glenda Jackson", value: 2 },
                      { name: "Greer Garson", value: 1 },
                      { name: "Helen Mirren", value: 1 },
                      { name: "Jeremy Irons", value: 1 },
                      { name: "Jessica Tandy", value: 1 },
                      { name: "Jim Broadbent", value: 1 },
                      { name: "John Gielgud", value: 1 },
                      { name: "John Mills", value: 1 },
                      { name: "Judi Dench", value: 1 },
                      { name: "Julie Andrews", value: 1 },
                      { name: "Kate Winslet", value: 1 },
                      { name: "Laurence Olivier", value: 1 },
                      { name: "Maggie Smith", value: 3 },
                      { name: "Margaret Rutherford", value: 1 },
                      { name: "Mark Rylance", value: 1 },
                      { name: "Michael Caine", value: 2 },
                      { name: "Olivia Colman", value: 1 },
                      { name: "Paul Scofield", value: 1 },
                      { name: "Peggy Ashcroft", value: 1 },
                      { name: "Peter Finch", value: 1 },
                      { name: "Peter Ustinov", value: 2 },
                      { name: "Rachel Weisz", value: 1 },
                      { name: "Rex Harrison", value: 1 },
                      { name: "Robert Donat", value: 1 },
                      { name: "Ronald Colman", value: 1 },
                      { name: "Tilda Swinton", value: 1 },
                      { name: "Vanessa Redgrave", value: 1 },
                      { name: "Victor McLaglen", value: 1 },
                      { name: "Wendy Hiller", value: 1 }
                    ]
                  },
                  {
                    name: "Austria", value: 3, children: [
                      { name: "Christoph Waltz", value: 1 },
                      { name: "Joseph Schildkraut", value: 1 },
                      { name: "Maximillian Schell", value: 1 }
                    ]
                  },
                  {
                    name: "Wales", value: 6, children: [
                      { name: "Ray Milland", value: 1 },
                      { name: "Hugh Griffith", value: 1 },
                      { name: "Catherine Zeta-Jones", value: 2 },
                      { name: "Anthony Hopkins", value: 2 }
                    ]
                  },
                  {
                    name: "France", value: 4, children: [
                      { name: "Claudette Colbert", value: 1 },
                      { name: "Jean Dujardin", value: 1 },
                      { name: "Juliette Binoche", value: 1 },
                      { name: "Marion Cotillard", value: 1 }
                    ]
                  },
                  {
                    name: "Italy", value: 3, children: [
                      { name: "Anna Magnani", value: 1 },
                      { name: "Roberto Benigni", value: 1 },
                      { name: "Sophia Loren", value: 1 }
                    ]
                  },
                  {
                    name: "Russia", value: 3, children: [
                      { name: "George Sanders", value: 1 },
                      { name: "Lila Kedrova", value: 1 },
                      { name: "Yul Brynner", value: 1 }
                    ]
                  },
                  {
                    name: "Germany", value: 2, children: [
                      { name: "Luise Rainier", value: 1 },
                      { name: "Simone Signoret", value: 1 }
                    ]
                  },
                  {
                    name: "Ireland", value: 2, children: [
                      { name: "Barry Fitzgerald", value: 1 },
                      { name: "Brenda Flicker", value: 1 }
                    ]
                  },
                  {
                    name: "Spain", value: 2, children: [
                      { name: "Javier Bardem", value: 1 },
                      { name: "Penélope Cruz", value: 1 }
                    ]
                  },
                  {
                    name: "Sweden", value: 2, children: [
                      { name: "Alicia Vikander", value: 1 },
                      { name: "Ingrid Bergman", value: 1 }
                    ]
                  },
                  {
                    name: "Belgium", value: 1, children: [
                      { name: "Audrey Hepburn", value: 1 }
                    ]
                  },
                  {
                    name: "Greece", value: 1, children: [
                      { name: "Katina Paxinou", value: 1 }
                    ]
                  },
                  {
                    name: "Hungary", value: 1, children: [
                      { name: "Paul Lukas", value: 1 }
                    ]
                  },
            {
                    name: "Romania", value: 1, children: [
                      { name: "John Houseman", value: 1 }
                    ]
                  },
                  {
                    name: "Scotland", value: 1, children: [
                      { name: "Sean Connery", value: 1 }
                    ]
                  },
                  {
                    name: "Switzerland", value: 1, children: [
                      { name: "Emil Jannings", value: 1 }
                    ]
                  },
                  {
                    name: "Ukraine", value: 1, children: [
                      { name: "Paul Muni", value: 1 }
                    ]
                  }
                ]
              },
              {
                name: "America", value: 14, children: [
                  {
                    name: "Canada", value: 11, children: [
                      { name: "Anna Paquin", value: 1 },
                      { name: "Christopher Plumme", value: 2 },
                      { name: "Harold Russell", value: 1 },
                      { name: "Marie Dressler", value: 2 },
                      { name: "Mary Pickford", value: 2 },
                      { name: "Norma Shearer", value: 2 },
                      { name: "Walter Huston", value: 1 }
                    ]
                  },
                  {
                    name: "Mexico", value: 3, children: [
                      { name: "Anthony Quinn", value: 2 },
                      { name: "Lupita Nyong’o", value: 1 }
                    ]
                  }
                ]
              },
              {
                name: "Asia", value: 10, children: [
                  {
                    name: "Japan", value: 4, children: [
                      { name: "Joan Fontaine", value: 1 },
                      { name: "Miyoshi Umeki", value: 1 },
                      { name: "Olivia de Havilland", value: 2 }
                    ]
                  },
                  {
                    name: "India", value: 2, children: [
                      { name: "Julie Christie", value: 1 },
                      { name: "Vivien Leigh", value: 1 }
                    ]
                  },
                  {
                    name: "Cambodia", value: 1, children: [
                      { name: "Haing S. Ngor", value: 1 }
                    ]
                  },
                  {
                    name: "Israel", value: 1, children: [
                      { name: "Natalie Portman", value: 1 }
                    ]
                  },
                  {
                    name: "Malaysia", value: 1, children: [
                      { name: "Michelle Yeoh", value: 1 }
                    ]
                  },
                  {
                    name: "South Korea", value: 1, children: [
                      { name: "Youn Yuh-jung", value: 1 }
                    ]
                  }
                ]
              },
              {
                name: "Oceania", value: 3, children: [
                  {
                    name: "Australia", value: 2, children: [
                      { name: "Geoffrey Rush", value: 1 },
                      { name: "Heath Ledger", value: 1 }
                    ]
                  },
                  {
                    name: "New Zealand", value: 1, children: [
                      { name: "Russell Crowe", value: 1 }
                    ]
                  }
                ]
              },
              {
                name: "Africa", value: 1, children: [
                  {
                    name: "South Africa", value: 1, children: [
                      { name: "Charlize Theron", value: 1 }
                    ]
                  }
                ]
              }
            ]
          }
        ];
        // create a sunburst chart and set the data
        var chart = anychart.sunburst(data, "as-tree");
        // set the chart title
        chart.title("Non-U.S. Born Oscar Winners for Acting");
        // set the container id
        chart.container("container");
        // initiate drawing the chart
        chart.draw();
      });
    </script>
  </body>
</html>

Customizing JS Sunburst Chart

Congratulations on creating a fabulous sunburst chart using JavaScript! But why stop there when we can take it to the next level of coolness and interactivity? Brace yourself for some exciting and fun ideas to elevate your visualization even further. Let's dive into these cool enhancements and make this diagram shine like never before!

Enhance the tooltip
Enhance the coloring
Set the parent-dependent calculation mode
Customize the labels
Sort in ascending order

FOR A WALKTHROUGH OF THESE JS SUNBURST CUSTOMIZATIONS, CONTINUE READING THE TUTORIAL HERE.

Learn to Make Heatmaps in JS

andreykh — Tue, 30 May 2023 07:44:20 +0000

Data visualization is a powerful tool that helps us make sense of complex data. With it, we can spot patterns and trends that might take much more time to become obvious just by looking at raw numbers. One particularly useful chart type is the heatmap, and I’m excited to teach you how to create one with JavaScript in this tutorial.

What is a Heatmap?

A heatmap is a two-dimensional representation of the magnitude of a phenomenon through colors. It provides a quick visual summary of high and low values in the data.

For instance, did you know that an average of 108 people died per day in road accidents in the U.S. in 2021? Using a heatmap chart, we can analyze the days and times of fatal accidents. This will be the visualization we will be building during the tutorial.

So, grab your cup of coffee and let's dive into this step-by-step guide. By the end, you'll have the skills to easily create your own interactive JavaScript heatmaps.

The Heatmap Chart We'll Build

Here is how the final JS-based heatmap chart will look:

Ready to dive in? Let's go!

How to Make a JavaScript Heatmap

Great, let's start creating a simple yet beautiful heatmap chart using JavaScript. With just four easy-to-follow steps, you'll have a stunning interactive heatmap in no time.

Don't worry about any complicated coding or overwhelming technicalities. We'll keep things straightforward and easy to understand.

1. Create an HTML Page

First things first, we need to create a web page that'll hold our super-cool heatmap. We start by making a basic HTML page, complete with a div element to hold our chart. Let’s also specify the style of the div to make it stretch over the whole page. Don't worry, it’s easy-peasy:

<html>
  <head>
    <title>Heatmap in JavaScript</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Include the Required JavaScript Files

Okay, let's be real: building a JS heatmap from scratch would be a real pain in the you-know-what. Instead, we're gonna take the easier route and use a JavaScript charting library.

There are a ton of various JS charting libraries out there. For this project, we're gonna go with the AnyChart JS library, which supports heatmap charts and is free for personal and other non-profit purposes.

To make things work, we need to add a couple of scripts to our web page's <head> section. Specifically, we need to include the core and heatmap modules. Sounds easy, right?

<html>
  <head>
    <title>Heatmap in JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-heatmap.min.js"></script> 
    <style type="text/css">      
      html, body, #container { 
        width: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS heatmap will come here
    </script>
  </body>
</html>

3. Add the Data

Each chart is complete with the data, right? We’re gonna grab our data from the NSC website and add it to our HTML file in the proper format.

For our heatmap, each data point needs to include an x value (day), a y value (hour), and a heat value (number of accidents). We'll wrap this data in a function that we'll call when we create the JS chart.

function getData() {
  return [
    {
      x: "Monday",
      y: "Midnight–3:59 a.m.",
      heat: 705
    },
    {
      x: "Monday",
      y: "4:00–7:59 a.m.",
      heat: 713
    },
    {
      x: "Monday",
      y: "8:00–11:59 a.m.",
      heat: 657
    },
    {
      x: "Monday",
      y: "Noon–3:59 p.m.",
      heat: 957
    },
    {
      x: "Monday",
      y: "4:00–7:59 p.m.",
      heat: 1137
    },
    {
      x: "Monday",
      y: "8:00–11:59 p.m.",
      heat: 956
    },
    {
      x: "Tuesday",
      y: "Midnight–3:59 a.m.",
      heat: 482
    },
    {
      x: "Tuesday",
      y: "4:00–7:59 a.m.",
      heat: 641
    },
    {
      x: "Tuesday",
      y: "8:00–11:59 a.m.",
      heat: 631
    },
    {
      x: "Tuesday",
      y: "Noon–3:59 p.m.",
      heat: 905
    },
    {
      x: "Tuesday",
      y: "4:00–7:59 p.m.",
      heat: 1137
    },
    {
      x: "Tuesday",
      y: "8:00–11:59 p.m.",
      heat: 986
    },
    {
      x: "Wednesday",
      y: "Midnight–3:59 a.m.",
      heat: 465
    },
    {
      x: "Wednesday",
      y: "4:00–7:59 a.m.",
      heat: 616
    },
    {
      x: "Wednesday",
      y: "8:00–11:59 a.m.",
      heat: 627
    },
    {
      x: "Wednesday",
      y: "Noon–3:59 p.m.",
      heat: 914
    },
    {
      x: "Wednesday",
      y: "4:00–7:59 p.m.",
      heat: 1159
    },
    {
      x: "Wednesday",
      y: "8:00–11:59 p.m.",
      heat: 1066
    },
    {
      x: "Thursday",
      y: "Midnight–3:59 a.m.",
      heat: 584
    },
    {
      x: "Thursday",
      y: "4:00–7:59 a.m.",
      heat: 718
    },
    {
      x: "Thursday",
      y: "8:00–11:59 a.m.",
      heat: 660
    },
    {
      x: "Thursday",
      y: "Noon–3:59 p.m.",
      heat: 966
    },
    {
      x: "Thursday",
      y: "4:00–7:59 p.m.",
      heat: 1161
    },
    {
      x: "Thursday",
      y: "8:00–11:59 p.m.",
      heat: 1186
    },
    {
      x: "Friday",
      y: "Midnight–3:59 a.m.",
      heat: 715
    },
    {
      x: "Friday",
      y: "4:00–7:59 a.m.",
      heat: 747
    },
    {
      x: "Friday",
      y: "8:00–11:59 a.m.",
      heat: 738
    },
    {
      x: "Friday",
      y: "Noon–3:59 p.m.",
      heat: 1056
    },
    {
      x: "Friday",
      y: "4:00–7:59 p.m.",
      heat: 1426
    },
    {
      x: "Friday",
      y: "8:00–11:59 p.m.",
      heat: 1631
    },
    {
      x: "Saturday",
      y: "Midnight–3:59 a.m.",
      heat: 1383
    },
    {
      x: "Saturday",
      y: "4:00–7:59 a.m.",
      heat: 641
    },
    {
      x: "Saturday",
      y: "8:00–11:59 a.m.",
      heat: 635
    },
    {
      x: "Saturday",
      y: "Noon–3:59 p.m.",
      heat: 1034
    },
    {
      x: "Saturday",
      y: "4:00–7:59 p.m.",
      heat: 1400
    },
    {
      x: "Saturday",
      y: "8:00–11:59 p.m.",
      heat: 1593
    },
    {
      x: "Sunday",
      y: "Midnight–3:59 a.m.",
      heat: 1486
    },
    {
      x: "Sunday",
      y: "4:00–7:59 a.m.",
      heat: 695
    },
    {
      x: "Sunday",
      y: "8:00–11:59 a.m.",
      heat: 564
    },
    {
      x: "Sunday",
      y: "Noon–3:59 p.m.",
      heat: 932
    },
    {
      x: "Sunday",
      y: "4:00–7:59 p.m.",
      heat: 1292
    },
    {
      x: "Sunday",
      y: "8:00–11:59 p.m.",
      heat: 1211
    }
  ];
}

4. Write the Necessary JS Code for the Chart

Here's the fun part: it's time to write the JavaScript code that'll make our heatmap chart look amazing.

We'll enclose everything in a function to ensure the code only executes when the page is ready. We'll create the graph using the heatMap() function and add the data we created in the previous step.

let chart = anychart.heatMap(getData());

Then, we'll give the chart a descriptive title:

chart.title("Fatal Car Crashes in U.S. in 2021 by Time of Day and Day of Week”);

Finally, we'll set the container reference and draw the chart. Voilà!

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

And there you have it. With just a little bit of HTML and JavaScript, you can create a totally rad interactive heatmap. You can see the entire code of this JS-based heatmap below and check it out live here. After that, we'll learn how to customize our heatmap in all kinds of fun ways.

<html>
  <head>
    <title>Heatmap in JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-heatmap.min.js"></script> 
    <style type="text/css">      
      html, body, #container { 
        width: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // create a heatmap
        let chart = anychart.heatMap(getData());
        // name the heatmap
        chart.title("Fatal Car Crashes in U.S. in 2021 by Time of Day and Day of Week");
        // set the container for the heatmap
        chart.container("container");
        // draw the heatmap
        chart.draw();
      });
      // add the data
      function getData() {
        return [
          {
            x: "Monday",
            y: "Midnight–3:59 a.m.",
            heat: 705
          },
          {
            x: "Monday",
            y: "4:00–7:59 a.m.",
            heat: 713
          },
          {
            x: "Monday",
            y: "8:00–11:59 a.m.",
            heat: 657
          },
          {
            x: "Monday",
            y: "Noon–3:59 p.m.",
            heat: 957
          },
          {
            x: "Monday",
            y: "4:00–7:59 p.m.",
            heat: 1137
          },
          {
            x: "Monday",
            y: "8:00–11:59 p.m.",
            heat: 956
          },
          {
            x: "Tuesday",
            y: "Midnight–3:59 a.m.",
            heat: 482
          },
          {
            x: "Tuesday",
            y: "4:00–7:59 a.m.",
            heat: 641
          },
          {
            x: "Tuesday",
            y: "8:00–11:59 a.m.",
            heat: 631
          },
          {
            x: "Tuesday",
            y: "Noon–3:59 p.m.",
            heat: 905
          },
          {
            x: "Tuesday",
            y: "4:00–7:59 p.m.",
            heat: 1137
          },
          {
            x: "Tuesday",
            y: "8:00–11:59 p.m.",
            heat: 986
          },
          {
            x: "Wednesday",
            y: "Midnight–3:59 a.m.",
            heat: 465
          },
          {
            x: "Wednesday",
            y: "4:00–7:59 a.m.",
            heat: 616
          },
          {
            x: "Wednesday",
            y: "8:00–11:59 a.m.",
            heat: 627
          },
          {
            x: "Wednesday",
            y: "Noon–3:59 p.m.",
            heat: 914
          },
          {
            x: "Wednesday",
            y: "4:00–7:59 p.m.",
            heat: 1159
          },
          {
            x: "Wednesday",
            y: "8:00–11:59 p.m.",
            heat: 1066
          },
          {
            x: "Thursday",
            y: "Midnight–3:59 a.m.",
            heat: 584
          },
          {
            x: "Thursday",
            y: "4:00–7:59 a.m.",
            heat: 718
          },
          {
            x: "Thursday",
            y: "8:00–11:59 a.m.",
            heat: 660
          },
          {
            x: "Thursday",
            y: "Noon–3:59 p.m.",
            heat: 966
          },
          {
            x: "Thursday",
            y: "4:00–7:59 p.m.",
            heat: 1161
          },
          {
            x: "Thursday",
            y: "8:00–11:59 p.m.",
            heat: 1186
          },
          {
            x: "Friday",
            y: "Midnight–3:59 a.m.",
            heat: 715
          },
          {
            x: "Friday",
            y: "4:00–7:59 a.m.",
            heat: 747
          },
          {
            x: "Friday",
            y: "8:00–11:59 a.m.",
            heat: 738
          },
          {
            x: "Friday",
            y: "Noon–3:59 p.m.",
            heat: 1056
          },
          {
            x: "Friday",
            y: "4:00–7:59 p.m.",
            heat: 1426
          },
          {
            x: "Friday",
            y: "8:00–11:59 p.m.",
            heat: 1631
          },
          {
            x: "Saturday",
            y: "Midnight–3:59 a.m.",
            heat: 1383
          },
          {
            x: "Saturday",
            y: "4:00–7:59 a.m.",
            heat: 641
          },
          {
            x: "Saturday",
            y: "8:00–11:59 a.m.",
            heat: 635
          },
          {
            x: "Saturday",
            y: "Noon–3:59 p.m.",
            heat: 1034
          },
          {
            x: "Saturday",
            y: "4:00–7:59 p.m.",
            heat: 1400
          },
          {
            x: "Saturday",
            y: "8:00–11:59 p.m.",
            heat: 1593
          },
          {
            x: "Sunday",
            y: "Midnight–3:59 a.m.",
            heat: 1486
          },
          {
            x: "Sunday",
            y: "4:00–7:59 a.m.",
            heat: 695
          },
          {
            x: "Sunday",
            y: "8:00–11:59 a.m.",
            heat: 564
          },
          {
            x: "Sunday",
            y: "Noon–3:59 p.m.",
            heat: 932
          },
          {
            x: "Sunday",
            y: "4:00–7:59 p.m.",
            heat: 1292
          },
          {
            x: "Sunday",
            y: "8:00–11:59 p.m.",
            heat: 1211
          }
        ];
      }
    </script>
  </body>
</html>

This heatmap is both visually appealing and informative. Upon examining the chart, it becomes clear that there are certain times when the number of accidents is significantly higher. It is unsurprising to see that these peak times are during weekends and the darker hours of the day.

But there's a lot more we can do with our heatmap...

How to Customize a JS Heatmap

As we saw, having the basic chart ready was really simple and fast. But there is so much more we can do to enhance the heatmap. It's not so difficult, either.

How to Change the Color Palette

We can use a diverging color palette to make our JavaScript heatmap more effective in highlighting the data. This type of color scheme helps to emphasize the difference between high and low values, with less being good and more being alarming.

We can define four colors and value ranges using an ordinal color scale and then set the chart colors to use that color scale. This way, we can create a heatmap that quickly draws the viewer's attention to the most significant data points.

Here's the code to do that:

let colorScale = anychart.scales.ordinalColor();
colorScale.ranges([
  { less: 500, color: "#B0D8A4" },
  { from: 500, to: 900, color: "#FEE191" },
  { from: 900, to: 1300, color: "#FD8060" },
  { greater: 1300, color: "#CC333F" }
]);
chart.colorScale(colorScale);

And here's the result:

How to Modify the Hover Styling

When we change the color palette of our heatmap, we also need to modify the hover colors to match the base colors. This is simple to achieve with the color.darken function.

We can set the chart settings and hover chart settings to ensure that the hover colors match the base colors. This allows us to create a visually consistent and easy-to-read heatmap, making it more effective in communicating the underlying data.

chart
  .hovered()
  .fill(function () {
    return anychart.color.darken(this.sourceColor, 0.25);
  });

How to Change the Labels

By default, the labels on our heatmap show the actual numbers. But we can customize the labels to provide greater flexibility and make the chart easier to read.

We can enable HTML for the labels to allow for greater formatting options. Then, we can configure the labels to display as 'low' to 'extreme' based on the value of the tile. We can also make the 'high' and 'extreme' values appear in bold to make them stand out.

// enable html for the labels
chart.labels().useHtml(true);

// configure the labels
chart.labels().format(function () {
  var heat = this.heat;
  if (heat < 500) return "Low";
  if (heat < 1000) return "Medium";
  if (heat < 1500) return "<span style='font-weight:bold'>High</span>";
  if (heat >= 1500) return "<span style='font-weight:bold'>Extreme</span>";
});

In the final version, I decided to ultimately remove the labels since the colors are quite indicative of the values.

chart.labels(false);

How to Format the Title and Tooltip

Now it's time to make our JS heatmap visualization even more exciting with some formatting tweaks.

First, we'll enable HTML for the tooltip, so we can customize it with some eye-catching formatting. We'll display the number of accidents in the heading and the day as well as the timing in the body of the tooltip. This will add more context and help the user to better understand the data.

chart.tooltip().title().useHtml(true);
chart
  .tooltip()
  .useHtml(true)
  .titleFormat(function () {
    return "Accidents - " + this.heat;
  })
  .format(function () {
    return (
      '<span style="color: #CECECE">Day: </span>' +
      this.x +
      "<br/>" +
      '<span style="color: #CECECE">Time: </span>' +
      this.y
    );
  });

Let’s also add a bit of padding under the main title to make it more spaced out and visually appealing:

chart
  .title()
  .enabled(true)
  .text("Fatal Car Crashes in U.S. in 2021 by Time of Day and Day of Week")
  .padding([0, 0, 20, 0]);

Here's what those modifications look like:

How to Modify the Axes

For better readability, we can add padding between the axes labels and the chart tiles and remove the axes lines since the tiles form a boundary by themselves.

chart.xAxis().stroke(null);
chart.yAxis().stroke(null);
chart.yAxis().labels().padding([0, 10, 0, 0]);
chart.xAxis().labels().padding([0, 0, 10, 0]);

And there you have it! With just a few aesthetic changes, we've transformed a simple heatmap into a stunning visualization that really drives home a powerful message. You can check it out below with the full source code, and you can take a closer look at the interactive version of the heatmap and play with the code live here.

<html>
  <head>
    <title>Heatmap in JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-heatmap.min.js"></script> 
    <style type="text/css">      
      html, body, #container { 
        width: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // create a heatmap
        var chart = anychart.heatMap(getData());
        // set a custom color scale
        var colorScale = anychart.scales.ordinalColor();
        colorScale.ranges([
          { less: 500, color: "#B0D8A4" },
          { from: 500, to: 900, color: "#FEE191" },
          { from: 900, to: 1300, color: "#FD8060" },
          { greater: 1300, color: "#CC333F" }
        ]);
        chart.colorScale(colorScale);
        // style the coloring in the hovered state
        chart
          .hovered()
          .fill(function () {
            return anychart.color.darken(this.sourceColor, 0.25);
          });
        // hide the labels
        chart.labels(false);
        // customize the axes
        chart.xAxis().stroke(null);
        chart.yAxis().stroke(null);
        chart.yAxis().labels().padding([0, 10, 0, 0]);
        chart.xAxis().labels().padding([0, 0, 10, 0]);
        // set the tooltip
        chart.tooltip().title().useHtml(true);
        chart
          .tooltip()
          .useHtml(true)
          .titleFormat(function () {
            return "Accidents - " + this.heat;
          })
          .format(function () {
            return (
              '<span style="color: #CECECE">Day: </span>' +
              this.x +
              "<br/>" +
              '<span style="color: #CECECE">Time: </span>' +
              this.y
            );
          });
        // name the heatmap
        chart
          .title()
          .enabled(true)
          .text("Fatal Car Crashes in U.S. in 2021 by Time of Day and Day of Week")
          .padding([0, 0, 20, 0]);
        // set the container for the heatmap
        chart.container("container");
        // draw the heatmap
        chart.draw();
      });
      // add the data
      function getData() {
        return [
          {
            x: "Monday",
            y: "Midnight–3:59 a.m.",
            heat: 705
          },
          {
            x: "Monday",
            y: "4:00–7:59 a.m.",
            heat: 713
          },
          {
            x: "Monday",
            y: "8:00–11:59 a.m.",
            heat: 657
          },
          {
            x: "Monday",
            y: "Noon–3:59 p.m.",
            heat: 957
          },
          {
            x: "Monday",
            y: "4:00–7:59 p.m.",
            heat: 1137
          },
          {
            x: "Monday",
            y: "8:00–11:59 p.m.",
            heat: 956
          },
          {
            x: "Tuesday",
            y: "Midnight–3:59 a.m.",
            heat: 482
          },
          {
            x: "Tuesday",
            y: "4:00–7:59 a.m.",
            heat: 641
          },
          {
            x: "Tuesday",
            y: "8:00–11:59 a.m.",
            heat: 631
          },
          {
            x: "Tuesday",
            y: "Noon–3:59 p.m.",
            heat: 905
          },
          {
            x: "Tuesday",
            y: "4:00–7:59 p.m.",
            heat: 1137
          },
          {
            x: "Tuesday",
            y: "8:00–11:59 p.m.",
            heat: 986
          },
          {
            x: "Wednesday",
            y: "Midnight–3:59 a.m.",
            heat: 465
          },
          {
            x: "Wednesday",
            y: "4:00–7:59 a.m.",
            heat: 616
          },
          {
            x: "Wednesday",
            y: "8:00–11:59 a.m.",
            heat: 627
          },
          {
            x: "Wednesday",
            y: "Noon–3:59 p.m.",
            heat: 914
          },
          {
            x: "Wednesday",
            y: "4:00–7:59 p.m.",
            heat: 1159
          },
          {
            x: "Wednesday",
            y: "8:00–11:59 p.m.",
            heat: 1066
          },
          {
            x: "Thursday",
            y: "Midnight–3:59 a.m.",
            heat: 584
          },
          {
            x: "Thursday",
            y: "4:00–7:59 a.m.",
            heat: 718
          },
          {
            x: "Thursday",
            y: "8:00–11:59 a.m.",
            heat: 660
          },
          {
            x: "Thursday",
            y: "Noon–3:59 p.m.",
            heat: 966
          },
          {
            x: "Thursday",
            y: "4:00–7:59 p.m.",
            heat: 1161
          },
          {
            x: "Thursday",
            y: "8:00–11:59 p.m.",
            heat: 1186
          },
          {
            x: "Friday",
            y: "Midnight–3:59 a.m.",
            heat: 715
          },
          {
            x: "Friday",
            y: "4:00–7:59 a.m.",
            heat: 747
          },
          {
            x: "Friday",
            y: "8:00–11:59 a.m.",
            heat: 738
          },
          {
            x: "Friday",
            y: "Noon–3:59 p.m.",
            heat: 1056
          },
          {
            x: "Friday",
            y: "4:00–7:59 p.m.",
            heat: 1426
          },
          {
            x: "Friday",
            y: "8:00–11:59 p.m.",
            heat: 1631
          },
          {
            x: "Saturday",
            y: "Midnight–3:59 a.m.",
            heat: 1383
          },
          {
            x: "Saturday",
            y: "4:00–7:59 a.m.",
            heat: 641
          },
          {
            x: "Saturday",
            y: "8:00–11:59 a.m.",
            heat: 635
          },
          {
            x: "Saturday",
            y: "Noon–3:59 p.m.",
            heat: 1034
          },
          {
            x: "Saturday",
            y: "4:00–7:59 p.m.",
            heat: 1400
          },
          {
            x: "Saturday",
            y: "8:00–11:59 p.m.",
            heat: 1593
          },
          {
            x: "Sunday",
            y: "Midnight–3:59 a.m.",
            heat: 1486
          },
          {
            x: "Sunday",
            y: "4:00–7:59 a.m.",
            heat: 695
          },
          {
            x: "Sunday",
            y: "8:00–11:59 a.m.",
            heat: 564
          },
          {
            x: "Sunday",
            y: "Noon–3:59 p.m.",
            heat: 932
          },
          {
            x: "Sunday",
            y: "4:00–7:59 p.m.",
            heat: 1292
          },
          {
            x: "Sunday",
            y: "8:00–11:59 p.m.",
            heat: 1211
          }
        ];
      }
    </script>
  </body>
</html>

Conclusion

In conclusion, data visualization is an incredibly powerful tool that can help us uncover important insights from our data. And with JavaScript, creating beautiful and impactful charts, such as a heatmap, can be a breeze.

So don't be afraid to experiment with different chart types, styles, and libraries to create your own hard-hitting visualizations. And above all, remember to stay safe out there on the roads!

Forem: AnyChart

How to Enable Pinch-to-Zoom in Stock Charts — JavaScript Chart Tips

Question: How to Add Pinch-to-Zoom to JavaScript Stock Chart?

Solution: Implementing Pinch Zoom in JS Stock Charts

Overview

In Detail

Example

Further Learning

Wrapping Up

Custom Image Markers in Quadrant Charts — JS Chart Tips

Question: How to Display Custom Images as Markers in Quadrants?

Solution: Adding Images as Markers for Quadrant Data Points

Overview

In Detail

Examples

Further Learning

Wrapping Up

Custom Time Intervals in Stock Charts — JS Chart Tips

Question: How to Set Stock Data Grouping Intervals?

Solution: Creating Custom Data Grouping in Stock Charts

Overview

In Detail

Examples

Further Learning

Wrapping Up

Python Django Financial Trading Dashboard — Integrating AnyChart JS Charts

Quick jump:

Updating the View

Updating the Template — index.html

GOTCHA

Updating the Template — historical_data.html

Summary

Next Steps

Useful AnyChart Links

Creating a Roman History Timeline Chart in JavaScript

Table of Contents

Introduction

Step 1: Setting Up Environment

1.1. Create Basic HTML Document

1.2. Create Container for Chart

1.3. Include All Necessary Resources

1.4. Complete HTML Setup

Step 2. Adding Data

2.1. Define Periods (Ranges)

2.2. Define Events (Moments)

2.3. Complete Data Loading Function

Step 3. Creating Timeline Chart

3.1. Prepare Ground

3.2. Set Up Chart

3.3. Set Data to Chart

3.3.1. Load Data

3.3.2. Set Series for Periods (Ranges)

3.3.3. Set Series for Events (Moments)

3.4. Customize Tooltips

3.4.1. Configure Period Tooltips

3.4.2. Configure Event Tooltips

3.4.3. Complete Tooltip Customization

3.5. Enhance Navigation

3.5.1. Add Scrollbar

3.5.2. Set Up Zoom Interactivity

3.5.3. Add Zoom Control Buttons

3.6. Add Era Designators

3.7. Set Font for Axis Labels

3.8. Set Chart Title

3.9. Set Container and Draw Chart

3.10. Complete JavaScript Timeline Code

Step 4. CSS Styling

4.1. Style HTML, Body, Container

4.2. Style Zoom Control Buttons

4.3. Style Tooltips

4.4. Complete CSS Code

Result: Timeline Chart of Roman History

Wrapping Up

How to Create an OHLC Chart in JavaScript

What Is OHLC Chart?

OHLC Chart Example

A. Building Basic OHLC Chart with JavaScript

1. Create a basic web page in HTML

2. Include the required JavaScript files

3. Load the data