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

Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

10 jQuery Fun and Games PluginsMar 08, 2025 am 12:42 AM

10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game

How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

jQuery Parallax Tutorial - Animated Header BackgroundMar 08, 2025 am 12:39 AM

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the

How do I optimize JavaScript code for performance in the browser?Mar 18, 2025 pm 03:14 PM

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

Getting Started With Matter.js: IntroductionMar 08, 2025 am 12:53 AM

Matter.js is a 2D rigid body physics engine written in JavaScript. This library can help you easily simulate 2D physics in your browser. It provides many features, such as the ability to create rigid bodies and assign physical properties such as mass, area, or density. You can also simulate different types of collisions and forces, such as gravity friction. Matter.js supports all mainstream browsers. Additionally, it is suitable for mobile devices as it detects touches and is responsive. All of these features make it worth your time to learn how to use the engine, as this makes it easy to create a physics-based 2D game or simulation. In this tutorial, I will cover the basics of this library, including its installation and usage, and provide a

Auto Refresh Div Content Using jQuery and AJAXMar 08, 2025 am 12:58 AM

This article demonstrates how to automatically refresh a div's content every 5 seconds using jQuery and AJAX. The example fetches and displays the latest blog posts from an RSS feed, along with the last refresh timestamp. A loading image is optiona

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

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

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

R.E.P.O. Best Graphic Settings

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

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

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

Where to find the Crane Control Keycard in Atomfall

1 weeks agoByDDD

Hot Tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

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

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Hot Topics

Where is the login entrance for gmail email?

7416

CakePHP Tutorial

1359

What is the format of the account name of steam

win11 activation key permanent

Key Takeaways

Angular 2 vs Angular 1.x

Setup

Creating the Chart Component

Creating the Chart

Adding Annotations

Toggling Between Datasets

Structuring the data.

Updating Chart Data on Toggle

Demo

Conclusion and Next Steps

Frequently Asked Questions about Chart Component in Angular2 FusionCharts

How do I install FusionCharts in Angular2?

Can I use FusionCharts with Angular CLI?

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

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

How do I update the data in my FusionCharts chart?

Can I use FusionCharts in Angular2 with TypeScript?

How do I handle events in FusionCharts in Angular2?

Can I customize the appearance of my FusionCharts chart?

How do I export my FusionCharts chart?

How do I debug issues with my FusionCharts chart?

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Hot Article

Hot Tools

MinGW - Minimalist GNU for Windows

ZendStudio 13.5.1 Mac

VSCode Windows 64-bit Download

DVWA

mPDF

Hot Topics