angular-fusioncharts

Introducing Angular-FusionCharts directive.

What?

Yes, you got that right. You can now create beautiful charts in AngularJS using our new directive. You can make use of all the stunning charts that we offer without dealing with core JavaScript. If you haven’t got it already, go ahead and download it for free from here.

Why did we do this?

This one is easy. Everybody in the world, including us of course, loves Angular. Even Google Trends suggests that. See how that blue graph keeps going up?

So when developers, like you, came to us and asked for a solution, we decided to to build it. That’s how Angular-FusionCharts directive was born.

Now that you know why we built it,  let’s learn how to use it.

Downloading the Angular-FusionCharts directive

You can download the Angular-FusionCharts directive by clicking here, or by visiting this page.

Installing the Angular-FusionCharts directive

Once you have downloaded the directive, installation is a simple four-step process:

Step 1: Include library files

In your HTML, include the fusioncharts.js and the angular-fusioncharts.js files. The angular-fusioncharts.js file must be included after all other scripts.

Step 2: Include directive in your module

In the app, include the ng-fusioncharts directive as a dependency. If you are looking for where to add the dependency, look for the call to angular.module in your code.

Step 3: Add the fusioncharts directive

In your HTML, define a <div>  element with fusioncharts  directive where you want to add the chart.

In the snippet above, it is assumed that the chart has to be added inside a controller called MyController .

Step 4: Populate the required variables in the controller

In the above code snippet, the directive is bound to the datasource scope variable. The variable, however, has not been initialized yet.

In your controller, set the datasource using the FusionCharts JSON format. (Check this tutorial for a general introduction to this format.)

With the scope variable successfully initialized, this is how the result looks:


FusionCharts uses the JSON and XML data formats for writing chart data. As mentioned earlier, the chart data in the controller above is using the JSON data format. Every chart has a set of attributes and a predefined data structure, in both formats. To know about the attributes and data structure of a column 2D chart in JSON, click here. To know about the same representation of a column 2D chart in XML, click here.

In the above example, the fusioncharts directive is used as an attribute of the <div>  element. Alternatively,  the fusioncharts directive can be used as a tag. This is how the HTML code will then change:

The complete guide to this directive can be found here.

That’s all you need to know to start using our Angular-FusionCharts directive. We would love if you can give our directive a try. And if you are stuck anywhere drop us a line at support@fusioncharts.com. Happy to help!

Most business applications have some kind of dashboard that gives a top-level view of various functions, but there is a problem with these dashboards. We think we have built something that can solve it.

 

Demo and Source Code

 

Read the rest of this entry »

Grid-style layouts came into the spotlight when Pinterest grew popular. They became a hot favorite in the UX community for displaying photography portfolios, thumbnails of products on ecommerce sites, and article snippets on blogs. While they are primarily used to display text and image content, there’s a fair share of products that have adopted these plugins to build data-driven dashboards. Here are two examples – Geckoboard, and Freeboard – which use the grid-style or modular layout:

geckoboard

freeboard

Read the rest of this entry »

Are you new to JavaScript?

JavaScript is a prototype-based scripting language with dynamic typing and has first-class functions. This mix of features makes it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It can be used to enhance the dynamics and interactive features of your web page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more. However, it  is considered to be the world’s most misunderstood programming language.

To help you with learning JS, we asked 15 experts to share their tips on the art of JavaScript programming: Read the rest of this entry »

Every day, more than two billion people in more than 190 countries use products made by Unilever. With long-established brand names like Dove, Sunlight and Pond’s in its kitty, Unilever’s range of consumer products and brands is as diverse as its worldwide consumer base.

Unilever logo

In 2010, the company set itself the target of doubling its revenues in a decade or less – without doubling its costs. According to Greg Swimer, Vice President for Business Intelligence at Unilever, information management was to play a crucial role in achieving this goal. To help its employees make better decisions, the company sought to embed data into its business processes and make effective use of data visualization and analytics.
Read the rest of this entry »

In 2010 when Greenpeace posted a viral video highlighting Nestlé’s use of palm oil produced from unsustainable practices which destroy the major habitats of orangutans, it did what any brand in panic mode do. It forcefully tried removing the video. A severe back lash and protests from all social media communities followed. Nestlé had learnt its most important social media lesson, although the difficult way―open engagement is critical when it comes to social media.

It embraced a new social media strategy based on principles of open engagement and developed a new framework using data and insights gained from social media activities on various platforms. The insights garnered from this framework were to guide Nestlé in all its future campaigns and help build its reputation.

Nestle Digital Acceleration Team

Under the leadership of Pete Blackshaw, Global Head, Digital Marketing and Social Media, Nestlé created the Digital Acceleration Team (DAT), a digital leadership training program for digital marketing projects at Nestlé. The 12 members of each class are available to work on short-term projects that Nestlé units apply for. Then they return to their units, bringing with them what Blackshaw calls “digital vitamins” — a supplemental expertise that can be used to assist digital transformation in the graduate’s home unit. Read the rest of this entry »