Category: chartjs

Aug 10

Chart.js – Mixed Chart

Chart.js – Mixed Chart ”; Previous Next Chart.js also provides us a facility to create charts having combination of two or different chart types. Such charts are called mixed charts. One of the most common examples of chart.js mixed chart is a bar chart including a line dataset. Syntax The syntax for creating a mixed chart is given below − type: ”scatter”, datasets: [ { type: ”scatter”, data: value, }, { type: ”bar”, data: value, }, ] Example Let’s take an example with the help of which we will create a mixed chart − <!DOCTYPE> <html> <head> <meta charset- “UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>chart.js</title> </head> <body> <canvas id=”chartId” aria-label=”chart” height=”300″ width=”580″></canvas> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js”></script> <script> var chrt = document.getElementById(“chartId”).getContext(“2d”); var chartId = new Chart(chrt, { type: ”scatter”, data: { labels: [“HTML”, “CSS”, “JAVASCRIPT”, “CHART.JS”, “JQUERY”, “BOOTSTRP”], datasets: [{ type: ”scatter”, label: “online tutorial subjects”, data: [ {x:10, y:14}, {x:25, y:35}, {x:21, y:20}, {x:35, y:28}, {x:15, y:10}, {x:19, y:30} ], backgroundColor: [”yellow”, ”aqua”, ”pink”, ”lightgreen”, ”gold”, ”lightblue”], borderColor: [”black”], radius: 8, }, { type: ”polarArea”, label: “online tutorial exam”, data: [20, 40, 30, 35, 30, 20], backgroundColor: [”navy”, ”aqua”, ”pink”, ”lightgreen”, ”lightblue”, ”gold”], borderColor: [”black”], borderWidth: 2, pointRadius: 5, } ], }, options: { responsive: false, scales: { y: { beginAtZero: true } } }, }); </script> </body> </html> Output Print Page Previous Next Advertisements ”;

Aug 10

Chart.js – Bubble Chart

Chart.js – Bubble Chart ”; Previous Next Chart.js provides us a way to display three dimensional of data at the same time with the help of bubble chart. First two dimensions of the bubble and corresponding horizontal and vertical axes determines the location of the bubble in chart. Whereas the third dimension is represented by the size of the bubble. Below are the namespaces to be used in bubble chart for dataset properties − data.datasets[index] − It provides options for this dataset only. options.datasets.bubble − It provides options for all bubble datasets. options.elements.point − It provides options for all the point elements. Options − It provides options for the whole chart We need to use type: “bubble” for creating the bubble chart. Example Let’s take an example with the help of which we will create a bubble chart − <!DOCTYPE> <html> <head> <meta charset- “UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>chart.js</title> </head> <body> <canvas id=”chartId” aria-label=”chart” height=”300″ width=”580″></canvas> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js”></script> <script> var chrt = document.getElementById(“chartId”).getContext(“2d”); var chartId = new Chart(chrt, { type: ”bubble”, data: { labels: [“HTML”, “CSS”, “JAVASCRIPT”, “CHART.JS”, “JQUERY”, “BOOTSTRP”], datasets: [{ label: “online tutorial subjects”, data: [{ x: 20, y: 21, z: 20 }, { x: 25, y: 25, z: 25 }, { x: 13, y: 11, z: 25 }, { x: 40, y: 18, z: 25 }, { x: 31, y: 28, z: 25 }, { x: 27, y: 35, z: 35 } ], backgroundColor: [”yellow”, ”aqua”, ”pink”, ”lightgreen”, ”gold”, ”lightblue”], borderColor: [”black”], radius: 8, }], }, options: { responsive: false, }, }); </script> </body> </html> Output Print Page Previous Next Advertisements ”;

Aug 10

Chart.js – Radial Axis

Chart.js – Radial Axis ”; Previous Next Radial axis is used in a radial chart such as a radar chart or polar area chart. This radial axis is basically a single axis that maps points in the angular and radial directions. Rather than being positioned on one of the edges of chart, radial axes overlay the chart area. Example Let’s take an example in which we will use radial axes for creating a chart − <!DOCTYPE> <html> <head> <meta charset- “UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>chart.js</title> </head> <body> <canvas id=”chartId” aria-label=”chart” height=”300″ width=”580″></canvas> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js”></script> <script> var chrt = document.getElementById(“chartId”).getContext(“2d”); var chartId = new Chart(chrt, { type: ”radar”, data: { labels: [“HTML”, “CSS”, “JAVASCRIPT”, “CHART.JS”, “JQUERY”, “BOOTSTRP”], datasets: [{ label: “online tutorial subjects”, data: [20, 40, 33, 35, 30, 38], backgroundColor: [”lightgrey”], pointBackgroundColor: [”yellow”, ”aqua”, ”pink”, ”lightgreen”, ”lightblue”, ”gold”], borderColor: [”black”], borderWidth: 1, pointRadius: 6, }], }, options: { responsive: false, scales: { r: { suggestedMin: 40, suggestedMax: 40 } } }, }); </script> </body> </html> Output Print Page Previous Next Advertisements ”;

Aug 10

Chart.js – Basics

Chart.js – Basics ”; Previous Next To understand the basics of chart.js, let’s go step-by-step and see how to create a simple bar chart using chart.js library − Step 1 − First we need to create a canvas id using canvas object. Here we can add various styles and HTML elements. We also need to provide the height and width of our graph or chart. Let’s see how we can create it − <canvas id=”chartId” aria-label = “chart” height=”500″ width = “500”></canvas> Step 2 − Now, we need to access the canvas Id and chart.js object as follows − var chrt = document.getElementById(“chartId”).getContext(“2d”); Step 3 − Next use the Chart.js Type object to specify what type of chart or graph you need. There are various types of graphs you can choose from. type: ”bar”, Step 4 − If you want to give labels to the elements of the graph or chart, you can use Chart.js “labels” object as follows − labels: [“HTML”, “CSS”, “JAVASCRIPT”, “CHART.JS”, “JQUERY”, “BOOTSTRP”], Likewise, you can also provide the label of the graph or chart using the label object as follows − label: “Online Tutorial Subjects” Step 5 − For graph, give the values of elements of your graph or chart. It can be done with the help of data object as follows − data: [20, 40, 30, 10, 40, 20] Step 6 − You can also apply some advance features like animation, responsive etc. by using the options object as follows − options: { responsive: false, }, Example In this example, we will create a bar graph showing various subjects for online tutorials. <!DOCTYPE> <html> <head> <meta charset- “UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>chart.js</title> </head> <body> <canvas id=”chartId” aria-label=”chart” height=”350″ width=”580″></canvas> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js”></script> <script> var chrt = document.getElementById(“chartId”).getContext(“2d”); var chartId = new Chart(chrt, { type: ”bar”, data: { labels: [“HTML”, “CSS”, “JAVASCRIPT”, “CHART.JS”, “JQUERY”, “BOOTSTRP”], datasets: [{ label: “Online Tutorial Subjects”, data: [20, 40, 30, 35, 30, 20], }], }, options: { responsive: false, }, }); </script> </body> </html> Output Print Page Previous Next Advertisements ”;

Aug 10

Chart.js – Discussion

Discuss Chart.js ”; Previous Next Chart.js, a popular open-source data visualization framework, enables us to generate the Scatter Plot, Line Chart, Bar Chart, Pie Chart, Donut Chart, Bubble Chart, Area Chart, Radar Chart, Mixed Chart, etc. Chart.js is a community-maintained free JavaScript library for making HTML-based charts. Print Page Previous Next Advertisements ”;

Aug 10

Chart.js – Animation

Chart.js – Animation ”; Previous Next Chart.js animations are used to animate the charts or graphs. It provides us various options to configure the animations and to set the time for how much time animation will be shown. The namespace for Animation configuration is “options.animation”. The table below gives the descriptions of various kinds of configuration options we can use with chart animation − Name Type Default Description duration number 1000 It will set the number of milliseconds an animation in the chart takes. easing string ”easeOutQuart” It is the easing function which we will use for animations. Some options are linear, easeInQuad, easeOutQuad, easeInOutBounce, etc. delay number undefined As name implies, it represents the delay before starting the animations. loop Boolean undefined If true, the animations in chart will loop endlessly. Syntax The Chart Animation syntax is given below − animations: { tension: { duration: 750, easing: ”easeInBounce”, from: 1, to: 0, loop: true } }, scales: { y: { min: 0, max: 45, } } The animation “loop” property must be true to animate. If it sets to false, then the “animation” becomes deactivated. Example Let’s take an example in which we will be using various Animation configurations − <!DOCTYPE> <html> <head> <meta charset- “UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title> chart.js</title> </head> <body> <canvas id=”toolTip” aria-label=”chart” height=”350″ width=”580″></canvas> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js”></script> <script> var chartTooltip = document.getElementById(“toolTip”).getContext(“2d”); var toolTip = new Chart(chartTooltip, { type: “line”, data: { labels: [“HTML”, “CSS”, “JAVASCRIPT”, “CHART.JS”, “JQUERY”, “BOOTSTRP”], datasets: [{ label: “online tutorial subjects”, data: [20, 40, 30, 35, 30, 20], backgroundColor: [”coral”, ”aqua”, ”pink”, ”lightgreen”, ”lightblue”, ”crimson”], borderColor: [ “black”, ], borderWidth: 1, pointRadius: 5, }], }, options: { responsive: false, animations: { tension: { duration: 750, easing: ”easeInBounce”, from: 1, to: 0, loop: true } }, scales: { y: { min: 0, max: 45, } } } }); </script> </body> </html> Output Use the “Edit and Run” option to run the code and see how the chart behaves with the applied animations. The following output chart shows the various Animations configurations − Print Page Previous Next Advertisements ”;

Aug 10

Chart.js – Pie Chart

Chart.js – Pie Chart ”; Previous Next Chart.js pie chart is another most used charts to represent the data sets. Like doughnut charts, pie charts are also divided into various segments in which the arc of each segment shows the proportional value of each piece of data. If you want to show the relational proportions between data, pie chart is also an excellent choice. The difference between doughnut and pie chart is in their value of cutout that equates to what portion of the inner should be cut out. For pie charts, the default value of cutout is 0, whereas for doughnut charts, it is 50%. Following are the namespaces to be used in pie chart for dataset properties − data.datasets[index] − It provides options for this dataset only. options.datasets.pie − It provides options for all pie datasets. options.elements.arc − It provides options for all the arc elements. Options − It provides options for the whole chart We need to use type: “pie” for creating the pie chart. Example Let’s take an example with the help of which we will create a pie chart − <!DOCTYPE> <html> <head> <meta charset- “UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>chart.js</title> </head> <body> <canvas id=”chartId” aria-label=”chart” height=”350″ width=”580″></canvas> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js”></script> <script> var chrt = document.getElementById(“chartId”).getContext(“2d”); var chartId = new Chart(chrt, { type: ”pie”, data: { labels: [“HTML”, “CSS”, “JAVASCRIPT”, “CHART.JS”, “JQUERY”, “BOOTSTRP”], datasets: [{ label: “online tutorial subjects”, data: [20, 40, 13, 35, 20, 38], backgroundColor: [”yellow”, ”aqua”, ”pink”, ”lightgreen”, ”gold”, ”lightblue”], hoverOffset: 5 }], }, options: { responsive: false, }, }); </script> </body> </html> Output It will produce the following pie chart as the output − Print Page Previous Next Advertisements ”;

Aug 10

Chart.js – Useful Resources

Chart.js – Useful Resources ”; Previous Next The following resources contain additional information on Chart.js. Please use them to get more in-depth knowledge on this. Useful Video Courses JavaScript Masterclass: ES6 Modern Development 71 Lectures 4.5 hours Frahaan Hussain More Detail JavaScript fundamentals Course for Beginners: JavaScript ES6 37 Lectures 2 hours Laurence Svekis More Detail JavaScript Training Course – Practice building 5 applications 32 Lectures 2 hours Laurence Svekis More Detail JavaScript Objects and OOP Programming with JavaScript 23 Lectures 1.5 hours Laurence Svekis More Detail JavaScript Advanced Course – Useful methods to power up your code 26 Lectures 2 hours Laurence Svekis More Detail JavaScript Course for Beginner to Expert: Data Visualization Best Seller 77 Lectures 6 hours Metla Sudha Sekhar More Detail Print Page Previous Next Advertisements ”;

Aug 10

Chart.js – Category Axis

Chart.js – Category Axis ”; Previous Next Axes are an integral part of any chart or graph. Like Cartesian axes, category axes are also an essential part of a chart. The syntax of defining category axes globally is given below − let chart = new Chart(ctx, { type: … data: { labels: [”January”, ”February”, ”March”, ”April”, ”May”, ”June”], datasets: … } }); We can define category axes as a part of axis as follows − let chart = new Chart(ctx, { type: … data: … options: { scales: { x: { type: ”category”, labels: [”January”, ”February”, ”March”, ”April”, ”May”, ”June”] } } } }); Example Let’s take an example in which we will use category axes for creating a chart − <!DOCTYPE> <html> <head> <meta charset- “UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>chart.js</title> </head> <body> <canvas id=”chartId” aria-label=”chart” height=”300″ width=”580″></canvas> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js”></script> <script> var chrt = document.getElementById(“chartId”).getContext(“2d”); var chartId = new Chart(chrt, { type: ”bar”, data: { labels: [“HTML”, “CSS”, “JAVASCRIPT”, “CHART.JS”, “JQUERY”, “BOOTSTRP”], datasets: [{ label: “online tutorial subjects”, data: [20, 40, 30, 35, 30, 20], backgroundColor: [”yellow”, ”aqua”, ”pink”, ”lightgreen”, ”lightblue”, ”gold”], borderColor: [”black”], borderWidth: 1, pointRadius: 4, }], }, options: { responsive: false, scales: { x: { min: ”CSS”, max: ”JQUERY” } } }, }); </script> </body> </html> Output Print Page Previous Next Advertisements ”;

Aug 10

Chart.js – Polar Area Chart

Chart.js – Polar Area Chart ”; Previous Next Chart.js polar area charts are like pie charts. The only difference is that in polar area charts, each segment has the same angle i.e., the radius of the segment differs according to the value. If you want to show a comparison between data but also want to show a scale of values for context, polar area chart is an excellent choice. Below are the namespaces to be used in polar area chart for dataset properties − data.datasets[index] − It provides options for this dataset only. options.datasets.polarArea − It provides options for all polarArea datasets. options.elements.arc − It provides options for all the arc elements. Options − It provides options for the whole chart We need to use type: “polar” for creating the polar area chart. Example Let’s take an example with the help of which we will create a polar area chart − <!DOCTYPE> <html> <head> <meta charset- “UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>chart.js</title> </head> <body> <canvas id=”chartId” aria-label=”chart” height=”350″ width=”580″></canvas> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js”></script> <script> var chrt = document.getElementById(“chartId”).getContext(“2d”); var chartId = new Chart(chrt, { type: ”polarArea”, data: { labels: [“HTML”, “CSS”, “JAVASCRIPT”, “CHART.JS”, “JQUERY”, “BOOTSTRP”], datasets: [{ label: “online tutorial subjects”, data: [20, 40, 15, 35, 25, 38], backgroundColor: [”yellow”, ”aqua”, ”pink”, ”lightgreen”, ”gold”, ”lightblue”], }], }, options: { responsive: false, }, }); </script> </body> </html> Output Print Page Previous Next Advertisements ”;