Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Aggregate, Analyze, and Display Data in a Chart Using Free Software

DZone's Guide to

How to Aggregate, Analyze, and Display Data in a Chart Using Free Software

In this article, we give a quick tutorial on how to take in, analyze, and visualize data in a few simple steps. Read on to get started!

· Big Data Zone ·
Free Resource

Hortonworks Sandbox for HDP and HDF is your chance to get started on learning, developing, testing and trying out new features. Each download comes preconfigured with interactive tutorials, sample data and developments from the Apache community.

Having lots of great tools for data analysis, the task of finding the perfect match is quite complicated. To get some insight, it is often useful to have a look at the data from different vantage points. Today, I’d like to share a really simple tutorial explaining how to summarize your data and visualize in a grid and a chart.

I was choosing between data analysis tools available for free and made the following choices:

  • WebDataRocks for data aggregation. This tool is a web pivot table capable of summarizing the data and displaying it in a table.
  • Google Charts for data visualization. This tool is a charting library capable of drawing interactive charts for browsers and mobile devices.

What I want to achieve is a dashboard where data is shown in a table and a chart at the same time. Moreover, when I change the data inside the table, I’d like the chart to be updated automatically.

Now I’m going to describe the whole process step-by-step. At the end of this tutorial I will share a link to a CodePen sample with all the configurations, so if you feel like you're not understanding one of the steps, just scroll down to the end and follow the CodePen link. So, here we go:

Step 1: Get Your Data on the Page

My data is a JSON array of objects. I’ll start by adding it directly to the page:

function getJSONData() {
return [
    {
        "Category": "Chocolate Bar",
        "Revenue": 4477.50,
        "Quantity": 2250
    },
    // ...
    ]
}


Step 2: Aggregate the Data and Display it Inside a Table

I’ve read WebDataRocks Quick Start and created the table based on my data:

var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
    "dataSource": {
      "data": getJSONData()
    },
    "slice": {
        "rows": [
            {"uniqueName": "Category"}
        ],
        "columns": [
            {"uniqueName": "Measures"}
        ],
        "measures": [
            {"uniqueName": "Revenue"},
            {"uniqueName": "Quantity"}
        ]
    }
  }
});

Here you can select which data goes to rows, columns and measures, so I’ve put Category to rows, Revenue, and Quantity to measures. Inside the table, Revenue and Quantity are displayed as already summarized.

Step 3: Connect the Charting Library

After checking out Google Charts Quick Start, I’ve added the loader for the Google Visualization API:

// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

Step 4: Show the Data From the Table on Charts

I’ve used the pivot.googlecharts.getData method to get the data from the pivot table and created an Area chart:

function createGoogleChart() {
  if (googleChartsLoaded) { 
    pivot.googlecharts.getData({ type: "area" }, 
       drawChart, 
       drawChart
    );
  }
}

function drawChart(_data) {
  var data = google.visualization.arrayToDataTable(_data.data);
  var options = {
  title: "Values by Categories",
    legend: { position: 'top' }
  };
  var chart = new 
  google.visualization.AreaChart(document.getElementById('googlechart-container'));
  chart.draw(data, options);
}


Hurray! My JSON data is aggregated, shown inside the pivot table and displayed as charts within 4 simple steps. Here is my CodePen sample containing all the code: https://codepen.io/TetianaHryshko/pen/YjKLZN

When I change the data in the pivot table, e.g. apply filtering, the Area chart changes as well. This gives an opportunity to analyze the data inside the table and see the graphical changes at the same time. I hope you guys will find this tutorial useful for your cases!

Hortonworks Community Connection (HCC) is an online collaboration destination for developers, DevOps, customers and partners to get answers to questions, collaborate on technical articles and share code examples from GitHub.  Join the discussion.

Topics:
data visualization ,data aggregation ,big data ,tutorial

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}