ZingChart: Getting Started with Angular 5

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 lets get started by creating a new project.

In the CLI type ng new zingchart-app

This will create an 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 serve --open

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

First, take a look at the app.component.ts file inside the src/app folders 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" type="text/javascript"></script>

Now lets set up the app.component.html file to be set up to display this information! Replace the code in app.component.html with:

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

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

Lets 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!

Lets 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 the word 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}}">. We are going to add the chart id into the JSON so that it will target the correct div.

Now in chart.component.ts lets use our new class to and define our properties using our chart JSON. I will use a simple chart to get us started. This code should be placed inside your class export OnInit:

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 lets render the chart using our render method: <code>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!