DEV Community: ZingChart

Creating Charts in Angular

Mike — Thu, 06 Feb 2020 18:14:09 +0000

We at ZingChart have been hard at work, creating a TypeScript Definition File and Angular component for our library!

ZingChart — The last data visualization library you’ll need

ZingChart is one of the original JavaScript charting libraries, and continues to innovate and improve on its feature set. With over 35 different chart types, a rich API of methods/events to integrate with, and a dedicated support team, ZingChart provides an all-in-one solution for your data visualization needs.

ZingChart has over 35 different base chart types and hundreds of configurations

Typescript Definition File

We have created a TypeScript definition file for the ZingChart library! All of the typings for our JSON configuration are now readily available, with descriptions for each attribute. This allows our developers who use TypeScript in their applications to validate their chart configurations with ease. This works well with IDEs such as Visual Studio Code that support type-ahead with descriptions. It is automatically included in our zingchart-angular component.

Getting started with Angular

If you don’t have an Angular Application, you can easily set one up with the angular-cli

$ ng new my-app

First we add the package to our Angular Application via NPM:

$ npm i zingchart-angular

We then add our chart module to our App's module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { ZingchartAngularModule } from 'zingchart-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ZingchartAngularModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Inside of the app.component.ts, we define the look and feel of our chart. We can use ZingChart's TypeScript Definition file to validate the JSON config:

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

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

export class AppComponent {
  title = 'zing-app';
  config:zingchart.graphset = {
    type: 'line',
    series: [{
      values: [3,4,5,5,6,7,5,3]
    }]
  };
}

Finally, we add our a chart into our markup inside of app.component.html.

<div>
  <zingchart-angular [config]="config" [height]="500"></zingchart-angular>
</div>

https://stackblitz.com/edit/zingchart-angular-helloworld

That was it! Only a few lines of code, and we have a fully reactive chart that updates when your data does.

Reactivity

The zingchart-angular component is reactive to all of its properties — from the chart configuration to the data. If any changes are sent to the component, the chart is re-rendered automatically.

https://stackblitz.com/edit/zingchart-angular-reactivity

Events and Methods — Tying your app together with ZingChart

The revised ZingChart component is all about connectivity to your Angular component. Events are automatically bound to the function you provide via props, and all available ZingChart methods are available when you access a specific component via refs.

Events

By binding a function to a known ZingChart event prop, we can perform custom actions when a chart emits an event. In the example below the event node_mouseover is emitted and its contents are displayed.

<zingchart-angular [config]="config" [height]="300" (node_mouseover)="onNodeMouseover($event)"></zingchart-angular>

https://stackblitz.com/edit/zingchart-angular-event

I highly recommend checking out all of ZingChart's events to see what is available to you.

Methods

Methods can be called when a ref is given to the component, and a known method is called from the instance of the component. Below is an example of dynamically adding a plot, from a custom button created in Angular.

  <zingchart-angular #chart1 [config]="config"></zingchart-angular>

...
    export class AppComponent {
      ...

    obtainData() {
      console.log(this.chart.getdata());
    }

https://stackblitz.com/edit/zingchart-angular-method

I recommend reviewing ZingChart's available methods.

Get Charting!

With a better understanding of ZingChart and its Angular component, all you need is to include it into your application. Head over to our Github repository for the full documentation of the component: https://github.com/zingchart/zingchart-angular

A pioneer in the world of data visualization, ZingChart is a powerful Javascript library built with big data in mind. With over 35 chart types and easy integration with your development stack, ZingChart allows you to create interactive and responsive charts with ease.

Connecting Data to a Data Visualization Dashboard with Vue

Mike — Mon, 18 Nov 2019 21:08:06 +0000

This is a continuation article in a series of data visualization examples utilizing the JavaScript framework Vue.js, ZingChart and ZingGrid. We highly recommend starting from the first article to follow along more easily.

In our previous article, we walked through an example of how to create a data visualization dashboard with ZingChart and ZingGrid. We’re continuing this example by connecting our dashboard to real data, and handing the data management and fetching from the server to ZingGrid.

If you’d like to follow along, a finished example from our last article is the best place to start. You can grab that code from the Github repository under the part-2-complete branch: https://github.com/zingsoftinc/vue-dashboard

Creating a REST API for our dataset

We’ll start by creating a REST API server to host our transactions data. We recommend using json-server to quickly deploy endpoints in less than a minute flat!

First install the JSON server via NPM:

$ npm install -g json-server

We can then run the server directly from our transactions.json
file with:

json-server --watch /path/tp/transactions.json

We can see if the endpoint is working by making a GET call to http://localhost:3000/transactions to obtain a full list of our data.

Utilizing ZingGrid to manage the data

In the previous article of this series, we handled data flow from the App.vue down to each component, and obtained the data from a single file.

Diagram of data flow from the App.vue down to each component

In this article, we’re utilizing ZingGrid’s REST API feature to obtain our dataset from a remote data source. We’ll then communicate the data to all other components on the page, via the main parent App.vue.

Diagram of data flow from the App.vue using a REST API

Connecting ZingGrid to a remote data source

ZingGrid works out of the box with most REST API endpoints. We simply configure our data with zg-data and zg-param components.

<zg-data>
 <zg-param name="src" value="'http://localhost:3000/transactions"></zg-param>
 <zg-param name="searchKey" value="search"></zg-param>
 <zg-param name="loadByPage" value="true"></zg-param>
</zg-data>

Let’s breakdown each zg-param attribute:

src — the location of the REST API endpoint where our data resides.
searchKey — when using the built-in search functionality on ZingGrid, we specify the query parameter needed to search in the REST API. In our example, json-server has the query parameter of search.
loadByPage - Load by page enables paginated queries on your REST API. This helps reduce the amount of data being transferred by only requesting what is in view. Suppose /transactions has a total of 2000 entries, and ZingGrid has a paginated view of 10 entries. Without loadByPage, we would be downloading all 2000 entries initially, instead of the 10 that are just in view!

Connecting our calendar filter to ZingGrid

In order to utilize an external component to handle our data in conjunction with ZingGrid, we need to be a little creative.

First we pass the start and end dates from our calendar to ZingGrid in our App.vue file.

<v-date-picker mode="range" v-model="range"/>
<transaction-details-grid :start="range.start" :end="range.end" />

In our TransactionDetailsGrid, we create a new computed property queryString to reflect a query string with timestamp values, to be appended to our ZingGrid’s data component.

json-server has equality operations built in the REST API. For our calendar, we want to create a date range around each timestamp.

computed: {
  queryString() {
    return `timestamp_lte=${this.end.getTime()}&timestamp_gte=${this.start.getTime()}`;
    }
  }

Finally, we modify our src being passed to ZingGrid, and append our queryString value to it.

<zg-param name="src" :value="'http://localhost:3000/transactions?' + queryString"></zg-param>

Now every time our calendar date-range is updated, ZingGrid re-fetches the data!

Connecting our charts to our data

We now need to connect the data obtained from ZingGrid to our charts.

We hook into ZingGrid’s event system to notify our Vue application when data changes, is filtered, or is searched upon.

We attach event listeners to ZingGrid, and pass a localized callback to emit an event back up to App.vue.

const getData = () => {
  const data = this.$refs.myGrid.getData({
    rows: 'visible'
  });
  return this.$emit('ondatachange', data);
};

this.$refs.myGrid.addEventListener('data:load', getData);
this.$refs.myGrid.addEventListener('grid:search', getData);
this.$refs.myGrid.addEventListener('grid:filter', getData);

Back up in App.vue, we listen for the ondatachange in our TransactionDetailsGrid, and update our local transactions data.

<transaction-details-grid
 :start="range.start"
 :end="range.end"
 @mouseover="handleEntryHover"
 @ondatachange="updateData" />
updateData(data) {
 // We perform a copy of our data so we can modify it locally.
 this.transactions = JSON.parse(JSON.stringify(data));
},

https://glitch.com/~vue-dashboard-live-data

Our dashboard should be fully functional, with our new remote dataset! Note that filtering and searching in ZingGrid also modify the state of the charts and what values are being represented. This allows for powerful data exploration with ZingGrid and ZingChart, with the ability to sift through large sets of data. You can view the finished product here: https://glitch.com/~vue-dashboard-live-data

That concludes our series for how to create a data visualization dashboard with Vue! If you’d like to see more Vue data visualization content, feel free to ask away in the comments!

Creating charts in React just got easier

Mike — Mon, 11 Nov 2019 16:21:15 +0000

Adding charts to your React Application just got easier thanks to ZingChart’s revised React component.

The ZingChart team recently updated the zingchart-react component to create visualizations by adding more features and direct access to events and methods right on the component! We’re excited to show you how it works!

ZingChart — The last data visualization library you’ll need

ZingChart has over 35 different base chart types and hundreds of configurations

Add charts to your React.js application in less than a minute

If you don’t have a React Application, you can easily set one up with create-react-app

$ npx create-react-app myApplication

First we add the package to our React Application via NPM:

$ npm i zingchart-react

We then include the component in the project file where we want a chart rendered.

import ZingChart from 'zingchart-react';

Finally, we add a chart into our markup to be rendered!

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        type: 'bar',
        series: [{
          values: [4,5,3,4,5,3,5,4,11]
        }]
      }
    }
  }
  render() {
    return (
      <div>
        <ZingChart data={this.state.config}/>
      </div>
    );
  }
}

https://glitch.com/~react-chart

That was it! Only a few lines of code, and we have a fully reactive chart that updates when your data does.

Taking it a step further

The above example is a minimal example of how simple it is to create a chart in ZingChart, however the library is powerful enough to make more complicated and interactive visualizations, too.

https://glitch.com/~zingchart-react-example

REACTivity

The zingchart-react component is reactive to all of its properties — from the chart configuration to the data. If any changes are sent to the component, the chart is re-rendered automatically.

https://glitch.com/~zingchart-react-reactivity

Events and Methods — Tying your app together with ZingChart

The revised ZingChart component is all about connectivity to your React component. Events are automatically bound to the function you provide via props, and all available ZingChart methods are available when you access a specific component via refs.

Events

<ZingChart ref={this.chart} data={this.state.config} node_mouseover={this.nodeInfo}/>

https://glitch.com/~zingchart-react-events

List of all ZingChart events: https://www.zingchart.com/docs/api/events

Methods

<ZingChart ref={this.chart} data={this.state.config}/>
...
this.chart.current.addplot({
  data: {
    values: [5,5,3,6,7,3,4,6,7],
    text: "My new plot"
  }
});

https://glitch.com/~zingchart-react-methods

List of all ZingChart methods: https://www.zingchart.com/docs/api/methods

All of the above examples can be found on our glitch collection:

https://glitch.com/@zing-soft/react

Get Charting!

With a better understanding of ZingChart and its React component, all you need is to include it into your application. Head over to our Github repository for the full documentation of the component: https://github.com/zingchart/zingchart-react

Creating a Data Visualization Dashboard with Vue

Mike — Tue, 29 Oct 2019 19:47:03 +0000

Creating custom dashboards is hard work! Whether it be an analytics dashboard to monitor your site’s traffic and social presence, or a SaaS dashboard to see how your product is growing, creating a dashboard from scratch can be quite complex and time-consuming.
This is the second article in our series about integrating ZingChart with Vue to create an interactive dashboard. If you’d like to learn more about the zingchart-vue component, check out the first article in this series.

With the use of third party libraries, we can alleviate most of the heavy lifting and create dashboards that have complex interactivity with minimal effort. This article will be an overview of the libraries needed to create almost any type of dashboard.

Vue.js — We will be using the popular Vue JavaScript framework to build our dashboard around. With its robust data handling and rich developer community with UI widgets, this is the perfect framework to set the groundwork.
ZingChart — To create dashboards with unique visualizations, we will need a library that covers all use cases. ZingChart provides over 30 different chart types including the basics such as Line, Bar, and Pie Charts, but also more unique visualizations such as WordCloud, Gauge, and Radar. The library even has maps!
ZingGrid — Dashboards aren’t complete without a data table to display details about our data in a logical format. A complementary product to ZingChart, ZingGrid will provide a useful set of features to handle our data including filtering, sorting, and searching. With its unique compatibility with ZingChart allowing rich interactivity between the two products, it’s a no brainer to add this library to our arsenal.

Visualizing your Data with ZingChart

We can easily customize and add charts to our dashboard using the zingchart-vue component. The component allows for easy data-binding, and exposes out ZingChart’s events and methods to the component level. For more information about the ZingChart Vue component, check out the previous article in this series: https://medium.com/@zingchart/interactive-charts-with-vue-js-e72de19fa6cd

Inspecting your Data with ZingGrid

Charts and data visualizations are great for understanding your data, but when you need to see specific details of an event it can be tedious. Data grids and tables are useful for organizing large amounts of data and for finding specific entries in that data.

Adding Data to the Grid

Unlike ZingChart, ZingGrid is built as a web component and is portable in any framework including Vue. We can easily add data to our grid with the data attribute and the .prop modifier, which stringifies the data before being sent to ZingGrid. This not only allows ZingGrid to retain a fresh copy of the data, but automatically converts it to a format that web components can understand.

<zing-grid :data.prop="myData"></zing-grid>

Filtering, Sorting, and Pagination, Oh My!

A list of data entries isn’t useful unless there is a way to navigate through the list easily. ZingGrid provides multiple useful features that let you easily sort through your data. Best of all, adding these features is as simple as adding an attribute to the <zing-grid> element.

<zing-grid :data.prop="myData" filter sort pager></zing-grid>

Interactivity with Other Components

Like ZingChart, ZingGrid allows for deep integration to its environment with API methods and events. You can learn more about these in the docs: https://www.zinggrid.com/docs/api-methods

Now that we have a basic understanding of the tools we’re going to utilize, let’s build our dashboard!

Getting Started

For this tutorial, you will need the vue-cli installed on your computer. This will allow us to quickly scaffold, run, and test our dashboard with ease. If you don’t have this cli tool installed, head over to https://cli.vuejs.org/#getting-started to start there.

Once it’s installed, we’ll create a project with our dashboard starter code.

vue create --preset zingsoftinc/vue-dashboard#starter myDashboard

After this tutorial you should be familiar with:

Basic data flow and manipulation in a dashboard
Creating ZingChart and ZingGrid in Vue
Communicating across multiple widgets in the dashboard

The starter code contains styling and structure already defined to help you focus on the important highlights of creating your dashboard.

Project Overview

myDashboard/
├── src/
│   ├── App.vue
│   ├── main.js
│   │── data/
│   │  └── transactions.js
│   ├── components/
│   │  ├── LatestTransactionsChart.vue
│   │  ├── TransactionDetailsGrid.vue
└───└──└── TransactionBreakdownChart.vue

App.vue - The root Vue component which contains our dashboard
main.js - The entry point for our Vue application
components/ - Various charts and grids that we will learn how to connect together
data/ - The dataset that our dashboard will build off of. In future tutorials, we'll learn how to connect and filter data to remote sources, including databases.

The starter code has three components pre-defined and styled for you. Our focus will be on how to manipulate our dataset to pass data to each component, and to tie-in interactions across those components.

Our Dataset

For this tutorial we'll be creating a sales analytics dashboard based on a set of transactions. Our dataset is simply an array of these objects:

{
  "id":1,
  "first_name":"Ketti",
  "last_name":"Latham",
  "email":"klatham0@time.com",
  "company":"InnoZ",
  "amount":"1529.29",
  "timestamp":1554550724000,
  "license_type":"saas",
  "purchase_type":"new"
}

Important attributes :

license_type - Either SaaS, internal, website, or enterprise
purchase_type - Either new, renewal, or cancellation (if the user has opted out from a renewal)

Our Components

We will be focusing on three different components in this tutorial, comprised of ZingChart and ZingGrid.

LatestTransactionsChart.vue - A line chart comparing the amount earned in dollars over time
TransactionBreakdownChart.vue - A pie chart breaking down the occurrence of each transaction type
TransactionDetailsGrid.vue - A grid listing each transaction during the period

Step 1: Passing Data to the Components

For our components to render any charts or grids, we need to pass the data to each component individually since specific charts and grids may need to have the data formatted differently.
First we'll import our data from the transactions file into our App.vue, along with our chart components. We also register the components in our Vue app to be used.

// App.vue
<script>
  import transactions from './data/transactions.js';
  import LatestTransactionsChart from "./components/LatestTransactionsChart.vue";
  import TransactionBreakdownChart from "./components/TransactionBreakdownChart.vue";
  import TransactionDetailsGrid from "./components/TransactionDetailsGrid.vue";
export default {
    name: 'app',
    // Register the components to be used
    components: {
      LatestTransactionsChart,
      TransactionBreakdownChart,
      TransactionDetailsGrid,
    },
    data() {
      return {
        transactions,
      }
    }
  }
</script>

Then we'll pass the transactions object into each of our three components.

// App.vue
<template>
  <div id="app">
    <section class="dashboard">
      ...
      <div class="dashboard__row">
        <latest-transactions-chart ref="latestTransactions" :entries="transactions"/>
        <transaction-breakdown-chart ref="transactionBreakdown" :entries="transactions"/>
      </div>
      <div class="dashboard__row">
        <transaction-details-grid :entries="transactions"/>
      </div>
    </section>
  </div>
</template>

Let's dive into each of our three components to manipulate the data to render out a chart or a grid.

Latest Transactions Chart

For the "Latest Transactions Chart", we need to format our transactions array into a single dimensional array containing a pair of values: the timestamp, followed by the dollar amount for each transaction.

// LatestTransactionsChart.vue
<template>
  <zingchart :data="chartConfig"></zingchart>
</template>
<script>
  export default {
    props: ['entries'],
    computed: {
     values() {
        return this.entries.map(o => {
          return [o.timestamp, parseFloat(o.amount.slice(1,-1))]
       });
     },
     chartConfig() {
       ...
       series: [{
         values: this.values,
       }],
       ...
     },
    },
  }
</script>

We write both the values and chartConfig as computed properties rather than data so we can automatically track any changes that occur to the data from the parent App.vue component.

Transaction Breakdown Chart

Similarly for our "Transaction Breakdown" Chart, we need to format the data as an array of objects, with each value containing the total value of the transaction types. ZingChart will calculate the overall percentage for us, but we'll need to do a bit of summations over the transactions:

// TransactionBreakdown.vue
<template>
  <zingchart :data="chartConfig"></zingchart>
</template>
<script>
  export default {
    props: ['entries'],
    computed: {
     values() {
      const categories = this.entries.reduce((acc, transaction) => {
        acc[transaction.purchase_type] = acc[transaction.purchase_type] || 0;
        acc[transaction.purchase_type]++;
        return acc;
      }, {});
      return Object.keys(categories).map((name) => {
        return {
          values: [categories[name]],
          text: name
        }
      })
     },
     chartConfig() {
const colors = [
        {
          backgroundColor: '#04A3F5',
          hoverState: {
            backgroundColor: '#45D6C4'
          }
        },
        {
          backgroundColor: '#98D1EE',
          hoverState: {
            backgroundColor: '#45D6C4'
          }
        },
        {
          backgroundColor: '#295A73',
          hoverState: {
            backgroundColor: '#45D6C4'
          }
        },
      ]; 

       ...
        series: this.values.map((o,index) => Object.assign(o, colors[index])),
       ...
},
    },
  }
</script>

Transaction Details Grid

As for the "Transaction Details" Grid, ZingGrid natively accepts an array of objects so all we have to do is pass the data!

<transaction-details-grid :entries="transactions"></transaction-details-grid>

Step 2: Adding an External Component to Control Our Data

If all went smoothly you should see the charts and grids populated with a full year's worth of transactions. But what if we only wanted to view a month's view of transactions? We would need to control our data at the App level to do so.
We will be adding an additional library to help us select dates via a calendar component:

https://vcalendar.io/

First let's install the library to our project:

$ npm i v-calendar

And add the following lines to our main.js, just before the new Vue constructor is invoked.

import VCalendar from 'v-calendar';
Vue.use(VCalendar);

Inside of our App.vue file we'll need to add a new field in our data object to keep track of the start and end dates that the calendar is displaying. We will default to showing the current month's transactions.

data() {
    return {
      transactions,
      range: {
        start: new Date().setDate(1), 
        end: new Date() 
      }
    };
  }

We will be using the range property to control both the start and end dates with one widget. Next, we'll add the v-calendarcomponent to our template, binding both the start and end dates to our new data fields.

<header>
  <h4>Date Range</h4>
  <v-date-picker mode="range" v-model="range"/>
</header>

A new computed property called filteredTransactions will be needed to return a subset of the transactions, based on the date range.

{
...
computed: {
    filteredTransactions() {
      return this.transactions.filter(entry => {
        return (
          entry.timestamp >= this.range.start.getTime() &&
          entry.timestamp < this.range.end.getTime()
        );
      });
    },
...
}

Finally, we'll update all the components to accept the new filtered date range:

<template>
  <div>
    <latest-transactions-chart :entries="filteredTransactions"></latest-transactions-chart>
    <transaction-breakdown-chart :entries="filteredTransactions"></transaction-breakdown-chart>
    <transaction-details-grid :entries="filteredTransactions"></transaction-details-grid>
  </div>
</template>

The charts and grids should now show a subset range of the transactions! This also demonstrates how data modeling works in Vue: one-way reactivity from the parent to its children.

Step 3: Adding Interactions Between the Components

Our dashboard is looking more complete, but to take it a step further we can add shared interactivity between the components. Both ZingChart and ZingGrid come with rich API Methods and Events, from reacting to MouseEvents to modifying state from external methods.

We will be demonstrating how to control mouseover events from ZingGrid to highlight the same entry in both our Latest Transactions and Transaction Breakdown Charts.

To begin, we need to listen for ZingGrid's row mouseover event. ZingGrid calls this a record:mouseover event. We perform this in the component's mounted() lifecycle callback once the grid has finished rendering.

// TransactionDetailsGrid.vue
mounted() {
    // Attach an event listener to ZingGrid
    this.$refs.myGrid.addEventListener('record:mouseover', (e) => {
      this.$emit('mouseover', e);
    });
  }

Since we have encapsulated each of our chart and grid components in their own respective components for code clarity, we need to emit this event back up into our App.vue parent component.

Back in our App.vue file, we need to delegate the mouseover
event from ZingGrid to our children charts.

First we define a callback that the mouseover event should listen to.

// App.vue
<transaction-details-grid @mouseover="handleEntryHover"></transaction-details-grid>

In our new method handleEntryHover, we reference both our charts and call on the ZingChart methods that are available thanks to the zingchart-vue component.

{
...
methods: {
  handleEntryHover(e) {
    // Obtain references to the charts
    let latestTransactions = this.$refs.latestTransactions;  
    let transactionBreakdown = this.$refs.transactionBreakdown;
  }
}
...
}

Since ZingGrid emits CustomEvents, the information that we need will be under e.detail. Inside, we see a rich amount of information about the grid and the event.

For our Latest Transactions chart, we want a guide to appear on the chart when the user hovers over the corresponding row in our grid. To do so, we need to call the chart's setguide method and pass it an object containing the specific key/value (x-axis value), or in this case the timestamp.

// Set our guide corresponding to the correct timestamp
latestTransaction.setguide({
  keyvalue: e.detail.ZGData.data.timestamp
});

For our Transaction Breakdown chart, we will need to determine the row entry's purchase_type and the corresponding index that the data is defined when we created the chart.

We utilize the getseriesdata method of the chart to obtain the data used to create the chart to find the index. Once found, we then call the showhoverstate to change the pie slice color to highlight the entry in focus. Recall that the data format of the pie chart is an array of a single entry. The showhoverstate method requires a nodeindex so we default at 0.

const indexInFocus = transactionBreakdown
  .getseriesdata()
  .findIndex(o => o.text === e.detail.ZGData.data.purchase_type);

transactionBreakdown.showhoverstate({
  plotindex: indexInFocus,
  nodeindex: 0
});

All together:

handleEntryHover(e) {
  // Obtain references to the charts
  let latestTransactions = this.$refs.latestTransactions;
  let transactionBreakdown = this.$refs.transactionBreakdown;
// Set our guide corresponding to the correct timestamp
  latestTransaction.setguide({
    keyvalue: e.detail.ZGData.data.timestamp,
  });
// Highlight the pie slice in focus
  const indexInFocus = transactionBreakdown
    .getseriesdata()
    .findIndex(o => o.text === e.detail.ZGData.data.purchase_type);
  transactionBreakdown.showhoverstate({
    plotindex: indexInFocus,
    nodeindex: 0
  });
}

And there you have it! Interactions across ZingGrid and ZingChart.

Check out a completed, working example of this Vue dashboard in the master branch of our starter code at https://github.com/zingsoftinc/vue-dashboard and at https://glitch.com/~vue-dashboard-starter

We took our example a step further and created a sales dashboard with custom sparklines and more interactions and features. You can check out a working example and the code for it here: https://glitch.com/~vue-dashboard

Next time we'll show you how to connect a live database, to search, filter, and query directly from your dashboard.

To be notified of future articles follow us on Twitter!

Interactive charts with Vue.js

Mike — Wed, 16 Oct 2019 09:21:34 +0000

Deciding which JavaScript charting library to include in your Vue.js application can be challenging due to the number of data visualization options out on the web.

ZingChart stands out by having over 100 unique events and methods to control, modify, and interact with Vue. The library not only includes over 35 unique chart types, but also has enough customization that you can create your own visualizations! If that's not enough, ZingChart recently released their official Vue.js component that wraps all of the library's functionality to be used easily in a Vue Application.

https://github.com/zingchart/zingchart-vue

Let's see how it works…

Creating a chart

A Hello World

A simple example of creating a chart using the zingchart-vue component is the best way to demonstrate the ease of the library.

<zingchart :data="{type: 'line', legend: {}, series: [{values: [4,5,3,3,3,4,5]}}"></zingchart>

The component takes a data configuration object specified by ZingChart to describe the features and values that a chart should take. The above example describes a line chart with some values to be plotted, along with a legend.

https://glitch.com/~vue-chart

A More Advanced Example

The above example is a simple demonstration of how easy it is to create a line chart, but if we wanted something more complex and customized, the library and component allow us to do so:

Data Reactivity

The Vue component automatically updates whenever any of its attributes change. This includes series values, or anything in the configuration object.

https://glitch.com/~zingchart-vue-reactivity

Interactivity with other components

We can integrate our charts to other charts or UI components by listening to events, and modifying the chart using methods.

Binding Events

For example, if we wanted to display a node's value on hover in our Vue application, we would hook into the node_mouseover event.

https://glitch.com/~zingchart-vue-events

All events that ZingChart emits are available on the Vue component with the "@" annotation.

Modifying with methods

Alternatively, if we wanted to annotate our chart by adding a label to a specific node, we would utilize the addobject API method and create a new label:

this.$refs.myChart.addobject({
  type: 'label',
  data: {
    "text": "Something interesting!",
    "background-color": "#3f51b5",
    "font-size": "14px",
    "font-weight": "normal",
    "font-color": "#FFFFFF",
    "padding": "10%",
    "border-radius": "3px",
    "offset-y":-30,
    "shadow": false,
    "callout": true,
    "callout-height": "10px",
    "callout-width": "15px",
    "hook":"node:plot=0;index=4"
  }
});

https://glitch.com/~zingchart-vue-methods

All methods are readily available on the component's object to be called.

Get Charting!

With a better understanding of ZingChart and its Vue component, all you need is to include it into your application. Head over to our Github repository for the full documentation of the component: https://github.com/zingchart/zingchart-vue

Stay Tuned

Over the coming weeks we will be creating a dashboard built with Vue and the zingchart-vue component to demonstrate the flexibility and power of both tools. To receive updates of when we publish new articles, follow us on twitter:

https:/twitter.com/zingchart

How to Animate a Gauge Chart in Under 2 Minutes

Josh at Zing — Fri, 13 Sep 2019 23:18:50 +0000

This is the second post in ZingChart's Stopwatch Features series. This series of posts is intended to show you how quickly and easily you can create and animate a chart using the powerful JavaScript library, ZingChart.

Watch the video below to see how easily this can be achieved. For a step-by-step walkthrough, scroll past the video to the content below.

I will be going over 3 main items throughout this article:

Adding your HTML that contains your chart
Using Javascript and ZingChart to add data, properties and animations
Rendering your Gauge chart on the page

For the purpose of this demo, you will be creating the gauge chart shown below and fill it with dummy data.

Before I begin...

Every time I experiment with the ZingChart library, I always do so in their free web-app, the 'ZingSoft Studio'.

This free sandbox-like environment will give you full access to the ZingChart library and let you experiment with all of ZingChart's features, animations and chart types.

Check out the Studio and start charting!

Adding Your HTML

To start this process, you will need to create a basic HTML layout if you have not done so already. Feel fee to copy the one I have below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <div id="myChart" class="chart--container"></div>
  </body>
</html>

Notice that I have included the CDN to reference the ZingChart library within the script tag.

I have also included a div within the body of the HTML that will render the chart. This div also includes a pre-defined class named chart--container. Reference here to see the basic CSS classes added to this chart.

As far as HTML setup, you are done!

Adding JavaScript

Now that you have finished setting up my HTML, you will spend the rest of your the time using and creating JavaScript.

To start, you can either setup a script beneath initial setup your div, or you can reference an outside JavaScript document.

ZingChart is an extremely powerful and complex library. For the purpose of this demo, you will only be using a handful of properties available. For a full list of JSON properties available through ZingChart, check out the JSON attributes page.

You will start by creating and naming an object variable. Within this object, you will include 3 main properties: type, series, and plot. Reference the format below.

    var chartConfig = {
      type: 'gauge',
      series: [
        {
          text: 'Day 1',
          values: [23],
          backgroundColor: '#00384A'
        },
        {
          text: 'Day 2',
          values: [20],
          backgroundColor: '#008ECC'
        },
        {
          text: 'Day 3',
          values: [25],
          backgroundColor: '#06C5FC'
        }
      ],
        plot: {
      },
    };

The type property will determine which chart type you will render to the page. ZingChart has over 35 different chart types available, but I will be going over gauge charts in this article. If you reference above, you will notice I have set the type property to have a property value of gauge.

The series property is the next item in you chartConfig object. This property is where all your data and data styling will live. There are a ton of features you include here to add hover states, legend markers, tool tips, value boxes and more directly to your data points.

You will want to follow the format I have created above to ensure the three needles are added to the graph.

plot will be used in the next section to add animations to your graph.

If you render your chart as the variable is now, it will fully display without animations.

2. Adding Animations

ZingChart has made it incredibly east to add animations to all the chart types. Using the plot object, you will include another object as a property within plot called animation.

Within the animation object, the first property you will include is effect. Effect can either take a string or a number (either 1 or 2) as a value.

In the code below, I have added the animation and set the effect to have a property value of 2. If you run the demo with the below code, you will see that the needles have a basic animation that runs.

var chartConfig = {
  type: 'gauge',
  series: [
    {
      text: 'Day 1',
      values: [23],
      backgroundColor: '#00384A'
    },
    {
      text: 'Day 2',
      values: [20],
      backgroundColor: '#008ECC'
    },
    {
      text: 'Day 3',
      values: [25],
      backgroundColor: '#06C5FC'
    }
  ],
  plot: {
    animation: {
      effect: 2
    }
  }
};

Below are the animation characteristics for the effect property:

1 = Fade in
2 = Rotate from left to right

...,
  plot: {
    animation: {
      effect: 2,
      sequence: 1
    }
  }
...

The next animation property you can include is the sequence property. This property determines the order the nodes (or needles) will render and also takes in values between 1 and two. Here are the characteristics for each:

1 = Renders individual nodes
2 = Renders all nodes at once

...,
  plot: {
    animation: {
      effect: 2,
      sequence: 1,
      method: 1
    }
  }
...

The next animation property you can take advantage of is the method property. method determines how the nodes act at the end of the animation and can only be applied when effect: 2 is active. This property takes in values between 1 and 5.

The best way to understand method is to try it out for yourself.

Here are the characteristics for each value:

1 = Node has long bounce at end of animation
2 = Node has quicker bounce at end of animation
3 = Node has very quick bounce at end of animation
4 = Node slows down towards end of animation
5 = Node slows down even more towards end of animation
6 = Node maintains consistent speed throughout the animation

3. Rendering Your Chart

The last piece of JavaScript you will be adding to this demo is the zingchart.render() method.

Within this built in method, you will want to include the id that was included within the div in your HTML. This is what renders the chart to your HTML.

In addition to this, you need to reference the JavaScript variable you created previously. This can be done by adding the data property and setting it's value to the name of the variable. In this case, you will set it to chartConfig.

Two additional properties you can add to this object are height and width. These properties take in numerical values like normal CSS properties.

Your JavaScript should now look like this:

var chartConfig = {
  type: 'gauge',
  series: [
    {
      values: [23],
      backgroundColor: '#00384A'
    },
    {
      values: [20],
      backgroundColor: '#008ECC'
    },
    {
      text: 'Day 3',
      values: [25],
      backgroundColor: '#06C5FC'
    }
  ],
  plot: {
    animation: {
      effect: 2,
      sequence: 1,
      method: 1
    }
  }
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});

There are many different combinations of effect method and sequence that you can implement. There are also other properties you can add to the plot object such as speed and delay. To read more about these, visit the ZingChart animation docs.

To check out a more customized version of this chart, check out the demo. Feel free to fork, edit and customize the demo with your own design and data!

How to Make a Bar Chart using JavaScript

Josh at Zing — Tue, 03 Sep 2019 20:17:57 +0000

Also known as column charts, bar charts come in various shapes and sizes.
In this post, we will be going over how to create a simple vertical bar chart using the free JavaScript library, ZingChart.

Even with little knowledge of HTML, CSS and JavaScript, you can easily bring your data to life in just a few short steps.

The steps we will cover are as follows:

Referencing the ZingChart library
Placing your chart on the your HTML page
Adding data and rendering your chart
Basic customization of your chart

1. Referencing the ZingChart library

If you have little knowledge of HTML layouts, I have provided one below with the ZingChart library referenced already.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8">
    <title>ZingChart: My Bar Chart</title>
    <script src=”https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>

  </body>
</html>

When referencing the ZingChart library, make sure to include the code snippet included in the HTML layout shown above.

You can also download the ZingChart library or use a package manager, like NPM.

2. Placing your chart on your HTML page

Before you begin entering any sort of data, you are going to want to reference your chart within the <body> of your code so that the chart can actually render on the page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8">
    <title>ZingChart: My Bar Chart</title>
    <script src=”https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <div id=”myChart”></div>
  </body>
</html>

To do so, you will want to create an opening and closing <div>. Within that <div> tag, you will also want to include your chart’s name as an id. As far as HTML goes, you are done! Reference the example above.

3. Adding data and rendering your chart

Here is where some knowledge of JavaScript comes into play, however it is still simple to implement.

Your next step will be including <script> tags. This is where you are going to place your JavaScript. When adding the <script> tag, make sure to include it after the <div> to render the chart.

<script>
  var chartData = {
    type: 'bar',
    series: [
      { values: [35, 43, 70, 65] },
      { values: [25, 57, 49, 60] }
    ]
  };
  zingchart.render({
    id: 'myChart',
    data: chartData,
    height: 400,
    width: 600
  });
</script>

If you include the code within the <script> tag above and run this file in your browser, you will have created a fully functional bar chart!

Now let’s break down exactly what’s happening above.

var chartData = {    //Sets a variable with all of the chart data
  type: 'bar',       //Tells ZingChart the type of chart
  series: [          //Creates different series of data
    { values: [35, 43, 70, 65] },    //Values for the first bar
    { values: [25, 57, 49, 60] }     //Values for the second bar
  ]
};

I have set up a variable or var named chartData. This is where all of your data, attributes and objects will be referenced (don’t worry, I will go over more attributes later).

After you have created the chartData variable, you will want to establish what type of chart you will be working with.

This variable will be created as a JavaScript object and all the attributes and data will be listed as values within the object. For more information on JavaScript objects, check out this article.

var chartData = {
  type: 'bar',       //Tells ZingChart the type of chart
  series: [
    { values: [35, 43, 70, 65] },
    { values: [25, 57, 49, 60] }
  ]
};

In this case, you want to create a bar chart. This can be done by including type: ‘bar’ as an attribute within the object. I will list out ZingChart’s many other options available later in this post.

var chartData = {
  type: 'bar',
  series: [          //Creates different series of data
    { values: [35, 43, 70, 65] },    //Values for the first bar
    { values: [25, 57, 49, 60] }     //Values for the second bar
  ]
};

Moving forward, you will also want to include data in your object. This can be done using the series attribute. You will notice that this attribute is listed as an array with more objects listed within. Feel free to play around with a different number of objects within a series to see how it affects what is rendered on the page.

Lastly, you are going to want to render your chart to the page.

zingchart.render({   //Render method used to show chart on page
  id: 'myChart',     //Reference the id used in the <div> tag
  data: chartData,   //Reference the chartData object created above
  height: 400,       //Sets height for chart
  width: 600         //Sets width for chart
});

This can be done by calling the zingchart.render method shown above. This method takes in certain attributes as arguments for the render function.

The id: “myChart” is used to reference your div within the HTML.

The data: chartData is used to reference what data you will want to pull when rendering the chart. This value should be set to the object variable created previously.

The height and width arguments are used to set the size of the chart itself.

Once all this has been filled in, you can run a fully workable chart in the DOM.

Before I continue..

The easiest way to play around with the different types of charts available is to sign up for ZingChart’s free web-app, the ‘ZingSoft Studio’.

This will give you full access to the ZingChart library in a sandbox-like environment. The Studio allows you to build out fully functioning charts and grids without starting from scratch.

Check out the Studio and start charting!

4. Basic Customization of Your Chart

Now that I’ve covered the basics, I will look a little deeper into how powerful ZingChart truly is. I will only be able to cover a small portion of the customizations available, but I encourage you to check out the ZingChart docs to answer any questions you may have.

Earlier, I discussed the many different types of bar charts available. To switch the standard bar chart I created earlier into one of these different types, you will want to adjust the type attribute. Take a look at a few examples below to see what happens when you set the type attribute to a few other bar chart types.

There are other things you can do to change the shape of the bars within the chart. You may change the shape of the chart by adding the aspect attribute to the plot object. Setting the value to cone, histogram, cylinder, or pyramid will change the shape of the bar accordingly.

You also have the option to incorporate all kinds of styles into your charts. Changing bar colors is as easy as setting the background-color attribute of your dataset to the color of your choosing. You can also set the change the opacity of the bar by using the alpha attribute and choosing a level of opacity between 0 and 1.

Styling the ‘x’ and ‘y’ axes is as easy as adjusting the scale-x or scale-y object to include the scale you are looking for.

By setting the min-value attribute to a number in Unix time and setting the step attribute to a value of day you can set your chart to follow a time-series.

Note: To adjust the format of each x-axis value, you will need to use the transform object and set the type to date as well as changing the all attribute to %M %d. This will allow the x-axis to display the months and days of each bar.

There are tons of other features available when making a bar chart and I strongly encourage you to both check out the docs as well as create a chart or two in the Studio.

A pioneer in the world of data visualization, ZingChart is a powerful JavaScript library built with big data in mind. With over 35 chart types and easy integration with your development stack, ZingChart allows you to create interactive and responsive charts with ease.

How to Create a Line Chart Using JavaScript

Josh at Zing — Fri, 23 Aug 2019 19:16:53 +0000

A line chart or graph is a highly efficient way to display data points connected by lines. Highly versatile, line charts come in three different types: simple line charts, 3-D line charts, and vertical line charts.
In this article, I will show you how to create different types of line charts and how to style them using the free JavaScript library, 'ZingChart'.

The steps you will use to create a fully functioning line chart are as follows:

Referencing the ZingChart library
Placing your chart on your HTML page
Adding data and rendering your chart
Basic customization of your chart

Before I begin

Before beginning my tutorial, I highly recommend signing up for ZingChart's 'Studio' free web-app.

This will allow you to create charts in a sandbox-like environment provided by ZingChart. It also has pre-made templates for the majority of their chart types so you never need to start from scratch.

Check out the Studio and start charting!

1. Referencing the ZingChart library

If you do not have much knowledge of HTML layouts, I have provided a template below with the ZingChart library referenced.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingChart: My Bar Chart</title>
    <script src="<https://cdn.zingchart.com/zingchart.min.js>"></script>
  </head>
  <body>

  </body>
</html>

To reference the ZingChart library, include the code snippet shown above within the head section of your HTML.

You can also download the ZingChart library or use a package manager, like NPM.

2. Placing your chart on your HTML page

Before you integrate any data to your line chart, you will need to reference the chart within the body of your code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingChart: My Bar Chart</title>
    <script src="<https://cdn.zingchart.com/zingchart.min.js>"></script>
  </head>
  <body>
    <div id="myChart"></div>
  </body>
</html>

Create a div tag within the body of your HTML and give it an id that is set to your charts name. In terms of the HTML needed for your chart, you are done!

3. Adding data and rendering your chart

This is where some knowledge of JavaScript will be required.

The next step will be including script tags where all your JavaScript will live. When adding the script tag, ensure it is placed after the div that renders the chart.

<script>
  var myConfig = {
     "type": "line",
     "series": [
       {"values": [20,40,25,50,15,45,33,34]},
       {"values": [5,30,21,18,59,50,28,33]},
       {"values": [30,5,18,21,33,41,29,15]} 
     ]
  };

  zingchart.render({ 
    id: 'myChart', 
    data: myConfig, 
    height: "100%", 
    width: "100%" 
  });
</script>

Try adding the above code within the script tag in the body of your HTML. If you run this in your browser, you will have a fully functioning line chart!

Check out this demo here.

Let's go over what exactly is happening above.

var myConfig = {
  "type": "line",
  "series": [
    {"values": [20,40,25,50,15,45,33,34]},
    {"values": [5,30,21,18,59,50,28,33]},
    {"values": [30,5,18,21,33,41,29,15]}
  ]
};

I set up a variable or var called myConfig. All of the properties within this object will tell ZingChart how to render the chart.

var myConfig = {
  "type":"line",    //Tells ZingChart the type of chart to use**
  "series":[
    {"values": [20,40,25,50,15,45,33,34]},
    {"values": [5,30,21,18,59,50,28,33]},
    {"values": [30,5,18,21,33,41,29,15]}
  ]
};

The first property within the object you created should be the type property. ZingChart has over 35 chart types you can use for the type property, but for the purpose of building a line chart, you will want to give type a value of line. Reference snippet above.

var myConfig = {
  "type":"line",
  "series":[        //Creates a series of data
    {"values":[20,40,25,50,15,45,33,34]},  //Values for blue line
    {"values":[5,30,21,18,59,50,28,33]},   //Values for red line
    {"values":[30,5,18,21,33,41,29,15]}    //Values for green line
  ]
};

The next property you will want to include is the series property. This property will take in an array of objects as its value. When creating your own values, make sure to stick to the formatting shown above. This only needs to be done if you want to include multiple lines within a single chart.

The last thing you will want to do is tell ZingChart to render your chart on the page.

zingchart.render({    //Render method to show chart on page
  id: 'myChart',     //Reference the id used in your <div> tag
  data: myConfig,    //Reference the myConfig object created before
  height: "100%",    //Sets height for chart
  width: "100%"      //Sets width for chart
});

This can be done by calling the zingchart.render method. The four main attributes this method takes in as arguments are:

id
data
height
width

Reference the comments in the code snippet above to learn what each of these arguments will do for that chart.

4. Basic customization of your line chart

Now that you have a fully functioning line chart showing in your dom, I will go over a few easy customizations you can implement to change the look and feel of your line chart. For a deeper look into the customizations available, read ZingChart's docs.

Earlier, I briefly talked about using the type property and giving it a value of line. A few other values you can give type are:

line3d - Gives your plotted lines a 3D aspect
vline - Turns your graph vertical instead of horizontal

var myConfig = {
  "type": "line",
  "plot": {
    "aspect": "segmented"
  },
  "series": [
    {"values":[20,40,25,50,15,45,33,34]},
    {"values":[5,30,21,18,59,50,28,33]},
    {"values":[30,5,18,21,33,41,29,15]}
  ]
};

If you include a property called plot and give it a property called aspect, you further give your plotted lines a different look. aspect can take in these values:

segmented - Separates data points by connected straight lines
spline - Separates data points by connected curved lines
stepped - Separates data points by vertical and horizontal lines resembling steps
jumped - Separates data points by only the horizontal portion of a stepped line

var myConfig = {
  "type": "line",
  "series": [
    {
      "values":[20,40,25,50,15,45,33,34],
      "line-color":"#6666FF",        //Hexadecimal or RGB value
      "line-style":"dashed",         //'solid' | 'dashed'
      "line-width":5                 //In pixels
    }
  ]
};

To further change the styling of the lines themselves, you can directly add properties to the object holding the values property. Reference example above.

ZingChart has tons of customization options available. To learn more about line charts, visit ZingChart's docs. For some inspiration on charts that have already been created, visit ZingChart's gallery. Feel free to hit 'edit' on any of the demos and save them in your Studio account!

How to Animate a Line Chart in Under 60 Seconds

Josh at Zing — Thu, 18 Jul 2019 22:52:28 +0000

This is the first post in ZingChart's Stopwatch Features series. Over the course of this series, explain many of ZingChart's features that can be quickly implemented to make your charts dynamic, interactive and animated.

Watch the short video below see how quickly and easily adding animation to a line chart can be. For a step-by-step summary, scroll past the video.

As a quick guide, here are the points I will go over to animate your line chart:

Create a basic HTML layout that will render your chart
Add an object within your JavaScript to contain your data, properties and animations
Call ZingChart to render the chart to your page

While you can certainly use your own data and design, for the purpose of this demo, I will use the chart below with 3 plot groupings.

Before I get started…

I highly recommend signing up for ZingChart's free web-app, the 'ZingSoft Studio'.

This will give you full access to the ZingChart library in a sandbox-like environment. The Studio will allow you to create fully functional charts and grids while adding your animations at the same time.

Check out the Studio and start charting!

1. Creating Your Layout

To start, you will need to create a basic HTML layout. Feel free to copy the one below.

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
   <title>Line Chart Animation Demo</title>
   <script src="<https://cdn.zingchart.com/zingchart.min.js>">
</script>
   </head>
   <body>
      <div id='myChart'></div>
   </body>
</html>

Notice I have already included the script tag which references ZingChart's CDN as well as the div to render the chart.

2. Adding Your JavaScript

Once you have finished setting up your HTML, you will want to add your JavaScript.

Either create a script tag below where you set up your chart div or reference a new JavaScript file. While I will only be scratching the surface of what ZingChart can do, the only two JavaScript components you will add to animate your chart are a variable and a render method.

Creating Your Variable

You will start by creating and naming a variable as an object within a JavaScript file or script tag. Within this object, you will want to include 3 main properties: type, series, and plot. Reference the format below.

var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
   }
};

The type property specifies what type of chart you are looking to utilize. ZingChart has over 35 chart types, but for this post, I will be going over line charts, hence the type property has a property value of line.

The series property is where you will store your data, change the line colors, add hover effects and many more customizations you can read about here. Notice the formatting of the series property. To add multiple plotted lines, I made series an array with multiple objects as its properties.

If you save this file and open your HTML in your browser, you will see you have a fully functional line chart.

Adding Animations

To animate your now rendered chart, it is as simple as adding a few more properties to your plot object.

The first thing you will want to do is give your plot object a property called animation. animation will be an object that takes in all the ZingChart properties used to animate your chart.

The first property you will add to animation is effect. This can either take in a string or a number as a value. For the purpose of this demo, I will use numbers. Your JavaScript should look like the code below but try switching out the values with any number between 1 and 13. I have provided the animations for values 1 - 13 below.

var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect":1
      }
   }
};

1 = Fade in
2 = Expand vertical from center
3 = Expand from top
4 = Expand from bottom
5 = Expand left to right
6 = Expand from right to left
7 = Expand horizontal from center
8 = Slide from left
9 = Slide from right
10 = Slide from top
11 = Slide from bottom
12 = Unfold horizontal
13 = Unfold vertical

The next property you can add to animation is sequence. This property can take in values between 1 and 3.

sequence decides what order the lines on the chart will be animated. I encourage you to try out different property values between 1 and 3 to get a better idea as to how they affect the animation itself.

var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect": 1,
         "sequence": 1
      }
   }
};

1 = Lines appear by plot group
2 = Lines appear by node group
3 = Lines appear by individual node

Lastly, speed is the property that will determine the overall speed of the animation. Try using values between 1 and 100.

var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect": 1,
         "sequence": 1, 
         "speed": 10
      }
   }
};

3. Rendering Your Chart

The last piece of JavaScript you will need to add is the zingchart.render() method.

Once that is added, your full JavaScript file should look like this:

var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect": 1,
         "sequence": 1, 
         "speed": 10
      }
   }
};
zingchart.render({
   id: 'myChart',
   data: myConfig,
   height: "100%",
   width: "100%"
});

As far as animation goes, you are done!

There are many different combinations of effect, sequence and speed that you can take advantage of. I encourage you to play around with various combinations to see what best fits your needs. There are also many other properties you can include within the plot object to add interactivity to your chart. You can play around with this demo here.