Angular 5 and Zingchart Demo

Here is a quick and easy guide to get up and running with Angular 5 and ZingChart!

If you are unfamiliar with Angular, I would start here at their documentation: https://angular.io/tutorial/toh-pt0

Assuming you have Angular 5 installed, let's get started by creating a new project.

In the CLI, type ng new zingchart-app

This will create a new angular project for us to modify. If you would like to see what we have so far, change directories into zingchart-app and in the CLI, type ng server --open

Now your project will be hosted on http://localhost:4200/

First, take a look at the app.component.ts file and change the selector and title accordingly:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Zingchart and Angular';
}

You will notice that index.html will call the selector <app-root></app-root>. In the head, be sure to call the ZingChart library.

<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>

Now let's set up the app.component.html file to be set up to display this information!

<h1>{{title}}</h1>

You can see our title being displayed on our page now.

Let's move on to creating our chart component so we can display ZingChart! Type in the CLI: ng generate component chart

Now we have a new component to use in Angular!

Let's do a quick test to make sure everything is hooked up properly. In chart.component.ts, in the export function, add chart = "test" and in chart.component.html replace the text with {{chart}}.

Now in your app.component.html, add <app-chart></app-chart> under your title. This is based on the selector in chart.component.ts. You should see test under your title in your page now.

For ZingChart to display, we need to hook up the JSON configuration to a div with a target id. So in our chart.component.html, replace the text with <div id="{{chart.id}}"></div>. We are going to add the chart id into the JSON so that it will target the correct div.

Now in chart.component.ts, let's use our new class to and define our properties using our chart JSON. I will use a simple chart to get us started:

  chart: Chart = {
    id:"chart-1",
    data: {
      type: 'bar',
      series: [
        {
          values: [1, 2, 3]
        }
      ]
    },
    height:400,
    width:400
  };

Our last step would be to call a render function so that the chart is rendered on the page! We are going to use the angular method ngAfterViewInit, which is called after a component's view is fully initialized.

In our chart.component.ts page, add the function ngAfterViewInit () {}. Inside the function, let's render the chart using our render method: zingchart.render(this.chart). We use this.chart because we are inside the scope of the chart.

Now the chart should display on your page! But ZingChart is much more than just displaying the chart. We need to add functionality to get the most out of our charts. This means we need to get methods and events to work. Luckily, in Angular5 this is a piece of cake.

Inside the ngAfterViewInit () {} function and under the render, you can add the methods and events. Here is our chart.component.ts that has an example using a method and event with Angular5:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})

export class ChartComponent implements OnInit {
  chart: Chart = {
    id:"chart-1",
    data: {
      type: 'bar',
      series: [
        {
          values: [1, 2, 3]
        }
      ]
    },
    height:400,
    width:400
  };
  constructor() { }
  ngAfterViewInit () {
    zingchart.render(this.chart)
    setTimeout(function(){ 
      zingchart.exec('chart-1', 'setseriesvalues', {
        plotindex : 0,
        values : [2,2,2]
    });
    }, 3000);
    zingchart.click = function(p) {
      alert("You clicked on the chart!");
    }
  }
  ngOnInit() {
  }
}

Now we have a fully functional ZingChart chart working in Angular5. Awesome!