Building a Chart Component with Angular 2 and FusionCharts-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Building a Chart Component with Angular 2 and FusionCharts

Joseph Gordon-Levitt

Feb 17, 2025 pm 12:51 PM

Building a Chart Component with Angular 2 and FusionCharts

Key Takeaways

Utilize Angular 2 for building chart components, leveraging its improvements over Angular 1.x, including enhanced language support and DOM management.
Integrate FusionCharts with Angular 2 for creating visually appealing charts, despite the lack of a dedicated Angular 2 plugin, by coding directly with JavaScript.
Develop a dynamic chart component capable of toggling between datasets (e.g., 2014 and 2015 revenue stats for major tech companies), enhancing interactivity and user engagement.
Employ FusionCharts’ annotations feature to customize charts, such as adding company logos to chart axes, which provides a tailored visual experience.
Explore further functionalities and integration possibilities with Angular 2 and FusionCharts, encouraging readers to expand on the basic chart component with more complex configurations and chart types.

This article was peer reviewed by Vildan Softic. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

As a web developer, if there is something that you can’t miss, it is Angular 2. It is a complete rewrite of the popular JavaScript framework from Google and is constantly in news for all the right reasons. It offers some major improvements over the previous versions and that’s why we’re choosing it today to build some beautiful charts.

For the charts, we will use the JavaScript chart library provided by FusionCharts. It offers a good collection of charts and is compatible with all major browsers. Although FusionCharts offers a dedicated plugin for Angular, it is not yet compatible with Angular 2. So I am not going to use it and instead code directly using JavaScript and Angular 2. (Note: it is recommended you use the plugin if you are using Angular 1 in your app).

The chart we are going to plot will depict an interesting statistic—the revenue of five top tech companies (Amazon, Apple, Facebook, Google and Microsoft) and will have an option to switch between revenue data for 2014 and 2015. We will first go through the step-by-step process of creating charts in Angular 2. After building a basic chart, we will cover some advanced topics such as adding annotations and updating chart data.

As ever, you can download the code for this tutorial from our GitHub repo, or you can jump to a demo of the finished chart at the end of the article.

Angular 2 vs Angular 1.x

Angular 2 has some significant changes over its previous major version (Angular 1.x), for example its support for languages such as TypeScript and Dart, and the way it computes updates to the DOM. If you’d like to learn more about how Angular 1 concepts and techniques map to Angular 2, you can check out the official quick reference. If you are interested in migrating your app from Angular 1.x to Angular 2, you can read the official migration guide.

Although Angular 2 supports TypeScript and Dart, we will use native JavaScript to write the Angular 2 application in this tutorial because of its familiarity. Using TypeScript or Dart would also introduce an unnecessary build step.

Setup

There are number of ways to get up and running with an Angular 2 project. The easiest is probably to head over to the official site and follow their 5 Min Quickstart tutorial.

One slight caveat to this approach however, is that it relies on you having Node and npm installed on your machine. We do have a guide for this, but if you’d prefer to follow this tutorial without installing these, you can use the following template:

<span><span>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
    <span><!-- 2. Load Angular 2 specific libraries -->
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span>

Creating the Chart Component

Components are the building blocks of any Angular 2 application. They are reusable pieces of code consisting of a view, and some logic. If you’re familiar with Angular 1, you can think of them as directives with a template and a controller.

Here’s the basis of our chart component:

<span>(function(chartApp){
</span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>    <span>selector: 'angular-chart',
</span>    <span>template: '<div>Chart will render here</div>'
</span>  <span>}).<span>Class</span>({
</span>    <span>constructor: function(){}
</span>  <span>});
</span>
  <span>document.addEventListener('DOMContentLoaded', function() {
</span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span>  <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>

Let’s take a second to see what’s going on.

We start with an IIFE (immediately invoked function expression) which we use to namespace our app. We pass it window.chartApp as an argument, which is initialized to an empty object if it isn’t defined. This is where our application is going to live—in a single property on the global object.

Inside the IIFE we create our component (AppComponent) by chaining the Component and Class methods from ng.core (a collection of Angular’s core components). We’re passing the Component method a configuration object containing the following propeties:

selector: a simple CSS selector which specifies a host HTML element. Angular will create and display an instance of the component whenever it encounters a HTML element matching this selector.
template: the template to be used when the component is rendered. Currently we’re passing a string containing a placeholder
element, but ideally we should move this out into its own template.
The Class method is where we add behavior and event bindings for the template.

Having defined our basic component, we initialize it using Angular’s browser bootstrap function.

You should be able to run the code in your browser at this point and see the message “Chart will render here”.

Creating the Chart

Let’s move on to creating the chart and displaying some data for 2014.

To do this we need to use the FusionCharts constructor function to which we pass an object containing all configuration parameters for the chart instance:
- type: the type of chart we wish to create
- renderAt: the DOM selector into which our chart will be rendered
- width and height: the chart dimensions
- id: the ID of the generated chart
- dataFormat: the format of data passed to the dataSource option
- dataSource: the configuration for the actual chart, as well as the data it should display
```

 lang="en">
 >
 <meta> charset="UTF-8">
 <title>></title>Angular 2 FusionCharts Demo>

 
 <link> rel="stylesheet" href="styles.css">
 <link> href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>

 
 <script> src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script>>>
 <script> src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script>>>
 <script> src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script>>>

 
 <script> src="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script>>>

 
 <script> src='main.js'</script>>>
 >
 >

 
 <angular-chart>></angular-chart>Loading...>
 >
>

```
Here’s the complete configuration file.

If you are unsure as to what any of the chart options actually do, or if you would like to find out how else the appearance of the chart can be configured, you can refer to the Chart Attributes page in the FusionCharts documentation.

The other thing we have to do is update our template to include the container our chart should render into. You can either do this by specifying a string to the Component’s template property (as we did previously), or by moving the template into its own file and referencing it using templateUrl.
```
(function(chartApp){
 chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 template: '<div>Chart will render here</div>'
 }).Class({
 constructor: function(){}
 });

 document.addEventListener('DOMContentLoaded', function() {
 ng.platform.browser.bootstrap(chartApp.AppComponent);
 });
})(window.chartApp || (window.chartApp = {}));

```
Either way, this is what our template should look like.
```
new FusionCharts({
 "type": "column2d",
 "renderAt": "chart-container",
 "width": "550",
 "height": "400",
 "id": "revenue-chart",
 "dataFormat": "json",
 "dataSource": {
 "chart": {
 "yAxisName": "Revenue (In USD Billion)",
 "yAxisMaxValue": "200",
 ...
 },
 "data": [{
 "label": "Amazon",
 "value": "88.99"
 }, {
 "label": "Apple",
 "value": "182.8"
 }
 ...
 ]
 }
});

```
Here’s a demo of what we have so far:
Loading plunk…
You can view the code for this demo on Plunker.

If you click through to the demo on Plunker, in the file main.js you might notice that we have separated the FusionCharts configuration data into its own file, which we are then fetching using Angular’s HTTP class. This is for the sake of clarity (it makes the Angular-specific code easier to follow) and also because making a request for the data is what you’d typically do in a real life scenario.

However, this is not absolutely necessary, and you’d get the same result by doing everything directly in the chartApp constructor:
```
chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 templateUrl: 'chart.html'
}).Class({
 ...
});

```
The only other thing to mention is that the initialization code is wrapped within the FusionCharts.ready method. This safeguards your chart instantiation code from being called before the FusionCharts library is loaded.

With the basic chart ready, it is time to add more functionality, such as using company logos instead of names and updating the chart with new data for the year 2015.

Adding Annotations

For adding company logos to the x-axis, we will use one of FusionCharts’ powerful features—annotations. Annotations on a FusionCharts object allow you to draw custom shapes or images at designated positions on the chart.

Suppose you want to add your company logo at the center of chart. You can do it using annotations and macros. Macros will give you the coordinates of the center of the chart and annotation will let you add an image at that location.

Things get interesting when you use dynamic annotations to, for example, get information on positions which are dependent on the chart’s data. Imagine you want to draw something exactly where the column ends. You can use the dynamic annotation macro $dataset.0.set.1.endX and $dataset.0.set.1.endY to determine the x and y coordinates of the column end point, then draw something over there. You can learn more about annotations and how to use them on this FusionCharts documentation page.

For our chart, we will use dynamic annotation macros to get each column’s starting and ending coordinates, which is where we will then draw the respective company logos. We will also disable default x-axis labels using the chart attribute "showLabels": "0".

To achieve the above goals, add the following code to the chart’s configuration:
```

 lang="en">
 >
 <meta> charset="UTF-8">
 <title>></title>Angular 2 FusionCharts Demo>

 
 <link> rel="stylesheet" href="styles.css">
 <link> href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>

 
 <script> src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script>>>
 <script> src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script>>>
 <script> src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script>>>

 
 <script> src="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script>>>

 
 <script> src='main.js'</script>>>
 >
 >

 
 <angular-chart>></angular-chart>Loading...>
 >
>

```
In the above code:
- type is setting the type of annotation.
- url is setting the address of the image.
- x and y are setting the starting x and y-coordinates of the images.
After adding the above code you should see company logos rendered on the x-axis. To learn more about using annotations and what else is possible, please refer to the documentation page (mentioned above).

Toggling Between Datasets

The final thing we want to implement is to allow the user to toggle between years, seeing a different dataset depending on the year selected (2014 or 2015).

Structuring the data.

We therefore need to consider how to structure our data in a way that we can define different datasets for the different years. As mentioned previously, FusionCharts is expecting the configuration options to contain a data property, which should be an array containing sets of label/value pairs.
```
(function(chartApp){
 chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 template: '<div>Chart will render here</div>'
 }).Class({
 constructor: function(){}
 });

 document.addEventListener('DOMContentLoaded', function() {
 ng.platform.browser.bootstrap(chartApp.AppComponent);
 });
})(window.chartApp || (window.chartApp = {}));

```
One way of handling multiple datasets would be to define a dataSet object at the top of our constructor function and attach it to the constructor using an alias.
```
new FusionCharts({
 "type": "column2d",
 "renderAt": "chart-container",
 "width": "550",
 "height": "400",
 "id": "revenue-chart",
 "dataFormat": "json",
 "dataSource": {
 "chart": {
 "yAxisName": "Revenue (In USD Billion)",
 "yAxisMaxValue": "200",
 ...
 },
 "data": [{
 "label": "Amazon",
 "value": "88.99"
 }, {
 "label": "Apple",
 "value": "182.8"
 }
 ...
 ]
 }
});

```
Then, in the configuration options we pass to the FusionCharts constructor, we can do:
```
chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 templateUrl: 'chart.html'
}).Class({
 ...
});

```
Updating Chart Data on Toggle

We also want the chart to be updated with the data for 2015 once somebody clicks the 2015 button and toggle back to showing the data for 2014, when the 2014 button is clicked.

Let’s add the two buttons, which will be used to perform this action and give them some styling. Amend the component template as follows:
```
<div> class="container">
 <h1 id="gt">></h1>Revenue of Top Tech Companies (2014)>
 <div> id ="chart-container">
</div>>

</div>>

```
Notice the new syntax for adding an event listener and adding the ngClass directive in Angular 2. They are almost the same as Angular 1, barring some braces and parentheses.

I’ve added an ngClass directive to highlight the current selected year by applying a selected CSS class to button element. This is based on the selectedYear property on the component which gets updated on the click of buttons.

We can set the current selected year to 2014 when the component renders by adding the following line to the top of the constructor:
```

 lang="en">
 >
 <meta> charset="UTF-8">
 <title>></title>Angular 2 FusionCharts Demo>

 
 <link> rel="stylesheet" href="styles.css">
 <link> href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>

 
 <script> src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script>>>
 <script> src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script>>>
 <script> src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script>>>

 
 <script> src="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script>>>

 
 <script> src='main.js'</script>>>
 >
 >

 
 <angular-chart>></angular-chart>Loading...>
 >
>

```
The logic to handle the button clicks will be added to a new yearChange function.
```
(function(chartApp){
 chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 template: '<div>Chart will render here</div>'
 }).Class({
 constructor: function(){}
 });

 document.addEventListener('DOMContentLoaded', function() {
 ng.platform.browser.bootstrap(chartApp.AppComponent);
 });
})(window.chartApp || (window.chartApp = {}));

```
For this we’re going to use FusionChart’s setChartData method which requires both chart configuration options and the actual chart data. Instead of storing the chart attributes first and then referencing them, we will get the chart attributes from the chart that is already rendered, using the getChartData method and modify that data with year specific data.
```
new FusionCharts({
 "type": "column2d",
 "renderAt": "chart-container",
 "width": "550",
 "height": "400",
 "id": "revenue-chart",
 "dataFormat": "json",
 "dataSource": {
 "chart": {
 "yAxisName": "Revenue (In USD Billion)",
 "yAxisMaxValue": "200",
 ...
 },
 "data": [{
 "label": "Amazon",
 "value": "88.99"
 }, {
 "label": "Apple",
 "value": "182.8"
 }
 ...
 ]
 }
});

```
After adding the HTML for buttons and the above click handler for those buttons, clicking on those buttons should load that year’s data for the chart.

Demo

And here’s the final demo.
Loading plunk…
You can view the code for this demo on Plunker. Or you can download the code from our GitHub repo.

If you click through to the Plunker, you’ll see that we have defined the dataSet property in the config.json file directly. This keeps things much tidier in our component.

Conclusion and Next Steps

We started by building a simple Angular chart, and then went on to add more functionality to it using annotations and other FusionCharts’ APIs. But this is just the tip of the iceberg and a lot more can be done using both Angular 2 and FusionCharts. Some things that you can explore on your own:
- Include more charts: A column chart is not always the best way to represent a dataset. Depending on your use case you might want to use different charts like waterfall, radar, gauge etc. So try using the process explained in this tutorial to plot a different chart and see if you are able to do it successfully.
- Include charts in your app: If you are into making hybrid mobile apps, then you must be aware that Ionic 2(latest version of Ionic) is based on Angular 2. And that’s a good news because you can use this tutorial as a base to create charts for your Ionic apps as well.
- Explore more events: In this tutorial, I explained how to use setChartData method, but there are plenty more events and methods that you can use to enhance your app’s user experience. Check out the above linked pages to learn more about the various events and methods offered by FusionCharts.
If you face any difficulty while trying to make charts on your own, please refer to documentation of Angular or FusionCharts (depending on the issue), or just leave a comment below. I will be more than happy to help!

Frequently Asked Questions about Chart Component in Angular2 FusionCharts

How do I install FusionCharts in Angular2?

To install FusionCharts in Angular2, you need to first install FusionCharts and Angular FusionCharts via npm. Use the following commands in your terminal:
npm install fusioncharts
npm install angular-fusioncharts
After installation, import FusionCharts and Angular FusionCharts into your component file. Then, add FusionChartsModule to your NgModule imports array.

Can I use FusionCharts with Angular CLI?

Yes, FusionCharts is compatible with Angular CLI. After installing FusionCharts and Angular FusionCharts via npm, you can import them into your Angular CLI project. Remember to add FusionChartsModule to your NgModule imports array.

How do I create a basic chart using FusionCharts in Angular2?

To create a basic chart, you need to first define the chart configuration in your component. This includes the chart type, data source, and other options. Then, use the FusionCharts component in your template to render the chart. You can customize the chart by modifying the chart configuration.

What types of charts can I create with FusionCharts in Angular2?

FusionCharts supports a wide variety of chart types, including line, bar, pie, area, doughnut, and more. You can also create advanced charts like combination charts, zoomline charts, and treemaps. Each chart type has its own configuration options, which you can customize to suit your needs.

How do I update the data in my FusionCharts chart?

To update the data in your chart, you need to modify the data source in your chart configuration. FusionCharts will automatically update the chart when the data source changes. You can also use the setJSONData or setChartData methods to update the data programmatically.

Can I use FusionCharts in Angular2 with TypeScript?

Yes, FusionCharts is compatible with TypeScript. You can import FusionCharts and Angular FusionCharts into your TypeScript file and use them as you would in a regular JavaScript file.

How do I handle events in FusionCharts in Angular2?

FusionCharts provides a number of events that you can listen to, such as dataPlotClick, chartClick, and beforeRender. To handle these events, you need to define an event handler in your component and bind it to the FusionCharts component in your template.

Can I customize the appearance of my FusionCharts chart?

Yes, FusionCharts provides a wide range of customization options. You can customize the colors, fonts, borders, backgrounds, and more. These options can be set in the chart configuration.

How do I export my FusionCharts chart?

FusionCharts provides built-in export functionality. You can export your chart as an image, PDF, or SVG. To enable export, you need to set the exportEnabled option to true in your chart configuration.

How do I debug issues with my FusionCharts chart?

FusionCharts provides a debug mode that logs detailed information about the chart rendering process. To enable debug mode, set the debugMode option to true in your chart configuration. You can then view the logs in your browser’s console.

The above is the detailed content of Building a Chart Component with Angular 2 and FusionCharts. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AM

The power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.

The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AM

Introduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr

Node.js Streams with TypeScriptApr 30, 2025 am 08:22 AM

Node.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe

Python vs. JavaScript: Performance and Efficiency ConsiderationsApr 30, 2025 am 12:08 AM

The differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.

The Origins of JavaScript: Exploring Its Implementation LanguageApr 29, 2025 am 12:51 AM

JavaScript originated in 1995 and was created by Brandon Ike, and realized the language into C. 1.C language provides high performance and system-level programming capabilities for JavaScript. 2. JavaScript's memory management and performance optimization rely on C language. 3. The cross-platform feature of C language helps JavaScript run efficiently on different operating systems.

Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks agoByDDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks agoByDDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Roblox: Dead Rails - How To Tame Wolves

3 weeks agoByDDD

Blue Prince: How To Get To The Basement

3 weeks agoByDDD

Hot Tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software