Blog Developers

What Are the Differences Between the Ignite UI Category Chart and Data Chart?

Infragistics Team / Tuesday, May 9, 2017

Ignite UI for JavaScript provides more than 50 different types of charts to work with.

That's a lot. And that's a good thing.

But if you are new to data visualization, choosing a chart control can be overwhelming. This post will help you choose the right control: Ignite UI for JavaScript category chart or data chart control.

Overview

The Category Chart control is for developers who are new to charting and want a quick and easy way to create great charts for their web applications. They’re a good general-purpose chart and will suit most of your needs.

The Data Chart control is a little more sophisticated. It’s for developers who are familiar with charting and need flexibility and customization in their charting component. It gives you more options to configure the chart.

The category chart control and data chart control both work seamlessly with high volume of data and give a very good performance with large data points. However, animation and composite chart is only possible in the data chart control.

Let us try to understand data chart and category chart with working examples.

Working with Category Charts

In the category chart, whatever data you render on the X axis acts as the “value” category for the chart. The Y axis displays the data. For example, suppose you want to display grades in various subjects for five students. Here, subject “name” becomes the category and will be rendered on the X axis. On the Y axis student grades are displayed.

For another example, suppose you wish to display the population of different countries for different years. Here, year becomes the category and will be rendered on the X axis. On the Y axis, the population of different countries will be displayed. The X axis will display that category and the Y axis will display data corresponding to the category.

Let us say you have population of different countries categorized in different years. On the x-axis of a category chart, you will show years, which is category here, and on the y-axis population data of different countries.

To understand it better, let us consider data source given in the below listing.

var data = [
              { "Label": "1995", "Brazil": 161, "Indonesia": 197, "United States": 266, "India": 920, "China": 1297 },
              { "Label": "2005", "Brazil": 186, "Indonesia": 229, "United States": 295, "India": 1090, "China": 1216 },
              { "Label": "2015", "Brazil": 204, "Indonesia": 256, "United States": 322, "India": 1251, "China": 1361 },
              { "Label": "2025", "Brazil": 218, "Indonesia": 277, "United States": 351, "India": 1396, "China": 1394 }
];

The above data source has a population of different countries in different year categories. Ignite UI for JavaScript category charts always treats first column of the data source as the category. Therefore, Label column would be treated as category from the above data source.

Once you have data source, all it takes two steps to create category chart. On the HTML page, you need a div element as shown in the listing below:

<div id="theChart" style="height:400px">

You can render above div element as category chart using the igCateogryChart() function of Ignite UI. You can do that as shown in the listing below:

$("#theChart").igCategoryChart({
        dataSource: data,
        chartType: 'line',
        width:"100%",
        xAxisTitle: "Year",
        yAxisTitle: "Population in Millions",
        title: "A comparison of population over time",
        subtitle: "A comparison of the population of Countries"
    });

As you see in the above listing, that igCategoryChart function takes an object as input parameter, which has many properties. Out of all properties, you are setting few properties such as

  • width: to set width of the chart
  • xAxisTitle : to set title of the X-axis
  • yAxisTitle : to set title of the Y-axis
  • title: to set title of the chart
  • subtitle : to set subtitle of the chart
  • dataSource : to set data source of the chart. Chart will render series and axes using this data source. This is set to the data, which is a JOSN object array. The data needed to bind the category chart can be a JavaScript array or a JSON object array and can be local or be may be provided by a REST service
  • chartType : to set type of the chart.

Besides, above properties, there are many other properties, which can be set to configure the chart. You can learn more about other properties of Ignite UI Category Chart here .

The above code snippet will render category chart as shown in the image below:

In above category chart, you may notice that population of different countries are categorized based on the years. On the x-axis, category year is displayed and on the y-axis population of different countries are displayed.

Among other properties, one of the most important property is chartType property, which defines what would be the type of the chart. Above chart, type is configured for type line. Besides, line Ignite UI for JavaScript category chart supports various other different types also such as :

  • line
  • column
  • point
  • area
  • spline
  • spline area
  • step line
  • step area

If you want to create a category chart with the chart type column, pass value for chartType property as column. You can create column type category chart as shown in the listing below:

$(function () {
    $("#theChart").igCategoryChart({
        dataSource: data,
        chartType: 'column',
        width:"100%",
        xAxisTitle: "Year",
        yAxisTitle: "Population in Millions",
        title: "A comparison of population over time",
        subtitle: "A comparison of the population of Countries"
    });
});

Above code snippet will render Ignite UI for JavaScript category chart with type column as shown in the image below:

Working with Data Charts

The Data Chart allows you to do high level of customization of the chart. Like category chart, adding data chart in application is also very simple and straightforward. Mainly you need to configure data source and data points to be rendered on the X-axis and Y-axis of the chart.

You can learn in detail about Ignite UI data chart here.

To understand data chart better, let us consider data source given in the below code listing. You want to create data chart in which on x-axis country name would be displayed and on the y-axis population would be displayed.

var data = [
             { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
             { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
             { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
             { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
             { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
        ];

The data needed to bind the data chart can be a JavaScript array or a JSON object array and can be local or be may be provided by a REST service. In this blog post, we are going to use local JOSN object array.

Above data source has population of different countries in different year categories. On the x-axis country name would be rendered and on the y-axis population of different years will be rendered.

Once you have data source, all it takes two steps to create Ignite UI for JavaScript data chart. On the HTML page, you need a div element as shown in the listing below:

 <div id="theChart">

Then you can convert div to a data chart by using Ignite UI for JavaScript igDataChart() function. This function takes an object as input parameter. Besides all other properties, main three properties, you need to configure are

  • dataSource
  • axis
  • series

Aside from these properties, other important properties are height, width, title, and so forth. You can read more about other properties and configuration of Ignite UI for JavaScript data chart here.

To create data chart, let us pass value of dataSource, axis, series properties to igDataChart() function as shown in the listing below:

$("#theChart").igDataChart({
    width: "100%",
    height: "400px",
    title: "Population per Country",
    subtitle: "Five largest projected populations for 2015",
    dataSource: data,
    axes: [
        {
            name: "NameAxis",
            type: "categoryX",
            title: "Country",
            label: "CountryName"
        },
        {
            name: "PopulationAxis",
            type: "numericY",
            minimumValue: 0,
            title: "Millions of People",
        }
    ],
    series: [
        {
            name: "2015Population",
            type: "column",
            isHighlightingEnabled: true,
            isTransitionInEnabled: true,
            xAxis: "NameAxis",
            yAxis: "PopulationAxis",
            valueMemberPath: "Pop2015"
        }
    ]
});

In above code listing, we are setting value of data Source, axes, series, width, height, title, subtitle of the data chart.

To configure axis, you are setting X-axis to categoryX and Y-axis to numericY. The X-axis and Y-axis types are useful to display financial, scatter, or category price series. Other possible values are category, numericAngle, categoryDateTimeX, categoryAngle, and so forth. You can learn about these values and types of charts by Ignite UI for JavaScript data chart series types here.

A data chart can have any number of series, but it must have at least one series. In the above code listing, you are creating only one series. The series type value is set to “column” in order to create a column series. If you want to create a “line” series, set the value of type to “line.” Ignite UI data chart provides more than 25 possible series types for the data chart including area, bar, and spline area. For the series valueMemberPath, you need to set property from the data array to be displayed in the chart. Here you are setting “Pop2015” property from the data source to be rendered in the data chart series. In addition, the series isTransitionInEnabled value is set to true to enable animation when the data source is assigned.

This code will render a data chart with a series type as columns, as shown in the image below:

Ignite UI for JavaScript gives you a lot of power and variety — not to mention simplicity and ease-of-use — with the Category Chart and Data Chart controls. And these are just a couple of the more than sixty Ignite UI components you can use in your apps. (And if you haven’t already, be sure to try out Ignite UI for free now.)

Dhananjay Kumar works as a Developer Evangelist for Infragistics. He is a seven-time Microsoft MVP. You can reach him on Twitter: @debug_mode .