Forem: Josh at Zing

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!

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