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/transactionsto 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.

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.

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 transactionsdata.

<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));
},

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!

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.

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 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.

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>
    );
  }
}

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.

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.

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

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 ref={this.chart} data={this.state.config} node_mouseover={this.nodeInfo}/>

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 React.

<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"
  }
});

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:

zingchart/zingchart-react

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.

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:

Interactive charts with Vue.js

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
<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
<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:

V-Calendar

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-calendar component 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 keyvalue (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!

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.

The ability to visualize data analytics has never been more important than it is now, at a time when the amount of data being generated on a global scale continues to grow exponentially. Without a way to visualize the ever-growing amount of inert data being amassed by companies across all industries, they stand to miss out on the business insights and opportunities that analytics can provide.

From identifying trends and fluctuations, to visualizing funnels and comparisons over time, to summarizing subjective performance and proportional totals — there are many ways developers can visualize companies’ analytics data to transform it into more useful information. The question is how best to do it.

For web developers who build apps and websites that include analytics components, the challenge of visualizing data to maximize its informative power is still uncharted territory in many ways. From a multitude of device compatibility and scaling concerns, to a variety of integration considerations, there’s a lot of thought that has to go into the way developers choose to integrate digital charts into their projects.

Fortunately, the ZingChart JavaScript library addresses most if not all of those concerns and considerations because it’s a mobile-friendly, self-contained, dependency-free library that’s compatible with all major browsers. Check out ZingChart’s page on browser compatibility for a more in-depth look into its compatibility details.

Whether your development project requires charts with shared chart interactions, animations, real-time feeds, mobile responsiveness, a powerful JavaScript API, or other types of interactivity, ZingChart’s built-in features are robust enough that they can most likely accommodate your needs. Beyond its feature set, ZingChart can visualize datasets of all sizes using more than 35 different chart types with various chart-specific capabilities and customizations.

So what are some practical use case cases for analytics charts? Website analytics dashboard components are an obvious example, as exemplified by this ring chart with a center label and this line chart with crosshairs. Marketing analytics dashboard components are another example, as illustrated by this mixed line and bar chart and this line chart with multiple scales.

Here’s a more extensive list of ZingChart demos that accommodate different analytics use cases across a variety of industries, including the ones mentioned above:

• Ring Chart with Center Label demo
• Colorful Pie Chart demo
• Drilldown Bar Chart demo
• Line Chart with Crosshair Tooltips demo
• Size Aspect Heatmap demo
• Mixed Line Column Shapes demo
• Spline Dynamic Labels demo
• Gecko Style Widgets demo
• Area Date Formatting demo
• India Map demo
• Response Dashboard Media Queries demo
• Stacked Bar Hooked Labels demo
• Multiple Time Series Scales demo
• Gauge with Center Label demo
• Live Sparkline Chart demo

If you’re interested in finding out more about what it would look like to integrate ZingChart in your next analytics-related web development project, visit the ZingChart website to chat with us, or look into other ways to contact the ZingSoft team. We’ve been trusted with advanced data visualization solutions for organizations of all sizes worldwide since 2008.

Please make sure to also check out ZingChart’s sister product, ZingGrid, to learn how to easily build CRUD-ready data grids and data tables with only a few lines of code. Together, ZingGrid and ZingChart form a powerful suite of data visualization products that are meant to make it easier than ever to transform your analytics data into analytics information.

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.

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.

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.

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.

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.

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"
  }
});

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:

ZingChart

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.

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 walk through, scroll past the video to the content below.

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

1. Adding your HTML that contains your chart
2. Using Javascript and ZingChart to add data, properties and animations
3. 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!

1. 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!

2. 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
    }
  }
…

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

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.

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.

by Josh at ZingSoft

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.

This article will show you how to:

1. Reference the ZingChart library
2. Place your chart in your HTML page
3. Add data and render your chart
4. Basic customization of your chart

Before I Begin

Before beginning my tutorial, I highly recommend signing up for ZingChart’s free Studio web-app. It’s a custom, integrated sandbox-like environment, where you can test and create charts, and then share them when finished. It also provides pre-made starting templates for most of the built-in chart types, so you never need to start from scratch.

Check out the Studio and start charting!

1. Referencing the ZingChart Library

In your HTML page, reference the ZingChart library in the <head> section of the document by adding the library <script> call:

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

  </body>
</html>

We’ve referenced the code from our Content Delivery Network (CDN), but you may also download the ZingChart library or use a package manager, like NPM.

2. Placing Your Chart in the Page

Before adding data to your line chart, you will need to tell ZingChart where to render the chart, by referencing it within the <body> of your code:

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

Create a <div> container within the <body> of your HTML page, and give it a unique id that you will reference when rendering the chart. Simple!

3. Adding Data and Rendering Your Chart

This is where some knowledge of JavaScript is required.

In the simplest method, defining data and adding it to your chart are both done inline in a <script> tag.

First you assign your data and chart config to a variable, and then reference it in the render method:

<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 <body>of your HTML page. If you run this in your browser, you will have a fully functioning line chart!

Note: When adding the <script> tag, ensure it is placed after the referenced <div id="myChart"> that renders the chart.

Check out the full line-chart demo.

So what exactly is happening above?

First, the variable myConfig was created to store the chart’s data and configuration settings.

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

The type property is set to line and tells ZingChart which type of chart to render. ZingChart has more than 35 built-in types to choose from!

The series property is where we define the chart’s data. It accepts an array of objects, which each represents one line in the chart. We’ve added 3 different lines to the chart, and defined its data points in the individual values arrays.

Finally, the zingchart.render() method builds the chart and adds the code to your referenced div container.

zingchart.render({  // Render method to show chart on page
  id: 'myChart',    // Reference the id of your <div> container
  data: myConfig,   // Reference the 'myConfig' settings object
  height: '100%',   // Set the height of the chart
  width: '100%'     // Set the width of the chart
});

It accepts an object that has 4 properties:

1. id
2. data
3. height
4. width

height and width are optional if you would rather control the dimensions with CSS.

Reference the // comments above for further information on what these do.

4. Basic Customization of Your Line Chart

Now that you have a fully-functioning line chart running in your page, there are a few easy ways to customize the look and feel of your chart. For a deeper look into the customizations available, read ZingChart’s documentation.

Changing to a Line-Chart Variant

Previously, we saw that setting the type property to line in the configuration object rendered our data as a line chart. There are a few other values you can give type that will render the data differently, without needing to change the data structure:

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

Setting a Plot Aspect

If you include a property called plot, and give it a value of an object with property aspect, you will modify how the lines themselves are rendered:

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

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

Changing the Styling of the Lines

To change the styling of the lines independently, add properties to the individual line-objects in the series array:

var myConfig = {
  type: 'line',
  series: [
    { 
      values: [20,40,25,50,15,45,33,34],
      'line-color': #6666ff,   // Hexadecimal or RGB 
      'line-style': 'dashed',  // solid | dashed
      'line-width': 5          // In pixels
    },
    { values: [5,30,21,18,59,50,28,33] },
    { values: [30,5,18,21,33,41,29,15] }
  ]
};

Note: for property names with dashes, the key must be in quotations.

In Summary

You have learned to create and setup a line chart with your data. For more information, and to learn all that you can add to just line charts, visit the line chart page in the ZingChart documentation.

For some inspiration on charts that have already been created, visit ZingChart’s gallery, or jump directly to the line-chart examples. Feel free to hit the edit button on any of the demos, which will fork and save it to your ZingChart Studio account!

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.

By Sarah at ZingSoft

With so many different types of data, platforms, and devices to contend with in the financial services industry, it’s no wonder that JavaScript frameworks and libraries have become vital shortcuts for web development teams of all sizes. Financial services encompass everything from trading activity, to banking, to accounting, financial planning, and a lot more, so its more important than ever for web development teams to find efficient and scalable ways to present the data produced from this financial activity.

As data complexity increases across various financial sectors, so does the demand for tools that can keep up with visualizing it. This is especially true for the charts, diagrams and infographics that help to visually convey that data both internally and externally. It’s no longer enough to produce static data visualizations that look good — they must also be interactive and dynamic to reflect the nature of the data they’re representing.

For example, if you want to visualize data points at different time intervals, or want to isolate or highlight a specific chunk of data in an otherwise large dataset via zooming, or want to include a live-feed of real-time data, you’ll need a tool that produces more than just flattened chart renderings. This is where JavaScript libraries like ZingChart can make all the difference in your web development workflow by making it easy to produce interactive, dynamic data visualizations quickly.

ZingChart is a well-established, US-based charting library that has been used by companies like Adobe, Nasdaq, Fidelity Investments, K&H Bank, ING Bank, and London Stock Exchange. It gives web developers the power to create highly interactive and responsive charts, diagrams and infographics for their apps and websites with only a few lines of code. With over 35 chart-types and modules, including chord, pareto, and gauge chart types, ZingChart is uniquely suited to help developers visualize a wide range of financial data.

From time series data, to zooming, real-time feeds, tooltips, and shared interactions, ZingChart is packed full of functionality that’s meant to make the job of producing data visualizations much easier for experienced web developers. It also integrates well with many popular frameworks, including Angular, React and PHP.

If you’d like to see live examples of financial data visualized with ZingChart we have many! Take a look at our Interactive Sales Dashboard demo, our Mixed Line/Pie Dashboard demo, our Mixed Time Series demo, our Zoomable Stock demo, our Animated Waterfall demo, our Mixed Whisker Bar Stock demo, our Stepped Area Crosshair demo, our Animated Dashboard with Tooltips demo, or our Stock and Volume Chart with Blended Scales and Interactive Crosshairs demo to start.

To learn more about how ZingChart can help improve and streamline your team’s data visualization workflow, visit our site at https://zingchart.com, or get in touch with us. We’re a team of experienced developers who are passionate about data visualization, and we’d like to help you figure out custom solutions for your team’s finance-related use cases.

I also encourage you to check out the blog post I wrote about how our sister product, ZingGrid, can also help streamline your development team’s data visualization workflow for financial data. ZingGrid is a mobile-friendly, CRUD-ready JavaScript library for creating interactive data grids and data tables. Together, ZingGrid and ZingChart form a powerful suite of data visualization products that are sure to help take the headache out of visualizing financial data for your development team.

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.

by Josh at ZingSoft

The video below, ‘Your First Chart’, is the first video in our ‘Getting Started’ series where I will show you how to implement key ZingChart features from the ground up. Below the video, we have included a written version of what was covered in the video.

The chart below is the one I will be trying to render in this getting started tutorial.

If you hit ‘run’, you will notice that nothing renders, let’s dig in and find out why.

zingchart.render({ 
    id: 'myChart',         //Must match object defined previously
    data: chartConfig,     //Must match id created in HTML
    height: '700px', 
    width: '1200px' 
});

Looking at the ZingChart render method, there is a variable called “chartConfig”, which is a JavaScript object defined previously. This chart configuration is where all features are defined and is fully documented in our JSON configuration pages.

The second param we have is the id, “myChart”. What we need to do is create a div element with the corresponding id of “myChart” (as shown below).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
  </head>
  <body>
    <!-- CHART CONTAINER -->
    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    </div>
  </body>
</html>

I will create that element with the matching id and give it a class so I can apply some styling that has been predefined in my CSS.

If I hit enter and run the demo, you will still see that nothing is rendering. This is because I don’t have ZingChart registered to the page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
  </head>
  <body>
    <!-- CHART CONTAINER -->
    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    </div>
  </body>
</html>

The easiest way to register and download the ZingChart library on the page is from the CDN. For other ways to reference the library, try visiting our docs.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <!-- CHART CONTAINER -->
    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    </div>
  </body>
</html>

I created a script tag at the top of the page and pointed it to https://cdn.zingchart.com/zingchart.min.js. This will execute the ZingChart Javascript library on the page making methods like zingchart.render() globally available.

When we run our demo again, we should see an empty chart.

The chart is empty because we have not defined any values. The minimum attributes we need to render a chart are the type and values attributes within a series. series is an array of objects that contain values arrays. Reference below.

...
    series: [
      {
        // plot 1 values, linear data
        values: [23,20,27,29,25,17,15],
        text: 'Week 1',
      },
      {
        // plot 2 values, linear data
        values: [35,42,33,49,35,47,35],
        text: 'Week 2'
      },
      {
        // plot 2 values, linear data
        values: [15,22,13,33,44,27,31],
        text: 'Week 3'
      }
    ]
  };

If you include these values arrays (as shown above) and run the demo, you will see your charts rendered to the page.

Check back in later for our next video in our ‘Getting Started’ series, ‘Data Sources and ZingChart’.

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.

This is the first post in ZingChart’s Stopwatch Features series. The purpose of this series is to highlight 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 you can add different types of animations to your line charts. 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:

1. Create a basic HTML layout that will render your chart
2. Add an object within your Javascript to contain your data, properties and animations
3. 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!

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.

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 it 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 is 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 main object should look like the code below but try switching out the values with any number between 1 and 13. I have provided the animation characteristics 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
      }
   }
};

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.

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.