How to Implement Error Combination Charts using CanvasJS ?

Last Updated : 05 Jun, 2023

In this article, we will learn to implement various Error charts using the Canvas JS plugin.

An error chart is used to show the uncertainty range of values in any data information relative to an average value of any variable. The “I” like vars represent the predictable deviation in any measurement of values in any data point which usually shows the uncertainty in a numeric value.
Error charts can be combined with column, bar, or line charts to make some relevant combination charts increasing the interactive or informative feature of any report or graph.

Syntax:

new CanvasJS.Chart($("#ID"), {
  data: [{         
      type: "column",     
      dataPoints: [
        {...},       
    ]
   },
   {
     type: "error",
     dataPoints: [
       { ... }
     ]     
   }  
  ] 
  ....       
});

Note: Change the type attribute to “bar” or “line” in the case of implementing any other combination Charts using Canvas JS.

Approach:

Choose a combination chart type for implementation from the above-mentioned attributes.
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.
Make charts depending on the data available for code implementation.

CDN Link:

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

Example 1: The following code shows the combination chart for the column error chart using the Canvas JS plugin. It shows the estimated and actual marks of 3 topper students of a school in various subjects. The error variable range is the estimated marks expected from a topper student. The actual marks obtained are represented by a column in the chart. The x-axis shows the different subjects for all 3 toppers represented with different colors in a column. The y-axis shows the marks obtained in percentage. The error bar on mouse hover shows the estimated range values.

HTML

<!DOCTYPE HTML> 
<html> 
<head> 
    <script type="text/javascript" src= 
"https://canvasjs.com/assets/script/canvasjs.min.js"> 
    </script> 
</head> 
<body> 
    <div style="text-align:center"> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Canvas JS Error Column Chart </h3> 
    </div> 
    <div id="chartID" 
         style="height:400px; max-width:950px;  
            margin:0px auto;"> 
    </div>  
    <script> 
        window.onload = function () { 
            var chart = new CanvasJS.Chart("chartID", { 
                  
                title:{ 
                    text: "Average Marks of Toppers" 
                }, 
                axisX:{ 
                    title: "Subjects"                     
                }, 
                axisY:{ 
                    title: "Marks (in Percentage)", 
                    suffix: " %"                     
                }, 
                  
                legend:{ 
                    cursor:"pointer" 
                }, 
                data: [{ 
                    type: "column",             
                    name: "First Ranker", 
                    color: "lightgreen", 
                    showInLegend: true, 
                    legendText: "First Ranker Score", 
                    toolTipContent:  
                    "<b> {label} </b>: {y} %", 
                    dataPoints: [                     
                        { label:"Physics", y:94 }, 
                        { label:"Maths", y: 92 }, 
                        { label:"Biology", y: 98}, 
                        { label: "Chemistry", y: 95}, 
                        { label: "English",y:90 }                                             
                    ]// End dataPoints for first ranker 
                }, 
                { 
                    type: "error",             
                    name: "Expected Marks range",                 
                    toolTipContent:  
                    "<b>{name}:</b> {y[0]} - {y[1]} %", 
                    dataPoints: [                     
                        { label:"Physics", y:[91,95] }, 
                        { label:"Maths", y: [90,93]}, 
                        { label:"Biology", y: [97,99]}, 
                        { label: "Chemistry", y: [92,96]}, 
                        { label: "English",y:[88,92] }                                             
                    ]// End dataPoints for 3rd ranker                 
                },// End data 
                { 
                    type: "column",         
                    showInLegend: true, 
                    legendText: "Second Ranker Score", 
                    name: "Second Ranker", 
                    color: "pink", 
                    toolTipContent:  
                    "<b> {label} </b>: {y} %", 
                    dataPoints: [                     
                        { label:"Physics", y:92 }, 
                        { label:"Maths", y: 90 }, 
                        { label:"Biology", y: 96}, 
                        { label: "Chemistry", y: 94}, 
                        { label: "English",y:89 }                                                 
                    ]// End dataPoints for 2nd ranker 
                }, 
                { 
                    type: "error",             
                    name: "Expected marks range",                 
                    toolTipContent:  
                    "<b>{name}:</b> {y[0]} - {y[1]} % ", 
                    dataPoints: [                     
                        { label:"Physics", y:[91,93] }, 
                        { label:"Maths", y: [88,92]}, 
                        { label:"Biology", y: [94,97]}, 
                        { label: "Chemistry", y: [92,95]}, 
                        { label: "English",y:[85,91] }                                             
                    ]// End dataPoints for 3rd ranker                 
                },// End data 
                { 
                    type: "column",     
                    showInLegend: true, 
                    legendText: "Third Ranker Score", 
                    name: "Third Ranker", 
                    color: "brown", 
                    toolTipContent:  
                    "<b> {label} </b>: {y} % ", 
                    dataPoints: [                     
                        { label:"Physics", y:93}, 
                        { label:"Maths", y: 85 }, 
                        { label:"Biology", y: 85}, 
                        { label: "Chemistry", y: 89}, 
                        { label: "English",y:86 }                                             
                    ]// End dataPoints for 3rd ranker                 
                }, 
                { 
                    type: "error",             
                    name: "Expected Marks range",                 
                    toolTipContent:  
                    "<b>{name}:</b> {y[0]} - {y[1]} %", 
                    dataPoints: [                     
                        { label:"Physics", y:[91,95] }, 
                        { label:"Maths", y: [84,92]}, 
                        { label:"Biology", y: [84,99]}, 
                        { label: "Chemistry", y: [87,95]}, 
                        { label: "English",y:[85,89] }                                                 
                    ]// End dataPoints for 3rd ranker                 
                }// End error data                 
                  
                ]// End data 
            }); 
            chart.render(); 
        }// window onload 
    </script> 
</body> 
</html>

Output:

Example 2: The following code demonstrates the line error combination chart using the plugin showing actual sales over a period of 12 months along with the expected sales with error bars. The y-axis shows the sales amount in dollars.

HTML

<!DOCTYPE HTML> 
<html> 
<head> 
    <script type="text/javascript" src= 
"https://canvasjs.com/assets/script/canvasjs.min.js"> 
    </script> 
</head> 
<body> 
    <div style="text-align:center"> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Error Line Chart </h3> 
    </div> 
    <div id="chartID" 
         style="height:400px; max-width:950px;  
            margin:0px auto;"> 
    </div>  
    <script> 
        window.onload = function () { 
            var chart = new CanvasJS.Chart("chartID", { 
                  
                title:{ 
                    text: "Predicted Sales in a year" 
                }, 
                axisX:{ 
                    interval:1 
                }, 
                axisY:{ 
                    title: "Sales Amount (in $)", 
                    prefix: "$"                     
                }, 
                data: [{ 
                    type: "line", 
                    name: "Actual Sales",                     
                    toolTipContent:  
        "<b> {label}</b> <br><span> {name} </span>: ${y} ", 
                    dataPoints: [                     
                        { label:"Jan",y:25000 }, 
                        { label:"Feb",y:18000 }, 
                        { label:"March",y:24000}, 
                        { label: "April",y:28000}, 
                        { label: "May", y:22000 }, 
                        { label: "June",y:14000 }, 
                        { label: "July", y:8000 }, 
                        { label: "August",y:11000 }, 
                        { label: "Sep", y:32000 }, 
                        { label: "Oct", y:18500 }, 
                        { label: "Nov", y:19000 }, 
                        { label: "Dec", y:21000 }                         
                    ]// end dataPoints 
                }, 
                { 
                    type:"error", 
                    name:"Estimated Sales", 
                    toolTipContent: "<span>{name}</span>: ${y[0]}  - ${y[1]}", 
                    dataPoints: [                     
                        { label:"Jan",y:[23650,26555] }, 
                        { label:"Feb",y:[16000,19500] }, 
                        { label:"March",y:[21750,25900]}, 
                        { label: "April",y:[26000,29000]}, 
                        { label: "May", y:[21000,23300]}, 
                        { label: "June",y:[12000,16000]}, 
                        { label: "July", y:[6500,9900]}, 
                        { label: "August",y:[10000,13900]}, 
                        { label: "Sep", y:[31000,33000]}, 
                        { label: "Oct", y:[17000,19670]}, 
                        { label: "Nov", y:[17980, 22000]}, 
                        { label: "Dec", y:[20000,23000]}             
                          
                    ]// end dataPoints                     
                }//  data type error 
                ]// end data 
            }); 
            chart.render(); 
        }// window onload 
    </script> 
</body> 
</html>

Output:

Example 3: The following code demonstrates the bar error combination chart using the Canvas JS plugin showing the number of articles (x-axis) published based on different course subjects or technologies (y-axis). The error bar shows the estimated number of articles in the pipeline that are ready for publishing.

HTML

<!DOCTYPE HTML> 
<html> 
<head> 
    <script type="text/javascript" src= 
"https://canvasjs.com/assets/script/canvasjs.min.js"> 
    </script> 
</head> 
<body> 
    <div style="text-align:center"> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Canvas JS Error Bar Chart </h3> 
    </div> 
    <div id="chartID" 
         style="height:400px; max-width:950px;  
            margin:0px auto;"> 
    </div>  
    <script> 
        window.onload = function () { 
            var chart = new CanvasJS.Chart("chartID", { 
                  
                title:{ 
                    text: "GeeksforGeeks Articles Chart" 
                }, 
                axisX:{ 
                    title: "Courses", 
                      
                }, 
                axisY:{ 
                    title: "Articles",     
                    includeZero: true 
                }, 
                toolTip: { 
                    // Tooltips are shared while mouse hover 
                    shared: true 
                }, 
                data: [{ 
                    type: "bar", 
                    name: "Average articles published",     
                    color: "lightgreen", 
                    toolTipContent:  
                    "<b>{label}</b> <br> <span>{name}</span>: {y}", 
                    dataPoints: [                     
                        { label:"Data structures", y:94 }, 
                        { label:"Algorithms", y:75 }, 
                        { label:"Web Technologies", y:89}, 
                        { label: "Python", y:80}, 
                        { label: "Blockchain", y:76}, 
                        { label: "JavaScript", y:88 }, 
                        { label: "PHP", y:98 }, 
                        { label: "MySQL", y: 84 }, 
                        { label: "HTML", y:92 }                         
                          
                    ]// end dataPoints 
                }, 
                { 
                    type: "error", 
                    name: "Estimated articles range (In Pipeline)", 
                    stemColor: "red", 
                    whiskerThickness: 4, 
                    toolTipContent:  
                    "<b>{label}</b> <br> <span>{name}</span>: {y[0]} - {y[1]}", 
                    dataPoints: [                     
                        { label:"Data structures", y:[91,95] }, 
                        { label:"Algorithms", y:[72,80] }, 
                        { label:"Web Technologies", y:[85,91] }, 
                        { label: "Python", y:[75,92] }, 
                        { label: "Blockchain", y:[74,80] }, 
                        { label: "JavaScript", y:[80,91]  }, 
                        { label: "PHP", y:[90,105] }, 
                        { label: "MySQL", y: [79,89] }, 
                        { label: "HTML", y:[89,95] }         
                          
                    ]// end dataPoints                                 
                } 
                ]// end data 
            }); 
            chart.render(); 
        }// window onload 
    </script> 
</body> 
</html>

Output:

Conclusion: Error combination charts are mostly used for reporting purposes like weather analysis, human resource management, or any type of monitoring project. It shows an idea of the accuracy of data indicating the estimated error or prediction in a measurement. It represents an amount of variance in data from the expected value. Whenever such situations occur, we need to implement a combination of any chart with an error chart type showing the estimated range of values with the actual value.

Suggest improvement

How to Implement Financial Charts using CanvasJS ?

Share your thoughts in the comments