Zingchart download file name

Zingchart download file name

zingchart download file name

You can also download the ZingChart library or use a package manager, like NPM. Within that tag, you will also want to include your chart's name as an id. If you include the code within the tag above and run this file in your. Download Full EPUB Ebook here { gwd.es }. to purchase a downloadable file of the eBook (or other reading material) from a Web site (such Generally, an eBook can be downloaded in five minutes or less. color choices for charts11 Read More gwd.es charts/. gwd.es › package › zingchart. zingchart download file name

Zingchart download file name - consider, that

Creating Interactive Dashboards in Angular

Our first two posts in our recently published Angular 'How To' series were meant to show you how to create a simple chart and give you examples of different chart types and features, all in Angular.

As the third article in this series, we have created an interactive dashboard and will walk through how we created it. To make this happen, we used ZingChart, ZingGrid and ZingChart's new Angular component.

ZingChart and TypeScript

ZingChart is a JavaScript charting library that has been around for 10+ years and has over 35+ chart types and 25+ charting features. To improve our library, we created a TypeScript definition file - giving you easy access to all typings for ZingChart's extensive JSON configuration.

If you use TypeScript, this will allow you to easily verify your various chart configurations. Using this in conjunction with an IDE that supports type-ahead descriptions, such as VS Code, makes setting up new charts a breeze.


Dashboard originally created by Mike Schultz, Engineer at ZingSoft

Take a minute to check out this dashboard and view the code used to create it.

Overview

This article primarily focuses on how to create the actual charts and grids themselves.

To create this dashboard, we need to look at a few key areas:

  1. Starting & Creating your Angular Application
  2. Formatting your JSON config and Styling your Charts
  3. Creating and Formatting Your Grid

Setting Up Your Angular Application

To start, we will look at how we set up our new Angular application. Much of this is already outlined in our first article, How to Create Charts in Angular.

When setting up a new Angular app, we recommend using the angular-cli.

We have to add ZingChart's library, the ZingChart Angular package as well as the ZingGrid library using NPM.

From here, we have to add ZingChart's chart module to our App's module.

Inside of the , we will be defining and customizing our chart. ZingChart's TypeScript definition file will allow us to validate our JSON configuration moving forward. For now, we will setup everything outside of our chart's JSON.

Lastly, we need to add our charts into . The example below only shows the div for a single chart. I recommend taking a moment to review the .html and .scss file to see exactly how we setup the HTML of this dashboard using Material design and standard CSS.

Formatting your JSON Config & Styling Your Dashboard

ZingChart renders charts based on data structured as JSON.

Without diving too deep into the capabilities of ZingChart, we will highlight some of ZingChart's basic features and customizations. Pretty quickly, you should see that changing a few properties can drastically change the contents of a chart.

If you take a look at the TypeScript component found here, you will notice we start off by importing our list of customers. This will be used later when we are adding data to our grid component.

From here, we will be creating our JSON config for each chart. You will see additional code meant to do things like fill in dummy data, grab the current date, etc.

For our first chart, we will define our config as and call the ZingChart library using .

The two essential properties required to render a chart are:

Additional important properties include:

  • - allows for customization of the X-axis.
  • - allows for customization of the Y-axis.
  • - affects the data on your chart (global change).
  • - allows for customization of the tooltip feature.
  • - allows for customization of the chart's legend.

Review the full list of ZingChart's JSON config to see what is available to you.

Below is the configuration we created for the initial yellow-background line chart in our demo. Review the comments in the code to see how each property changes the way the chart is displayed.

Notice that you can include most standard CSS classes for any object within a config.

This is the output

When looking at other chart configurations in this demo, you will quickly see that they all follow a similar format with changes to chart type, data, scales and other customizations.

Within this file, lines 66 through create a gauge chart and lines through create a radar chart. The three of these configurations output the three charts shown below.

We won't go over the other charts and how they were created, but if you run into any issues trying to recreate these - visit our JSON config page or reach out to support@gwd.es with any questions you may have.

Creating and Formatting Your Grid

You might also notice there is a grid in this dashboard. This is powered by a newer library called ZingGrid.

This free-to-use web-component has made it extremely easy to create data tables and grids.

The entirety of the Grid can be created and displayed by downloading the library (completed earlier) and adding a few lines of HTML to our code. Below shows exactly how we used the ZingGrid component to render a grid to the page.

By adding various attributes to the component, we are able to seamlessly add and remove features from our grid.

Each of these attributes are explained below:

  • - important attribute is what tells ZingGrid what to include as data. It can be mannually added or fed from a dataset.
  • - defines the regex expression for starting data binding.
  • - defines the regex expression for ending data binding.
  • - allows for pagination.
  • - defines how many entries are shown on a single page.
  • - defines what options the user has when changing page-size.
  • - inclusion of this disables viewport resizing.

Check out ZingGrid's site for a full list of features and attributes.

In this particular case, we defined the customer data in our TypeScript file. By importing the gwd.es file into and setting we were able to set in our component and let ZingGrid do the rest!

Ending Thoughts

ZingChart and ZingGrid have both made it incredibly easy to visualize your data through the use of various charts and grids. I highly recommend downloading the library for free, copying this demo or any of the other + demos these libraries have available.

Good luck!

Источник: [gwd.es]

Zingchart download file name

3 thoughts to “Zingchart download file name”

Leave a Reply

Your email address will not be published. Required fields are marked *