DEV Community: Ananya Deka

Smarter Axis Label Formatting Based on Zoom Level in CanvasJS

Ananya Deka — Thu, 20 Mar 2025 11:04:04 +0000

When building time-series charts, how you format axis labels can make or break readability — especially when users zoom across seconds to years. CanvasJS provides excellent out-of-the-box support for time-based axis labels, but when working with sub-minute or sub-hour data (e.g., sensor readings, real-time dashboards), the default behavior might not always deliver the best readability. This guide shows how to refine axis labels for small time ranges (seconds, minutes) while retaining CanvasJS’s automatic interval calculations for larger ranges.

The Challenge

For small time windows (e.g., 30 seconds or 10 minutes), CanvasJS might:

Omit seconds in labels, even when critical for precision.
Choose intervals that create cluttered labels (e.g., 1-second intervals for a 30-second range).
Fail to align label formats with user expectations (e.g., showing 14:00 instead of 14:00:00).

Solution Overview

We’ll override the valueFormatString property only for sub-hour ranges, while letting CanvasJS handle larger ranges automatically.

Key Improvements:

Seconds precision for ranges < 1 minute.
Clean intervals (e.g., 5-second or 1-minute increments).
Dynamic transitions between formats (seconds → minutes → hours).

Strategy: Let CanvasJS Handle Long Ranges, You Handle Short Ranges

Zoom Level (Visible Range)	CanvasJS Auto Format OK?	Custom Format Suggested
≥ 1 month	✅ Yes	❌ No
≤ 10 days	⚠ Decent	✅ MMM DD hh:mm
≤ 1 day	❌ No	✅ hh:mm TT
≤ 1 hour	❌ No	✅ hh:mm TT
≤ 1 minute	❌ No	✅ hh:mm:ss TT
≤ 10 seconds	❌ No	✅ hh:mm:ss TT

Dynamic Axis Label Formatting for Short Ranges

function getFormatString(axis) {
    var min = axis.viewportMinimum || axis.minimum;
    var max = axis.viewportMaximum || axis.maximum;
    var rangeMs = max - min;
    var MINUTE = 60 * 1000;
    var HOUR = 60 * MINUTE;
    var DAY = 24 * HOUR;
    var MONTH = 30 * DAY; // Approximation
    var YEAR = 365 * DAY;

    if (rangeMs < 1 * MINUTE) 
        return "HH:mm:ss"; // <1 minute: show seconds
    if (rangeMs < 1 * HOUR) 
        return "HH:mm"; // 1min–1hr: minutes
    if (rangeMs < 1 * DAY) 
        return "HH:mm"; // 1hr–1 day: hours
    if (rangeMs < 10 * DAY) 
        return "MMM DD HH:mm"; // 1 day–10 days: day + month + hours
    if (rangeMs < 3 * MONTH) 
        return "MMM DD"; // 10 days–3 months: day + month
    if (rangeMs < 3 * YEAR) 
        return "MMM YYYY"; // 3 months–3 years: month + year

    return "YYYY"; // >3 years: year only
}

Hook Into Chart Events

var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: true,
    axisX: {
        valueFormatString: "MMM DD, YYYY" // Initial format, may be overridden
    },
    data: [{
        type: "line",
        xValueType: "dateTime",
        dataPoints: generateDataPoints() // Generate your time-series data
    }],
    rangeChanged: function (e) {
        var formatString = null;
        if (e.trigger != "reset")
            formatString = getFormatString(e.axisX[0]);
        e.chart.axisX[0].set("valueFormatString", formatString);
    }
});

chart.render();
// chart.axisX[0].set(“valueFormatString”,
// getFormatString(chart.axisX[0])); // Handle initial format, if not fixed

Why This Approach Works

Saves time: No need to manage complex interval settings.
Optimized for clarity: Users see what’s most relevant at each zoom level.
Minimal code: Focuses only on improving what CanvasJS doesn’t handle well.
Scalable: Works across dashboards, analytics apps, stock charts, and more.

By overriding intervals and formats only for sub-hour ranges, this approach balances customization with CanvasJS’s built-in intelligence. Developers gain fine-grained control over seconds/minutes without sacrificing the library’s robustness for larger timeframes. Implement this to build dashboards that shine at all zoom levels—from milliseconds to decades!

Integrating WebDataRocks and CanvasJS for Interactive Data Visualization

Ananya Deka — Thu, 28 Nov 2024 12:09:26 +0000

Introduction

In modern web applications, data analysis and visualization play a crucial role in delivering insights. While pivot tables allow users to explore and manipulate data interactively, charts make it easier to understand trends and patterns at a glance. WebDataRocks, a JavaScript pivot table library, and CanvasJS, a versatile charting library, can be seamlessly integrated to combine the best of data exploration and visualization.

About the Libraries

WebDataRocks

WebDataRocks is a lightweight JavaScript library designed to simplify data analysis. It enables developers to create powerful pivot tables in web applications with ease.

Key features include:

A drag-and-drop interface for slicing and dicing data.
Support for JSON and CSV data formats.
Real-time filtering, sorting, and aggregation.
Cross-browser compatibility and a responsive design.

WebDataRocks empowers users to analyze data interactively without requiring advanced coding skills.

CanvasJS

CanvasJS is a robust charting library that offers:

A wide variety of chart types (bar, column, pie, etc.).
Interactive and responsiveness.
Lightweight performance optimized for web applications.
Customization options for styling charts to match application themes.

CanvasJS helps visualize complex datasets in a way that is both visually appealing and easy to understand.

Integration with Code Examples

Step 1: HTML Structure

Create placeholders for the pivot table and chart.

<div id="pivot-table" style="width: 100%; height: 400px;"></div>
<div id="chart-container" style="height: 400px; width: 100%;"></div>

Step 2: Include Required Libraries

Include WebDataRocks and CanvasJS using their CDN links.

<link rel="stylesheet" href="https://cdn.webdatarocks.com/latest/webdatarocks.css">
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

Step 3: Initialize WebDataRocks

Set up a pivot table to summarize your data.

var pivot = new WebDataRocks({
  container: "#pivot-table",
  toolbar: true,
  report: {
    dataSource: {
      data: [
        { Category: "Fruits", Sales: 100, Month: "January" },
        { Category: "Vegetables", Sales: 200, Month: "January" },
        { Category: "Fruits", Sales: 150, Month: "February" },
        { Category: "Vegetables", Sales: 250, Month: "February" },
      ],
    },
    slice: {
      rows: [{ uniqueName: "Category" }],
      columns: [{ uniqueName: "Measures" }],
      measures: [{ uniqueName: "Sales", aggregation: "sum" }],
    },
  },
  reportcomplete: function () {
    pivot.off("reportcomplete")
    updateChart()
  },
});

Step 4: Fetch Summarized Data and Render Chart

Fetch pivot table data and render it as a chart using CanvasJS.

var chartData = [];
var chart = new CanvasJS.Chart("chart-container", {
  animationEnabled: true,
  theme: "light2",
  title: {
    text: "Sales by Category"
  },
  data: [
    {
      type: "column",
      dataPoints: chartData
    },
  ],
});

function updateChart() {
  pivot.getData({}, renderChart);
}

function renderChart(data) {
  if (data.data) {
    data.data.forEach((row) => {
      if (row.r0 && row.v0) {
        chartData.push({
          label: row.r0,
          y: row.v0
        })
      }
    })
  }
  chart.render();
}

// Update the chart dynamically on data changes
pivot.on("datachanged", updateChart);

Take a look at this JSFiddle for the complete working example.

Conclusion

The integration of WebDataRocks and CanvasJS provides a comprehensive solution for building interactive, data-driven dashboards. WebDataRocks enables users to analyze and manipulate data in real-time, while CanvasJS transforms the data into beautiful, responsive charts. This combination empowers developers to deliver seamless analytical experiences that are both functional and visually engaging.

By following the steps above, you can create dashboards that meet modern data analysis and visualization demands, improving decision-making and enhancing user experience.

Creating a Gantt Chart with CanvasJS

Ananya Deka — Fri, 04 Oct 2024 11:35:51 +0000

Gantt charts are a fantastic way to visualize project timelines by illustrating tasks against time. They help in tracking progress, scheduling, and resource allocation in project management. In this article, we’ll walk through the steps to create a Gantt chart using CanvasJS, a user-friendly JavaScript charting library.

The Benefits of Gantt Charts

Gantt charts are a staple of project management, and for good reason. They offer a range of benefits, including:

Clear visualization: Gantt charts provide a clear and concise visual representation of the project timeline, making it easy to understand task dependencies and relationships.
Improved scheduling: With a Gantt chart, you can schedule resources and allocate tasks to team members with ease.
Enhanced planning: Gantt charts allow you to plan and visualize the timeline of events and activities, making it easier to identify potential bottlenecks.

Steps to Create Gantt Chart

Setting Up Your Environment

To get started, you need to include the CanvasJS library in your HTML file by linking it via CDN. Here's the initial HTML structure you can work with:

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    <style>
        #chartContainer {
            height: 400px; 
            width: 100%; 
        }
    </style>
</head>
<body>
    <div id="chartContainer"></div>
    <script>
        // Your Gantt chart code will go here
    </script>
</body>
</html>

Creating the Gantt Chart

Creating a Gantt chart in CanvasJS is a straightforward process that requires just a few simple steps:

Choose the rangeBar chart type: The rangeBar chart type is a versatile chart type that can be used to create a Gantt chart-like visualization.
Provide timestamp values as y-values: To create a Gantt chart, you'll need to provide timestamp values as y-values. These values will represent the start and end times of each task.
Use the CanvasJS.formatDate() function: The CanvasJS.formatDate() function is used to convert the timestamp values to display date and time values in the labels and tooltip content.

Gantt Chart Configuration

Next, we’ll set up the chart configuration.

const options = {
  ...
  axisY: {
    labelFormatter: function(e){
      return CanvasJS.formatDate(e.value, "MMM D, YYYY");
    },
    gridThickness: 1
  },
  toolTip:{
    contentFormatter: function ( e ) {
      return "<strong>" + e.entries[0].dataPoint.label + "</strong></br> Start: " +  CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "MMM D - h:mm TT") + "</br>End : " +  CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "MMM D - h:mm TT");
    },
    backgroundColor: "#f7f7f7",
    color: "#333",
    borderThickness: 1,
    borderColor: "#ddd"
  },
  data: [
    {
      type: "rangeBar",
      dataPoints: [
        { label: "Research", y: [(new Date(2024, 9, 4, 9, 0)).getTime(), (new Date(2024, 9, 7, 17, 0)).getTime()] },
        { label: "Design", y: [(new Date(2024, 9, 7, 9, 0)).getTime(), (new Date(2024, 9, 10, 17, 0)).getTime()] },
        { label: "Development", y: [(new Date(2024, 9, 10, 9, 0)).getTime(), (new Date(2024, 9, 20, 17, 0)).getTime()] },
        { label: "Testing", y: [(new Date(2024, 9, 20, 9, 0)).getTime(), (new Date(2024, 9, 25, 17, 0)).getTime()] },
        { label: "Documentation", y: [(new Date(2024, 9, 25, 9, 0)).getTime(), (new Date(2024, 9, 27, 17, 0)).getTime()] },
        { label: "Release & Verify", y: [(new Date(2024, 9, 28, 9, 0)).getTime(), (new Date(2024, 9, 28, 17, 0)).getTime()] }
      ]
    }
  ]
}

This code creates a rangeBar chart with six tasks, each with a start and end time. The CanvasJS.formatDate() function is used to convert the timestamp values to display date and time values in the labels and tooltip content.

Check out this JSFiddle for the complete code of this example.

Tips and Variations

Here are a few tips and variations to help you customize your Gantt chart:

Use different colors and styles: Use different colors and styles to differentiate between tasks and resources.
Add more data points: Add more data points to create a more detailed Gantt chart.
Customize the date and time format: Use the CanvasJS.formatDate() function to customize the date and time format.
Experiment with different chart options: Experiment with different chart options and settings to customize the appearance and behavior of the Gantt chart.

Conclusion

And there you have it! You’ve successfully created a Gantt chart using CanvasJS to visualize how long different activities will take over the course of a project. Feel free to adjust the activities, durations, and other chart configurations to suit your project’s needs.

Customizing Your CanvasJS Charts

Ananya Deka — Wed, 25 Sep 2024 11:28:27 +0000

CanvasJS is a versatile and powerful charting library that has a simple API, and offers a wide range of customization options. For advanced users looking to create highly tailored and interactive charts, here are some tips and techniques to help you get the most out of CanvasJS.

ToolTip

Tooltips provide additional information when users hover over data points. In CanvasJS, the toolTip object lets the user set the behaviour of toolTip, and customize it according to their requirement.

Custom Content: Use the content property to format the tooltip content. HTML tags and data point values can be included to provide relevant information in a concise manner.

toolTip: { 
    shared: true,
    content: "Category <i>{label}</i> <br />Value: {y} units <br />"     
}

Styling Tooltips: Target the .canvasjs-chart-tooltip class in your CSS file, which allows application of custom CSS styling to your tooltip.

<style>
    .canvasjs-chart-tooltip  {
         box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px !important;
    }
    .canvasjs-chart-tooltip div {
         padding: 8px !important;
    }
</style>

Real-time Data Visualization

Certain applications may require real-time data visualization, and in such cases, CanvasJS allows you to update data dynamically.

Updating Data Points: You can use the dataPoints array within the data object, to update existing data points or add new ones.

chart.data[0].addTo("dataPoints", {
    x: chart.data[0].dataPoints[chart.data[0].dataPoints.length-1].x + 10, y: Math.random() * (100 - 10) + 10})
});

Live Data Feed: You can also implement some function to fetch new data at regular intervals and update the chart accordingly.

var updateChart = function () {     
    yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
    dps.push({x: xVal,y: yVal});
    xVal++;

    if (dps.length >  10 ) {
        dps.shift();                
    }

    chart.render();     
};

setInterval(function(){updateChart()}, updateInterval);

Axis Customization

CanvasJS provides several attributes within the axis object that allow customizations, and can help make your chart more readable, informative, and attractive.

Custom Labels: Use the labelFormatter function to customize the axis labels.

axisX: {
    labelFormatter: function (e) {
        return CanvasJS.formatDate( e.value, "DD MMM");
    }
}

Grid Lines and Ticks: Customize the appearance of grid lines and ticks to improve chart readability.

axisX:{
    gridThickness: 1,
    gridColor: "#ddd",
    tickColor: "#000"
},
axisY:{
    gridColor: "#ddd",
    tickColor: "#000"
}

User Interactivity

CanvasJS offers event handlers for various events across different elements, which can be used to enhance the user experience.

Click Events: Add click event handlers to data points or the chart itself, to make it a more interactive experience.

data: [
    {
        click: (e) => {
            if(!e.dataPoint.indexLabel)
                e.dataPoint.indexLabel = (e.dataPoint.y).toString();
            else e.dataPoint.indexLabel = "";
                e.chart.render();
        },
        dataPoints: [
            { x: 10, y: 34},
            { x: 20, y: 45},
            { x: 30, y: 19 },
            { x: 40, y: 75 },
            { x: 50, y: 15 },
            { x: 60, y: 60 },
            { x: 70, y: 48 },
            { x: 80, y: 04 },
            { x: 90, y: 35 }
        ]
    }
]

Mouseover and Mouseout: Set mouseover and mouseout handlers for data points to customize hover effects.

data: [
    {
        mouseover: (e) => {
            let markerSize = e.chart.data[e.dataSeriesIndex].dataPoints[e.dataPointIndex].markerSize || e.chart.data[e.dataSeriesIndex].markerSize;
            e.dataPoint.markerSize = markerSize*1.5;
            e.chart.render();
        },
        mouseout: (e) => {
            let markerSize = e.chart.data[e.dataSeriesIndex].dataPoints[e.dataPointIndex].markerSize || e.chart.data[e.dataSeriesIndex].markerSize;
            e.dataPoint.markerSize = markerSize / 1.5;
            e.chart.render();
        },
        type: "scatter",
        dataPoints: [
            { x: 10, y: 34},
            { x: 20, y: 45},
            { x: 30, y: 19 },
            { x: 40, y: 75 },
            { x: 50, y: 15 },
            { x: 60, y: 60 },
            { x: 70, y: 48 },
            { x: 80, y: 04 },
            { x: 90, y: 35}
        ]
    }
]

Mixed Chart Types

CanvasJS allows you to combine different chart types in a single chart to provide a more comprehensive view of your data. For example, line and column charts can be combined to show trends and comparisons across different categories.

data: [
   {
        type: "column",
        name: "Actual Sales",
        dataPoints: [
            { x: new Date(2016, 0), y: 20000 },
            { x: new Date(2016, 1), y: 30000 },
            { x: new Date(2016, 2), y: 25000 },
            { x: new Date(2016, 3), y: 70000 },
            { x: new Date(2016, 4), y: 50000 },
            { x: new Date(2016, 5), y: 35000 },
            { x: new Date(2016, 6), y: 30000 },
            { x: new Date(2016, 7), y: 43000 },
            { x: new Date(2016, 8), y: 35000 },
            { x: new Date(2016, 9), y: 30000 },
            { x: new Date(2016, 10), y: 40000 },
            { x: new Date(2016, 11), y: 50000 }
        ]
    }, 
    {
        type: "line",
        name: "Expected Sales",
        dataPoints: [
            { x: new Date(2016, 0), y: 40000 },
            { x: new Date(2016, 1), y: 42000 },
            { x: new Date(2016, 2), y: 45000 },
            { x: new Date(2016, 3), y: 45000 },
            { x: new Date(2016, 4), y: 47000 },
            { x: new Date(2016, 5), y: 43000 },
            { x: new Date(2016, 6), y: 42000 },
            { x: new Date(2016, 7), y: 43000 },
            { x: new Date(2016, 8), y: 41000 },
            { x: new Date(2016, 9), y: 45000 },
            { x: new Date(2016, 10), y: 42000 },
            { x: new Date(2016, 11), y: 50000 }
       ]
    }   
]

Conclusion

Customizing CanvasJS charts can significantly enhance the visual appeal and functionality of your data visualizations. By leveraging features the likes of the ones discussed in this article, you can create highly engaging and informative charts. These tips will help you unlock the full potential of CanvasJS and create charts that stand out.

Analyzing Trends with Technical Indicators in CanvasJS

Ananya Deka — Mon, 23 Sep 2024 13:57:40 +0000

In the world of trading, technical indicators are invaluable for analyzing market trends and making informed decisions. This article will demonstrate how to utilize the technicalIndicators library alongside CanvasJS to visualize a few key indicators: Simple Moving
Average (SMA), Exponential Moving Average (EMA), Relative Strength Index (RSI), On Balance Volume (OBV), and Bollinger Bands.

Understanding Technical Indicators

Technical indicators are calculations based on historical price data, helping traders gauge market conditions and predict future price movements. Some commonly used indicators include:

Simple Moving Average (SMA): SMA calculates the average of a selected range of prices, usually closing prices, over a specified period.
Exponential Moving Average (EMA): EMA is similar to SMA but gives more weight to recent prices, making it more responsive to new information.
Relative Strength Index (RSI): RSI measures the speed and change of price movements, oscillating between 0 and 100. It is typically used to identify overbought or oversold conditions.
On Balance Volume (OBV): OBV is a momentum indicator that uses volume flow to predict changes in stock price. It adds volume on up days and subtracts volume on down days.
Bollinger Bands: Bollinger Bands consist of a middle band (SMA) and two outer bands (standard deviations above and below the SMA). They help identify overbought and oversold conditions.

Implementing Technical Indicators with technicalindicators

The technicalindicators package simplifies the calculation of these indicators. Below is a step-by-step guide to implementing SMA, EMA, RSI, OBV, and Bollinger Bands in a CanvasJS StockChart:

Setting Up Your Environment First, include the necessary CanvasJS scripts and install the technicalindicators package:

<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.stock.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/technicalindicators@3.0.0/dist/browser.js"></script>

Adding Technical Indicators Use the technicalindicators package to calculate SMA, RSI and the other mentioned technical indicators. Format the calculated indicators to the format accepted by CanvasJS, and adjust the indices to align with the datapoints correctly.

function getSMADataSeries(input) {
    let dataPoints = [];
    const sma = SMA.calculate({period: 20, values: input.close});
    let data = {
      type: "line",
      name: "sma",
      dataPoints: sma.map((elem, index) => ({ x: new Date(new Date(input.date[index]).getTime() + (20 * 24 * 60 * 60 * 1000)), y: elem })
      ),
    };
    return data;
  }

Analyzing Trends

With the chart set up, you can now analyze market trends:

Identify Trends: Look at how the price relates to the SMA and EMA. Prices above the moving averages suggest an upward trend, while those below indicate a downward trend.
Crossovers: A bullish crossover occurs when the price moves above the SMA or EMA, indicating a potential buying opportunity.
Bollinger Bands: The distance between the upper and lower bands indicates market volatility. When bands are close together, it suggests lower volatility, while wider bands indicate higher volatility.
OBV Analysis: OBV can provide insight into buying/selling pressure. Rising OBV suggests accumulation, while falling OBV indicates distribution.

By integrating the technicalIndicators library with CanvasJS, you can easily calculate and visualize various technical indicators. This approach enables you to analyze market trends more effectively and make informed trading decisions. As you become comfortable with these tools, feel free to explore additional indicators and customization options to enhance your trading strategies.