Build A Data Visualization App with Vue

When we talk about visualization, we know we will deal with the front end. And in order for the development to go quickly and pleasantly, we need to choose the suitable tools. As for me - Vue is definitely the right one.

So what allowed this framework to win the developer’s hearts and my personally?

In fact, Vue is a very simple and straightforward framework that combines the best from leading ones (runtime performance and syntax from Angular; reactivity, the virtual DOM, composable view components, and global state management from React) and at the same time is much easier to learn and has a lot of its own features.

The idea of Vue is the ability to work with complex apps having a minimal core, and the main concepts are:

• reactivity;
• instances;
• components;
• directives;
• animations and transitions.

Vue really has a lot of features to make your development process pleasant and fun; here are the main of them:

• it is lightweight;
• has one-way data binding between components;
• has a CLI for project generations;
• has a simple syntax, and you can choose to use TypeScript or not;
• it is super adaptable and flexible;
• supports both third-party libraries and has many built-in modules for solving everyday tasks.

Personally, I'm a real fan of the last feature, because in Vue it is actually very easy to integrate new libraries and work with them, and now it will be very handy to us.

I want to show you how simple and fast you can create a data analysis app with Vue. I want to make a dashboard with a pivot table and charts that will aggregate and visualize my data. For this, I will use some of my favorite data visualization libraries - Flexmonster Pivot Table & Highcharts.

JS Pivot Table library by Flexmonster

Flexmonster Pivot is a web pivot table component that integrates with React, Angular, and, the most important for us, with Vue.js.

Of all the pivot libraries I have tried out, this one suits me the best. One of the main reasons is the intuitive interface. It took me just a few minutes to get how it works and which abilities it provides.

Another fantastic thing - you can customize almost everything, you can:

• apply report themes
• change different layouts
• change the toolbar’s appearance
• localize your pivot

But of course, if it hadn’t all the necessary features, I wouldn’t suggest you use it. The functionality of the Flexmonster Pivot provides you with everything you can possibly need while creating a report.

You can aggregate your data using a large number of proposed functions, filter and group it, and create your own report logic applying conditional formatting to your data and adding calculated fields. Anywhere you can drill-through your data to see some details.

A huge plus is the ability to import data and export a ready-made report. The range of supported data sources is extensive: ranging from simple CSV, JSON, SQL & NoSQL databases, Elasticsearch, and OLAP cubes to a Flexmonster custom data source API that allows retrieving already aggregated data from a server to Flexmonster Pivot.

This library also has built-in Flexmonster Pivot Charts, but today I will show you how to integrate a third-party chart library into your project to create an interesting dashboard.

There are actually many such libraries, but I chose the one that I used last.

Area chart by Highcharts.js

Highcharts is a modern SVG-based, multi-platform charting library that helps you add cool, fully customizable, and interactive charts to web and mobile projects.

I am very attracted to this library because it presents various types of charts and graphs. After all, this opens up many possibilities in data analysis and visualization. Here are some of them:

See live example here.

Also, the process of creating standard charts with it is a breeze. It uses JSON to define various configurations, so it’s super easy to learn, and use and you can easily configure the Highcharts with any frameworks, not just Vue!

A simple options-structure gives deep customization, and styling can be done via JavaScript or CSS, so created charts are very pleasant to work with. A nice bonus is that when a user hovers over any point on a chart, a small tooltip with some extra information appears.

And the best thing - both Flexmonster Pivot and Highcharts integrate greatly and easily with each other and with Vue, and that’s exactly what I want to show you in this article!

Integrating pivot table with chart library in Vue project

The scheme for creating such an application is very simple: we create a Vue application, add a pivot, add a chart library and configure it so that it visualizes data from the grid and we get a finished project. Let's take a closer look at each step.

For me personally, the easiest way to create a project in Vue is using СLI, but there are other options you can try - there is a great guide on their website. Flexmonster is also very easy to install using the CLI, and moreover, you can skip the first step and integrate Flexmonster with Vue right from the box. There is also a detailed guide on how to integrate pivot with Vue.

$ flexmonster create vue -r

So just with this one line we receive a Vue app with a pivot table:

new Vue({
  el: "#app",
  data() {
    return {
      report: null
    };
  },
  mounted() {
    var report = new Flexmonster({
      container: this.$refs.pivotContainer,
      componentFolder: "https://cdn.flexmonster.com/",
      licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
      toolbar: true,
      report: {
        dataSource: {
          dataSourceType: "json",
          data: getData()
        },
        options: {
          grid: {
            type: "classic"
          }
        },
        formats: [
          {
            name: "",
            maxDecimalPlaces: 2
          }
        ]
      }
    });
  }
});

After this, we can add our data to the pivot table using any convenient data source. I chose a dataset from World Health Statistics 2020 that I found on Kaggle. I will put it directly into my file and connect it to the pivot using the getData() function.

function getData() {
  return [
    {
      Location: "Afghanistan",
      Period: 2017,
      Dim1: "Total",
      "First Tooltip": 37.75,
      FIELD5: ""
    },
    ...
  ];
}

The next step is to build a report: set a slice, add filters and change an aggregation function if needed. You can easily do it via UI; in the code, it will look like this:

slice: {
  rows: [
    {
      uniqueName: "Location"
    }
  ],
  columns: [
    {
      uniqueName: "[Measures]"
    },
    {
      uniqueName: "Period",
      filter: {
        members: ["period.[2017]", "period.[2016]", "period.[2015]"]
      }
    }
  ],
  measures: [
    {
      uniqueName: "First Tooltip",
      aggregation: "average",
      format: "-15xrw9ur8dcox"
    }
  ]
},
formats: [
  {
    name: "-15xrw9ur8dcox",
    decimalPlaces: 2,
    currencySymbol: "%",
    positiveCurrencyFormat: "1$",
    isPercent: false
  }
]

Now we can run our app and make sure that we are finished with the pivot. To make a dashboard with charts let's start with adding our second library. After this step your html file should look like this:

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.highcharts.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/dark/flexmonster.min.css" />
<!--I decided to apply a green theme to the pivot for a more interesting look-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="app">
  <div ref="pivotContainer"></div>
  <div id="highcharts-container"></div>
</div>

And we came to the point where magic will happen - just with several lines we will create a beautiful and functional area chart:

function areaChart() {
  report.highcharts.getData(
    {
      type: "area"
    },
    function(chartConfig) {
      Highcharts.chart('highcharts-container', chartConfig);
    }
  );
}

This function uses the connector for Highcharts from flexmonster.highcharts.js. You can read more about this integration and supported types of charts in the documentation.

And now I will use a reportComplete event handler to know when the pivot table is ready to be a data provider for the chart:

reportcomplete: function() {
  report.off("reportcomplete");
  areaChart();
}

And that’s it! With these 3 easy steps, we can manage to have such an amazing interactive dashboard:

See live example here.

You can drag and drop rows and columns to change the hierarchies, filter data on the pivot, and show different data on charts by choosing the year you need. A fast, simple, and efficient dashboard in your Vue app is ready!

Also, you can explore this demo on JSFiddle and play with it by yourself. And please let me know if this article was useful to you!