비스포크1도어

Create charts in Angular JS in 5 mins with FusionCharts

페이지 정보

작성자 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.

AngularJS (version 1.x), when launched by Google a few years back, was a compelling JavaScript library. However, the library faced an unexpected developer attrition, when Facebook launched the ReactJS library. To prevent it from becoming obsolete, the complete architecture was reworked. The framework was converted from a Model-View-Whatever architecture to a component-based architecture. To mark the redesign of the architecture, the framework was called Angular (for version 2 and above).

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.

To create charts with Angular, we will use the FusionCharts Javascript charting library. Luckily for us, Fusioncharts has a component for Angular which allows developers to integrate the charting library with Angular.

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.

댓글목록

등록된 댓글이 없습니다.

Total 2,306건 1 페이지
게시물 검색
Copyright © www.dhcore.kr. All rights reserved.  Contact : help@oxmail.xyz