chartjs Archives - Donotsad where can learn any thing work project and make money

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 – 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 ”;

Aug 10

Chart.js – Cartesian Axis

Chart.js – Cartesian Axis ”; Previous Next For any chart or graph, axes are an integral part. Basically, axes are used to determine how our data maps to a pixel value on the chart. A cartesian chart uses 1 or more X-axis and 1 or more Y-axis to map the data points on to two-dimensional (2-D) canvas. These axes are called cartesian axes. Cartesian axis uses “options.scales.axis” namespace. The syntax of using cartesian axes is given below − scales: { x: { grid: { color: ”orange”, borderColor: ”orange”, } } } Example Let’s take an example in which we will use Cartesian 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> <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: [”coral”, ”aqua”, ”pink”, ”lightgreen”, ”lightblue”, ”crimson”], borderColor: [”black”], borderWidth: 1, pointRadius: 4, }], }, options: { responsive: false, indexAxis: ”y”, scales: { x: { grid: { color: ”orange”, borderColor: ”orange”, } } } }, }); </script> </body> </html> Output Print Page Previous Next Advertisements ”;

Aug 10

Chart.js – Scatter Chart

Chart.js – Scatter Chart ”; Previous Next Chart.js scatter charts are basically based on simple line charts but their X-axis is changed to a linear axis. While creating a scatter chart, you must pass the data as objects containing X and Y properties. Following are the namespaces to be used in bubble chart for dataset properties − data.datasets[index] − It provides options for this dataset only. options.datasets.scatter − It provides options for all scatter datasets. options.datasets.line − It provides options for all line 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: “scatter” for creating the scatter chart. Example Let’s take an example with the help of which we will create a scatter 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: [{ 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, }], }, options: { responsive: false, scales: { x: { type: ”linear”, position: ”bottom,” } } }, }); </script> </body> </html> Output Print Page Previous Next Advertisements ”;