How we can create a responsive pie and column chart using JS or any JS library? Solution: See this Pie and Column Chart Using Canvas JS, With Responsive Layout.
Previously I have shared Bar Graph program, but this is a pie and column combination chart with a JS library. Basically, A chart is a graphical representation of data, in which the data is represented by symbols, such as bars, lines, or slices, etc. And the chart is the best way to present or visualize data. We use charts or graphs mostly in the backend site, also sometimes use them in front to show data to users.
Today you will learn to create a responsive chart using a JS library. Basically, there are two types of charts, one is the pie chart and one verticle bar or column chart. Both charts have the same values, the pie chart show data in percentage values and the column chart shows in points. The pie chart contains slices with different sizes which defines the value of data, also you can see actually value on hover.
So, Today I am sharing Pie and Column Chart Using Canvas JS. There I have used a JS library named Canvas JS which is premium you have to buy a license to use it professionally. But this a demo how we can create charts easily, that’s why the program has a watermark of the library. You can use this library free in development and educational purpose.
If you are thinking now how these two charts actually are, then see the preview given below.
Preview Of Responsive Charts
See this video preview to getting an idea of how this chart/graph program looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
Pie and Column Chart Using Canvas JS Source Code
Before sharing source code, let’s talk about it. First I have created the layout using Bootstrap‘s responsive grid system. Then I have created two sections: one for the pie chart and one for the column chart. Both divs have a unique ID name to identify and also I have linked other files like CSS, JS, and the Canvas JS CDN link in the HTML file.
Now using CSS I gave only a margin and width-height of these two elements. The layout based on Bootstrap that’s why there is very fewer CSS codes. As you know this program is based on a library, In the JS file I gave the values, labels, and color to the charts. There are prebuilt functions to creating a chart, you have to put data values.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Pie & Column Chart | Webdevtrick.com</title> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div id="pieChart"> </div> </div> <div class="col-md-6"> <div id="columnChart"> </div> </div> </div> </div> <script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ .container-fluid { margin-top: 10%; } #pieChart { height: 360px; width: 100%; } #columnChart { height: 360px; width: 100%; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
// Code By Webdevtrick ( https://webdevtrick.com ) var pieChartValues = [{ y: 39.16, exploded: true, indexLabel: "JavaScript", color: "#00badd" }, { y: 21.8, indexLabel: "CSS", color: "#e60023" }, { y: 21.45, indexLabel: "HTML", color: "#4267b2" }, { y: 5.56, indexLabel: "Bootstrap", color: "#ef4d5d" }, { y: 5.38, indexLabel: "PHP", color: "#5cb85c" }, { y: 3.73, indexLabel: "jQuery", color: "#fd9d08" }, { y: 2.92, indexLabel: "AJAX", color: "#9dcb07" }]; renderPieChart(pieChartValues); function renderPieChart(values) { var chart = new CanvasJS.Chart("pieChart", { backgroundColor: "white", colorSet: "colorSet2", title: { text: "Pie Chart", fontFamily: "Verdana", fontSize: 25, fontWeight: "normal", }, animationEnabled: true, data: [{ indexLabelFontSize: 15, indexLabelFontFamily: "Monospace", indexLabelFontColor: "darkgrey", indexLabelLineColor: "darkgrey", indexLabelPlacement: "outside", type: "pie", showInLegend: false, toolTipContent: "<strong>#percent%</strong>", dataPoints: values }] }); chart.render(); } var columnChartValues = [{ y: 686.04, label: "JavaScript", color: "#00badd" }, { y: 381.84, label: "CSS", color: "#e60023" }, { y: 375.76, label: "HTML", color: " #4267b2" }, { y: 97.48, label: "Bootstrap", color: "#ef4d5d" }, { y: 94.2, label: "PHP", color: "#5cb85c" }, { y: 65.28, label: "jQuery", color: "#fd9d08" }, { y: 51.2, label: "AJAX", color: "#9dcb07" }]; renderColumnChart(columnChartValues); function renderColumnChart(values) { var chart = new CanvasJS.Chart("columnChart", { backgroundColor: "white", colorSet: "colorSet3", title: { text: "Column Chart", fontFamily: "Verdana", fontSize: 25, fontWeight: "normal", }, animationEnabled: true, legend: { verticalAlign: "bottom", horizontalAlign: "center" }, theme: "theme2", data: [ { indexLabelFontSize: 15, indexLabelFontFamily: "Monospace", indexLabelFontColor: "darkgrey", indexLabelLineColor: "darkgrey", indexLabelPlacement: "outside", type: "column", showInLegend: false, legendMarkerColor: "grey", dataPoints: values } ] }); chart.render(); } |
That’s It. Now you have successfully created Pie and Column Chart Using Canvas JS, With Responsive Layout. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
