페이지 정보작성자 Jonathan P 작성일18-10-04 00:00 조회16회 댓글0건
Embed FusionCharts in your Angular 1.x Application with our AngularJS Directive which comes with native support for Data Binding.Check it out: https://www.fusioncharts.com/explore/integrations/front-end-integrations/angular-js
Hey guys, welcome to this episode. Today we will talk about creating charts in Angular. By the end of this video, you should be able to create your first chart in just a few minutes.
As part of its architecture redesign, Angular was made modular. This feature allows you to install individual modules, thereby also allowing you to skip unnecessary modules. However, Angular insists on using TypeScript as a way to ensure type safety in the app.
For the chart, we will visualize the number of foreign tourists visiting India each year based on the data available from Mendeley data.
To create the chart we will cover four major parts:
Preparing the dataset
The FusionCharts library currently accepts data in JSON and XML only. As such, we need to convert data in a format accepted by the library. For this Angular chart example, we will use JSON. So data in any other format will have to be converted into either of these formats.
Installing the FusionCharts-Angular2 extension
To get started, you need to install the FusionCharts-Angular2 Component using npm.
Creating the chart component in Angular
The component adds the "fusioncharts" directive in the Angular app. The detailed chart configurations along with the data in JSON format is added to the component.
Rendering the chart
Now with all the code in place, all we need to do is make a call to the "my-app" component that we created in Angular.
While this was quick in itself, the folks at FusionCharts want to make this process even faster. Which is why they have the entire code available on the FusionCharts Playground. All you need to do is copy and paste the code and you can be up and running in a few minutes.
등록된 댓글이 없습니다.