How to Create Charts from XML file using CanvasJS ?

Last Updated : 24 Jul, 2024

Canvas JS is a Charting library that supports multiple devices for displaying the Chart & is easy to use with HTML & Javascript. It provides a different plugin option that facilitates the creation of the basic chart by using the data from the XML file. In this article, we will learn to create Charts from external XML files using the Canvas JS plugin.

Approach: The following approach will be used to create the chart from an XML file using Canvas JS plugin:

In the HTML design, use the <div> tag for showing the chart chosen.
In the script part of the code, instantiate the CanvasJS object by setting the type, data, datapoints, and other options properties of the library using the syntax.
Include the CDN link in the head section of the code to use the plugin's features.
Render the chart using the render() method of the Canvas JS plugin.
Set other attributes or properties as needed for the styling of the charts as given in the following example codes.
Create charts depending on the data available for code implementation. The data from the XML file is extracted using the jQuery get() method and find() method. The data extracted is pushed to an empty array using the jQuery push() method as shown in the code.

CDN Link:

 <script src=
 "https://canvasjs.com/assets/script/jquery-1.11.1.min.js">
 </script>
 <script type=
 "text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js">
 </script>

The following XML data will be used in both code examples:

employee.xml: This file is used in both code examples for extracting data.

<?xml version="1.0" encoding="utf-8"?>
<employees>
    <employee id="be129">
        <firstname>Jitendra</firstname>
        <lastname>Kumar</lastname>
        <title>Engineer</title>
        <division>Materials</division>
        <total_projects>312</total_projects>
        <expected_projects>299</expected_projects>
    </employee>
    <employee id="be130">
        <firstname>Amit</firstname>
        <lastname>Kumar</lastname>
        <title>Accountant</title>
        <division>Accts Payable</division>
        <total_projects>320</total_projects>
        <expected_projects>300</expected_projects>
    </employee>
    <employee id="be131">
        <firstname>Akash</firstname>
        <lastname>Kumar</lastname>
        <title>Engineering Manager</title>
        <division>Materials</division>
        <total_projects>328</total_projects>
        <expected_projects>210</expected_projects>
    </employee>
    <employee id="be132">
        <firstname>Aishwarya</firstname>
        <lastname>Kulshrestha</lastname>
        <title>Engineer</title>
        <division>Materials</division>
        <total_projects>231</total_projects>
        <expected_projects>220</expected_projects>
    </employee>
    <employee id="be133">
        <firstname>Sachin</firstname>
        <lastname>Kumar</lastname>
        <title>Engineer</title>
        <division>Materials</division>
        <total_projects>327</total_projects>
        <expected_projects>240</expected_projects>
    </employee>
    <employee id="be135">
        <firstname>Vikash</firstname>
        <lastname>kumar</lastname>
        <title>COO</title>
        <division>Management</division>
        <total_projects>216</total_projects>
        <expected_projects>200</expected_projects>
    </employee>
    <employee id="be136">
        <firstname>Suvam</firstname>
        <lastname>Basak</lastname>
        <title>Accountant</title>
        <division>Accts Payable</division>
        <total_projects>226</total_projects>
        <expected_projects>300</expected_projects>
    </employee>
    <employee id="be135">
        <firstname>Abhinav</firstname>
        <lastname>kumar</lastname>
        <title>COO</title>
        <division>Management</division>
        <total_projects>216</total_projects>
        <expected_projects>320</expected_projects>
    </employee>
     <employee id="be131">
        <firstname>DhanPal</firstname>
        <lastname>Singh</lastname>
        <title>Engineering Manager</title>
        <division>Materials</division>
        <total_projects>327</total_projects>
        <expected_projects>210</expected_projects>
    </employee>  
</employees>

Example 1: This example illustrates the column chart for the total projects done by different employees using the Canvas JS plugin and external XML file with various data. The chart is rendered by a button-click event using jQuery.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Column Chart using XML Data</title>

    <script type="text/javascript" src=
"https://canvasjs.com/assets/script/jquery-1.11.1.min.js">
    </script>
    <script type="text/javascript" src=
"https://cdn.canvasjs.com/canvasjs.min.js">
    </script>
    <style>
        .canvasjs-chart-tooltip {
            pointer-events: auto !important;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnID").click(function () {
                var myarray = [];
                $.get("employee.xml", function (data) {

                    $(data).find("employee").each(function () {
                      
                        // Access to the object it belongs to
                        var $thisDataPoint = $(this);
                      
                        // Return the text content of the element. 
                        var x = $thisDataPoint.find("firstname").html();
                        var x1 = $thisDataPoint.find("lastname").html();
                        var y = $thisDataPoint.find("total_projects").html();
                        var name = x + " " + x1;
                      
                        // Add one or more values to the end of the array.
                        myarray.push(
                            {
                                y: parseFloat(y),
                                label: String(x),
                                name: String(name)
                            }
                        );
                    });    // End find 

                    var chart = new CanvasJS.Chart("chartID", {
                        animationEnabled: true,
                        axisY: {
                            title: "Total projects done"
                        },
                        toolTip: {
                            shared: true,
                            enabled: true,
                            content: 
                          "Employee Name: {name}, Projects handled: {y}",
                        },
                        data: [{
                            type: "column",
                            color: "green",
                            dataPointWidth: 30,
                            indexLabelOrientation: "horizontal",
                            dataPoints: myarray,
                        }]
                    }); // End chart

                    chart.render();

                });// End get
            });// End button click
        });// End document ready
    </script>
</head>

<body>
    <div style="text-align:center">
        <h1 style="color:green">
              GeeksforGeeks
          </h1>
        <h3>
              Canvas JS Column chart using XML data 
          </h3>
    </div>
    <center>
        <button id="btnID">
            Render Chart from XML data
        </button>
    </center>
    <div id="chartID" 
         style="height:400px; 
                max-width:950px; 
                margin:0px auto;">
    </div>
</body>

</html>

Output:

Example 2: This example illustrates the column and line chart for the total projects and expected projects done by different employees using the Canvas JS plugin and external XML file. (The same "employee.xml" file is used in the code as given above.)