DEV Community: Vishwas R

Dynamic Highlighting of Weekends in CanvasJS Charts

Vishwas R — Thu, 20 Mar 2025 07:54:58 +0000

Visualizing time-series data - such as financial charts, project timelines, or event trackers - often requires contextual markers like weekends or holidays to improve insights. CanvasJS charts offer the flexibility to dynamically highlight specific date ranges using stripLines.

Why Highlight Weekends/Holidays?

Highlighting weekends or holidays on a chart can serve various purposes:

Weekends often have predictable patterns (e.g., reduced sales or web traffic).
Holidays can cause atypical spikes or drops in data.
Highlighting these days helps users understand whether fluctuations are seasonal or exceptional.

StripLines to Highlight Weekends

CanvasJS provides a flexible way to highlight specific regions on a chart using stripLines, which are vertical or horizontal bands drawn across an axis. For a date-time axis (typically axisX in time-based charts), stripLines can be configured with value and endValue properties to span specific time ranges, such as an entire day.

Determine the Date Range: Identify the minimum and maximum dates from your data or the visible viewport.
Identify Special Days: Calculate weekend dates (Saturdays and Sundays) or retrieve holiday dates from a list.
Add StripLines: Use stripLines to shade these days with customizable colors and opacity.

For most use cases, adding all stripLines initially is sufficient, as CanvasJS efficiently renders only those within the visible range. However, for large datasets or specific requirements, dynamic updates can optimize performance.

function addWeekendStripLines(chart, axis) {
    var startDate = chart.axisX[0].get("viewportMinimum"),
        endDate = chart.axisX[0].get("viewportMaximum"),
        currentDate = new Date(startDate);

    var stripLines = [];

    while (currentDate <= endDate) {
        if (currentDate.getDay() === 6) {
            // Saturday
            var weekendStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 0, 0, 0);
            var weekendEnd = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1, 23, 59, 59);

            stripLines.push({
                startValue: weekendStart,
                endValue: weekendEnd,
                color: "#ECEEF0",
                opacity: 0.5,
                label: "Weekend",
                labelAlign: "center",
                labelFontColor: "#333",
                labelBackgroundColor: "transparent"
            });
        }

        currentDate.setDate(currentDate.getDate() + 1);
    }

    axis.set("stripLines", stripLines);
}

You can apply a similar technique for holidays by maintaining a list of holiday ranges and pushing stripLines for those periods.

Customization Tips

Opacity: Adjust the alpha channel in colors (e.g., #FFD1D180 → 80 = 50% opacity).
Labels: Add labelPlacement: "inside" to display labels within striplines.
Priority: Order striplines array to overlay holidays on weekends.

Using StripLines in CanvasJS, you can dynamically highlight weekends, holidays, or any date range to add context to time-series data. This method keeps your chart clean while emphasizing critical periods. Try adjusting colors and transparency to match your dashboard’s theme!

Browser Storage Types and Their Maximum Limits

Vishwas R — Tue, 18 Feb 2025 10:31:08 +0000

Web applications often rely on browser storage to store and manage data locally. This table compares various browser storage types—like Cookies, LocalStorage, and IndexedDB—across popular browsers such as Chrome, Firefox, and Safari. Knowing the maximum storage limits for each browser helps developers select the most suitable storage method for their needs while ensuring optimal performance and user experience.

Storage Type	Description	Chrome/Edge	Firefox	Safari	Opera
Cookies	Small data files sent by a website and stored on the user's device, primarily used for session management and tracking.	Approximately 4 KB per cookie, with a limit of around 20 cookies per domain.	Approximately 4 KB per cookie, with a limit of around 20 cookies per domain.	Approximately 4 KB per cookie, with a limit of around 20 cookies per domain.	Approximately 4 KB per cookie, with a limit of around 20 cookies per domain.
LocalStorage	Provides persistent storage that remains even after the browser is closed; data is stored as key-value pairs in string format.	Typically 10 MB per origin. (Wikipedia)	Typically 10 MB per origin. (Wikipedia)	Typically 5 MB per origin. (Wikipedia)	Typically 5 MB per origin. (Wikipedia)
SessionStorage	Similar to LocalStorage but scoped to the lifetime of the page session; data is cleared when the page session ends.	Approximately 5 MB per origin. (MDN)	Approximately 5 MB per origin. (MDN)	Approximately 5 MB per origin. (MDN)	Approximately 5 MB per origin. (MDN)
IndexedDB	A low-level API for storing large amounts of structured data, including files/blobs; useful for applications requiring complex data storage.	Up to 60% of the total disk size per origin. (MDN)	Up to 50% of free disk space, with a maximum of 2 GB per origin. (medium.com)	Up to 20% of total disk space per origin; increases to 60% if saved as a web app. (MDN)	Similar to Chrome, as Opera is based on Chromium.
Cache Storage API	Allows storage of request/response object pairs for efficient resource retrieval, primarily used by service workers for offline caching.	Managed by the browser's storage management system; specific limits vary by browser and are typically substantial. (MDN)	Managed by the browser's storage management system; specific limits vary by browser and are typically substantial. (MDN)	Managed by the browser's storage management system; specific limits vary by browser and are typically substantial. (MDN)	Managed by the browser's storage management system; specific limits vary by browser and are typically substantial. (MDN)
File System Access API	Enables web applications to access and store files on the user's local file system with user consent; useful for applications requiring direct file manipulation.	Managed by the browser's storage management system; specific limits vary by browser and are typically substantial. (MDN)	Managed by the browser's storage management system; specific limits vary by browser and are typically substantial. (MDN)	Managed by the browser's storage management system; specific limits vary by browser and are typically substantial. (MDN)	Managed by the browser's storage management system; specific limits vary by browser and are typically substantial. (MDN)

Ultimately, knowing the storage capabilities and constraints of each browser helps developers make the best choice for their web applications. Whether you need simple key-value pairs or complex, offline-capable storage, this guide provides the foundation for effective storage management. By leveraging the right storage type for the job, you can avoid performance bottlenecks and enhance the user experience.

Integrating CanvasJS Charts in Salesforce Lightning Aura Component

Vishwas R — Fri, 13 Dec 2024 11:50:53 +0000

Visualizing data within Salesforce enhances user engagement and decision-making. A recent study showed that dashboards with interactive charts increase user adoption by 70%. This article guides you through seamlessly integrating CanvasJS charts into your Lightning Aura components for impactful data representation.

Prerequisites

Salesforce
CanvasJS

Steps to Create a Lightning App

Create a New Lightning Application

Open the Salesforce Developer Console.
Navigate to File > New > Lightning Component.
Provide a name for the component and a brief description.
Click Submit.
Save your component using File > Save or by pressing Ctrl + S.

Preview the Application

Click the Preview button in the Developer Console (located in the upper-right corner).
This will open the application in your browser.

Integrating the CanvasJS Library

CanvasJSLightningApp.app
This application serves as the container for the component.

<aura:application>
    <c:CanvasJSLightningComponent />
</aura:application>

CanvasJSLightningComponent.cmp
This component renders the chart. Ensure the ltng:require directive includes the correct paths to your static resources.

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <ltng:require scripts="/resource/jquery,/resource/canvasjs" afterScriptsLoaded="{!c.renderChart}"/>
    <div aura:id="chartContainer" style="width: 100%; height: 360px;"></div>
</aura:component>

CanvasJSLightningComponentController.js
This controller includes the logic to render the CanvasJS chart.

({
    renderChart : function(component, event, helper) {        
        new CanvasJS.Chart(component.find("chartContainer").getElement(), {
            title: {
                text: "CanvasJS Chart - Salesforce Lightning App"
            },
            data: [{
                type: "funnel",
                dataPoints: [
                    { y: 100, label: "Apple" },
                    { y: 63, label: "Orange" },
                    { y: 35, label: "Banana" },
                    { y: 15, label: "Mango" },
                    { y: 5, label: "Grape" }
                ]
            }]
        }).render();
    }
})

Static Resources: The ltng:require directive includes jQuery and CanvasJS as dependencies.
Chart Rendering: The renderChart method initializes the CanvasJS chart within the chartContainer div.
Chart Data: Customize the dataPoints array to display the desired data.

Preview and Verify

Save all files in the Developer Console.
Open the application preview to verify the chart renders correctly.
Adjust look & feel of chart as needed to fit your requirements.

This integration provides a dynamic way to visualize data using CanvasJS within Salesforce Lightning. Ensure all libraries are properly uploaded and referenced to avoid issues during deployment. For additional information, refer to the GitHub repository: CanvasJS Lightning Aura App.

Integrating CanvasJS with DataTables

Vishwas R — Tue, 01 Oct 2024 11:38:23 +0000

CanvasJS is a JavaScript charting library that allows you to create interactive and responsive charts, while DataTables is a jQuery plugin that enhances HTML tables with advanced interaction controls like pagination, filtering, and sorting. Combining these two tools in a dashboard enables real-time data visualization, making it easier to analyze and interpret data trends and patterns through interactive and visually appealing charts that update dynamically based on the table data.

In this tutorial, we’ll walk through the process of integrating CanvasJS with DataTables to create a dynamic pie chart that updates based on the data in the table. This example will use a simple HTML structure and JavaScript code to demonstrate the integration.

Prerequisites

Before we begin, ensure you have the following:

Basic knowledge of HTML, CSS, and JavaScript.
CanvasJS and DataTables libraries included in your project.

Step 1: Setting Up the HTML

First, create an HTML file with a container for the chart and a table for the data.

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>

Step 2: Creating the JavaScript File

Create a script.js file and add the following code to initialize the DataTable and CanvasJS chart.

// Create DataTable
var table = new DataTable('#dataTable');

// Create chart
var chart = new CanvasJS.Chart('chartContainer', {
        animationEnabled: true,
    theme: "light2",
    title: {
        text: 'Staff Count Per Position'
    },
    data: [
        {
            type: "pie",
          dataPoints: chartData(table)
        }
    ]
});
chart.render();

// On each draw, update the data in the chart
table.on('draw', function () {
    chart.options.data[0].dataPoints = chartData(table);
    chart.render();
});

function chartData(table) {
    var counts = {};

    // Count the number of entries for each position
    table
        .column(1, { search: 'applied' })
        .data()
        .each(function (val) {
            if (counts[val]) {
                counts[val] += 1;
            }
            else {
                counts[val] = 1;
            }
        });

    return Object.entries(counts).map((e) => ({
        label: e[0],
        y: e[1]
    }));
}

HTML Structure: The HTML file includes a container for the chart (chartContainer) and a table (example) with sample data.
DataTable Initialization: The DataTable is initialized using the DataTable constructor.
CanvasJS Chart Initialization: A new CanvasJS chart is created with the specified options, including the chart type (pie) and data points.
Dynamic Data Update: The draw event of the DataTable is used to update the chart data points whenever the table is redrawn. The chartData function calculates the number of entries for each position and updates the chart accordingly.

Step 3: Test and Debug

Open the HTML file in a web browser: Ensure that the chart and table are displayed correctly.
Check for errors: Open the browser’s developer console to check for any JavaScript errors.
Verify dynamic updates: Add or remove rows from the table and ensure that the chart updates accordingly.

jsfiddle.net

By following these steps, you have successfully integrated CanvasJS with DataTables to create a dynamic pie chart that updates based on the data in the table. This integration allows you to visualize data in real-time, making it easier to analyze and understand the information presented in the DataTable. Feel free to customize the chart and table as needed for your specific use case. Happy coding!

Exploring CDN Links for CanvasJS Charts and Stockcharts

Vishwas R — Mon, 28 Aug 2023 06:27:10 +0000

When it comes to creating interactive and visually appealing charts for web applications, CanvasJS is a popular charting library that offer a wide range of charts for your application. CanvasJS Charts & StockCharts enable developers to showcase data in a comprehensible manner, making it easier for users to grasp insights. To incorporate these libraries into your web project seamlessly, CDN (Content Delivery Network) links can be incredibly useful. Below is a list of CDN links for both CanvasJS Charts and Stockcharts.

CanvasJS Charts CDN Links:

CanvasJS Charts provides a variety of chart types and interactive features. To integrate CanvasJS Charts into your web application, you can use the following CDN link:

<script src="https://cdn.canvasjs.com/ga/canvasjs.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@canvasjs/charts/canvasjs.min.js"></script>

<script src="https://www.unpkg.com/@canvasjs/charts/canvasjs.min.js"></script>

Simply include one of the above mentioned script tag inside head-section of your HTML file, and you'll have access to the CanvasJS Charts library.

Stockcharts CDN Links:

Stockcharts is specifically designed for creating financial and stock market-related charts. If you're looking to visualize stock data in your application, you can use the following CDN link:

<script src="https://cdn.canvasjs.com/ga/canvasjs.stock.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@canvasjs/stockcharts/canvasjs.stock.min.js"></script>

<script src="https://www.unpkg.com/@canvasjs/stockcharts/canvasjs.stock.min.js"></script>

By including one of the the script-tag in your HTML, you'll be able to leverage the capabilities of the Stockcharts library for displaying stock market data.

Why Use CDN Links?

CDN links offer several advantages when integrating external libraries into your web projects. Here are a few reasons why using CDN links for CanvasJS Charts and Stockcharts can be beneficial:

Efficiency:

CDN links allow you to load the libraries from distributed servers, reducing the load on your own server and improving page load times.

Easy Updates:

When a library is updated, the CDN link automatically serves the latest version to your application, ensuring that you're always using the most up-to-date features and fixes.

Simplicity:

Integrating libraries through CDN links is a straightforward process. You only need to add a single script tag to your HTML, saving you from downloading and managing the library files.

Global Availability:

CDN links are hosted on servers around the world, improving accessibility for users across different regions.

Utilizing CDN links for CanvasJS Charts and Stockcharts is a convenient way to enhance your web application with interactive and informative charts. By including the provided CDN links in your HTML code, you can harness the power of these libraries without the hassle of manual installation. This approach ensures that your application benefits from the latest features and improvements while maintaining optimal performance. Happy charting!

Convert HTML Form Data into PDF in PHP

Vishwas R — Wed, 29 Mar 2023 07:14:10 +0000

PHP is a server-side programming language that is widely used for web development. One of the most common use cases of PHP is to process and store form data submitted by users. In many cases, it is necessary to convert the form data into a more usable format, such as a PDF document. In this article, lets explore how to use PHP to convert form data to PDF.

Step 1: Install a PDF library

The first step is to install a PHP library that can be used to generate PDF documents. There are several popular libraries available, such as TCPDF, FPDF, and mPDF. For this article, we will be using mPDF, which is a free and open-source library that is widely used for generating PDF documents in PHP.
To install mPDF, you can download the latest version from the Github (https://github.com/mpdf/mpdf) or using composer and copy the folder to your web server.

Step 2: Create a form

The next step is to create a form that will allow users to input the data that will be converted to a PDF. In this example, we will create a simple form that collects the user's name, email address, and message.

<form method="post" action="process_form.php">
    <label>Name:</label>
    <input type="text" name="name"><br>
    <label>Email:</label>
    <input type="email" name="email"><br>
    <label>Message:</label>
    <textarea name="message"></textarea><br>
    <input type="submit" value="Submit">
</form>

Step 3: Process the form data

Once the form has been submitted, the form data must be processed and converted into a PDF document. To do this, we will create a PHP script called process_form.php.

<?php

$path = (getenv("MPDF_ROOT")) ? getenv("MPDF_ROOT") : __DIR__;
require_once $path . "/vendor/autoload.php";

$pdfcontent = '<table class="form-data"><thead><tr> </tr></thead><tbody>';

foreach($_POST as $key =>$value){
    $pdfcontent .= "<tr><td>" . ucwords(str_replace("_", " ",$key)) . "</td>:<td>" . $value . "</td></tr>";
}
$pdfcontent .= "</tbody></table>";

$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML(utf8_encode($pdfcontent));
$mpdf->Output('formdata.pdf', 'D');

?>

The process_form.php script first includes the mPDF library using the require_once statement. It then retrieves the form data using the $_POST superglobal array. With the posted data, it creates a HTML table. The script then creates a new mPDF object, write the HTML content, and outputs the form data to the PDF document. Finally, it lets you download the generated PDF by passing 'D' as a parameter in the Output method.

Data Visualization using CanvasJS in Django Apps

Vishwas R — Fri, 17 Feb 2023 07:04:26 +0000

Data visualization is the process of representing data in a graphical or pictorial format to understand and interpret data better. In today's digital age, web applications are the primary medium for information exchange. Therefore, it's essential to integrate data visualization into web applications to make them more effective.

In this article, we'll explore how to integrate CanvasJS Python chart into Django applications to create interactive and visually appealing data visualizations.

Prerequisites

We assume that you have a basic understanding of Django and have already set up a Django project. We will also assume that you have installed the latest version of CanvasJS by downloading the library from the official website.

Create a Django App

First, create a new Django app within your project by running the following command:

python manage.py startapp charts

This will create a new directory called "charts" in your project.

Create a View

Next, create a view in the "charts/views.py" file to render the chart on a web page. Here is a sample view that creates a line chart using the CanvasJS library:

from django.shortcuts import render

def chart(request):
    dataPoints = [
        {"x": 10, "y": 21},
        {"x": 20, "y": 25},
        {"x": 30, "y": 20},
        {"x": 40, "y": 35},
        {"x": 50, "y": 38},
        {"x": 60, "y": 45},
        {"x": 70, "y": 50},
        {"x": 80, "y": 55},
        {"x": 90, "y": 60},
        {"x": 100, "y": 58}
    ]
    return render(request, 'index.html', {'dataPoints': dataPoints})

This view creates a list of datapoints and passes it to the chart template using the render() function. Note that we are using the "index.html" template where chart is rendered.

Create a template

Now create the "index.html" template in the "charts/templates/charts" directory. This template will contain the HTML and JavaScript code to render the chart using the CanvasJS library. Here is a sample template that creates a line chart:

{% load static %}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "light1", // "light2", "dark1", "dark2"
        animationEnabled: false, // change to true                
        title:{
            text: "Python Line Chart"
        },
        data: [{
            // Change type to "bar", "area", "spline", "pie",etc.
            type: "line",
            dataPoints: {{ data_points | safe }}
        }]
    });
    chart.render();
}
</script>    
</head>
<body>
    <div id="chartContainer" style="width: 100%; height: 360px;"></div>
</body>
</html>

Configure URLs & Run the Application

Finally, add a URL to the "charts/urls.py" file to map the "chart" view to a URL. Here is a sample URL configuration:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

Run the Django server python manage.py runserver. Navigate to "http://localhost:8000/charts/" in your web browser, and you should see a line chart generated by the CanvasJS library.

Github: https://github.com/vishwas-r/CanvasJS-Samples/tree/main/canvasjs-django-sample

Build Interactive Analytical Dashboard in Django

Vishwas R — Tue, 14 Feb 2023 12:40:48 +0000

Django is a powerful Python Web Framework that makes building web applications and dashboards a breeze. There are open-source dashboards built with Django that come with modern UI Kits, and developers can create analytic dashboards in a Django app. In this article, let's explore how to build a beautiful dashboard in Django using Bootstrap, CanvasJS Python Charts and a few other tools.

Project Setup

Create a new Django project. And create a new app within the project.

django-admin startproject dashboard
python manage.py startapp charts

Create View

Create a new file in the charts app called views.py. In this file, we'll define the view that will render our dashboard. Here's an example view that renders a template called index.html

from django.shortcuts import render

def dashboard(request):
    return render(request, 'index.html')

Create Template

Create a new file in the charts/templates directory called dashboard.html. Define the layout of the dashboard using Bootstrap.

<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
            <!-- Sidebar content goes here -->
        </nav>

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <!-- Main content goes here -->
        </main>
    </div>
</div>

Add Charts to the Dashboard

CanvasJS is a powerful charting library that lets you create interactive charts for dashboards. To add CanvasJS charts to the project, download the library and include it in the template.

Download the library from CanvasJS website.
Extract the files to 'charts/static' folder.
Include canvasjs.min.js in the template.

<script src="{% static canvasjs.min.js' %}"></script>

Create Charts

Now, that CanvasJS is included in the template, you can start creating different of charts like line, column, pie, etc. to show them in the dashboard.

/* index.html */
<div id="chartContainer" style="width: 100%; height: 360px;"></div>
<script>
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            title:{
                text: "Column Chart"
            },
            data: [{
                dataPoints: {{ datapoints | safe }}
        });
        chart.render();
    }
</script>

Update the view to return the data for the chart.

/* views.py */
from django.http import HttpResponse
from django.shortcuts import render
from django.template import loader

def index(request):
    datapoints= [
        { "label": "Jan", "y": 10000 },
        { "label": "Feb", "y": 30162 },
        { "label": "Mar", "y": 26263 },
        { "label": "Apr", "y": 18394 },
        { "label": "May", "y": 18287 },
        { "label": "Jun", "y": 28682 },
        { "label": "Jul", "y": 31274 },
        { "label": "Aug", "y": 33259 },
        { "label": "Sep", "y": 25849 },
        { "label": "Oct", "y": 24159 },
        { "label": "Nov", "y": 32651 },
        { "label": "Dec", "y": 31984 }
    ]
    return render(request, 'index.html', { "datapoints" : datapoints })

Customize the Dashboard

Now that you have added one chart to the dashboard, add few more charts and customize the look and feel of the charts to match your dashboard. You can change the color & font-family of all the textual content of the chart to match it with the theme of dashboard.

Github Link: https://github.com/vishwas-r/Django-Dashboard-using-CanvasJS-Python-Charts

How to Add CanvasJS Charts to your Android App?

Vishwas R — Thu, 15 Sep 2022 08:41:35 +0000

Android WebView is an android UI widget which is used to open any web URL or load html data. WebView is used to show web page in android activity. In simple words, Android WebView is a View that displays web pages. In this tutorial lets see how to add CanvasJS charts to android app.

1. Create a new project in Android Studio

Create a new project with empty activity.

2. Add Asset Folder & Create HTML file

Add asset folder in the newly created app & create html file in the folder, let's call it as "column chart.html". Paste the following code in the html file.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light1", // "light2", "dark1", "dark2"
animationEnabled: true, // change to true
title:{
text: "Basic Column Chart"
},
data: [{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple",  y: 10  },
{ label: "orange", y: 15  },
{ label: "banana", y: 25  },
{ label: "mango",  y: 30  },
{ label: "grape",  y: 28  }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="./canvasjs.min.js"></script>
</body>
</html>

Download & save canvasjs.min.js file in the assets folder. You can download CanvasJS library from their official download page.

3. Create HTML Activity

By default, android studio would create activity_main.xml. Update the code of that file with the below one which creates a layout with webview.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

4. Update the Activity & Load HTML File

In MainActivity.java, enable JavaScript for webview & load html file that you saved in assets folder.

package com.canvasjs.charts;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView canvasJSChartView = findViewById(R.id.webView);
        canvasJSChartView.setWebViewClient(new WebViewClient());

        canvasJSChartView.getSettings().setJavaScriptEnabled(true); //Enable Javascript for WebView


        canvasJSChartView.loadUrl("file:///android_asset/column chart.html");
    }
}

Let's try to run your application. To run the app from android studio, open one of your project's activity files, select the device (if you have connected android device to your machine) / emulator device and click Run. Running the project should show you a CanvasJS column chart.

Download Sample from Github.

How to add title to Markdown Links & Images?

Vishwas R — Thu, 11 Aug 2022 05:49:17 +0000

It's very important to add title to links & images. But in many blogs / websites, they accept markdown & not everyone are aware of or it's not so easy to find how to add title in markdown content. But it's pretty simple to add title in markdown content. Passing a string along with the link or image works in such scenario. Below is an example.

//Add title to the links
[Open Google](https://google.com/ "Open Google")

//Add title to images
![alt text](image-url.png "Image Title")

Unfortunately, not all websites accepts & shows title. Some of them ignores the string passed whereas it works on GitHub. Many md cheat-sheets miss out adding this but seems helpful.

Add Interactive Angular Charts to ng-bootstrap Components

Vishwas R — Thu, 04 Aug 2022 10:21:28 +0000

In this Angular 14 Chart tutorial, we will learn how to add charts to display data within ng-bootstrap tabs. A chart is basically a graphical representation of data, they summarize large data or information in a visual easy-to-understand manner. Being a web-designer / developer, one would obviously work on dashboard at some point of time. Dashboards gives much information with the help of charts. In this tutorial, I'm showing how to add CanvasJS chart in ng-bootstrap navs (tabs). I've built the app in Angular 14 but CanvasJS & ng-bootstrap works across multiple versions of angular. CanvasJS is robust charting library for web designers & developers. Chart component supports more than 30 chart types & are responsive, interactive, easy to customize & allows you to create beautiful charts that can match your webpage / application design.

Note: This tutorial was made using the latest versions at the time of writing:
• Angular: v14.0.0
• Ng-bootstrap: v13.0.0
• CanvasJS Charts: v3.6.7

Create Angular App & Add ng-bootstrap

1. Create Angular Project

Create a fresh angular project using Angular CLI. Ignore this step if you already have an app.

ng new angular-bootstrap-charts

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

2. Add ng-bootstrap & CanvasJS angular chart components to the Project

Once the angular project is created, add ng-bootstrap & CanvasJS angular charts to your project. ng-bootstrap can be added either using Angular CLI way or manually you can just perform 'npm install package-name'. Below are the syntaxes for both the approaches.

/* Angular CLI Way */
ng add @ng-bootstrap/ng-bootstrap

/* Manual Way */
npm install @ng-bootstrap/ng-bootstrap --save

And CanvasJS angular charts can be downloaded from their official site (npm package is not the official one) & save it in assets folder to import to the project.

Once the package is installed, let's import the module & register it. Open app.module.ts file & register the module.

/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
  imports: [
    BrowserModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add Bootstrap Nav (Tabs) Component

To keep it simple, let's add bootstrap tabs to the app. You can consider adding any bootstrap component like modal, accordion, etc.

1. Add Bootstrap Navs

<ul ngbNav #nav="ngbNav" class="nav-tabs">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
    </ng-template>
  </li>
  .
  .
  .
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

2. Add Chart to the Nav

<ul ngbNav #nav="ngbNav" class="nav-tabs">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
      <canvasjs-chart
      [options]="lineChartOptions"
      [styles]="{ width: '100%', height: '360px' }"
      ></canvasjs-chart>
    </ng-template>
  </li>
  .
  .
  .
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

3. Show chart only in Active Tabs

In tabs, content of active tabs will be shown while the content inactive tabs will be hidden. Hence, conditional rendering is required so that charts in inactive tabs are not rendered. To so do you can use keep a flag that keeps toggling when a tab is visible or hidden. Based on the flag, you can render the chart.

<ul ngbNav #nav="ngbNav" class="nav-tabs" (shown)="navChangeEvent($event)" (hidden)="navHiddenEvent($event)">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
      <canvasjs-chart
      *ngIf="showChart"
      [options]="lineChartOptions"
      (chartInstance)="getChartInstance($event)"
      [styles]="{ width: '100%', height: '360px' }"
      ></canvasjs-chart>
    </ng-template>
  </li>
  .
  .
  .
</ul>

At the time of writing this article, CanvasJS v3.6.7 was used in Angular 14 project. However, CanvasJS charts work across all versions of Angular. If you are new to CanvasJS angular charts or CanvasJS API or need a refresher, I would recommend reading the CanvasJS Charts documentation. And for ng-bootstrap, check out this documentation page.

How to Build Drill Down Chart in Angular?

Vishwas R — Wed, 20 Jul 2022 08:04:00 +0000

Drill-down charts are widely used to show data in depth with additional information. Drill-down charts shows relation between parent-child data / chart. For example: A chart can show yearly sales data (2010, 2011, 2012,...) and once you click on any of the year, it shows monthly / quarterly data of that particular year. In this article, let me brief how to create drill-down chart in angular using CanvasJS angular chart.

Prerequisites

CanvasJS Angular Charts

Add CanvasJS directives to your project

Download CanvasJS from this link.
Add the angular chart component files to your project (canvasjs.min.js & canvasjs.angular.component.js).
Register CanvasJS module

import { NgModule } from '@angular/core';
import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
})
export class AppModule { }

Refer CanvasJS Angular Integration section for more info / troubleshooting.

Structuring Drill-Down Data

CanvasJS accepts data in JSON format. That doesn't mean you have to store data in JSON file always. It simply means data has to be parsed to JSON format before passing it to chart options. The data can either be read from JSON / XML / CSV files or from a local JavaScript variable.
To build drill-down chart, we need to have parent(yearly) & child(quarterly) data.

yearlyData: [{
  cursor: 'pointer',
  dataPoints: [
    {
      label: "2019",
      y: 191630,
      name: "2019",
      color: '#f2c80f'
    }, {
      label: "2020",
      y: 203770,
      name: "2020",
      color: '#fc625e'
    }, {
      label: "2021",
      y: 193700,
      name: "2021",
      color: '#01b8aa'
    }]
}],
drilldownData: {
    '2019': [{
      color: "#f2c80f",
      dataPoints: [
        { label: 'Q1', y: 48980 },
        { label: 'Q2', y: 42690 },
        { label: 'Q3', y: 46980 },
        { label: 'Q4', y: 52980 }
      ]
    }],
    '2020': [{
      color: '#fc625e',
      dataPoints: [
        { label: 'Q1', y: 51780 },
        { label: 'Q2', y: 48590 },
        { label: 'Q3', y: 52500 },
        { label: 'Q4', y: 50900 }
      ]
    }],
    '2021': [{
      color: '#01b8aa',
      dataPoints: [
        { label: 'Q1', y: 42600 },
        { label: 'Q2', y: 44960 },
        { label: 'Q3', y: 46160 },
        { label: 'Q4', y: 48240 }
      ]
    }]
}

Perform Drill Down on Click

Bind click event to datapoints. Update the chart data on clicking datapoint & re-render the chart.

drilldownHandler = (e: any) => {
    this.chart.options = this.drilldownChartOptions;
    this.chart.options.data = this.options.drilldown[e.dataPoint.name];
    this.chart.options.title = { text: e.dataPoint.name };
    this.chart.render();
};

Add a button to navigate back after clicking on any column. Clubbing the above mentioned code will make you build a drill down chart. Below is the working sample.