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…

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

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.

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…

by Mike Schultz

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.

Let’s see how it works…

Creating a chart

A Hello World

by Josh Arias

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

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…

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…

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.

by Josh at ZingSoft

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…


A JavaScript Charting Library

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store