DEV Community: Nika

Beautiful Dark Mode Dashboard for Analytics

Nika — Wed, 15 Apr 2020 14:20:29 +0000

This pen shows how to create a dashboard with a pivot table and charts on your web page and apply a dark theme to it.

JavaScript Data Visualization in Jupyter Notebook

Nika — Thu, 09 Apr 2020 14:38:05 +0000

Have you ever tried to make notebooks and the JavaScript environment work together well?

I'd like to share my story of how I was trying to make JavaScript and notebooks friends.

But why would anyone want to use JavaScript in Jupyter? Let's reveal the motivation behind this idea.

Working in the notebook with Python, you may face the need to use the data visualization library that might not have a version for Python. Sure, Python has a rich ecosystem and chances that you'll find an alternative solution are quite high. But what if above all other libraries you'd like to use exactly this one you like most?

The first thing that comes to mind is to use a JavaScript kernel. And this sounds absolutely logical. But following this approach and trying importing npm modules to my notebook, I encountered a lot of troubles in doing so. JavaScript kernels seemed to be great for running code that doesn't depend on third-party library's usage.

There can be many other reasons to use JavaScript instead of Python. And regardless of the nature of these reasons, JavaScript developers deserve to experience the benefits of using this environment in full.

Searching for other approaches to use a JavaScript-based data visualization library in a notebook, I almost became despair. And that was the moment when I came across Observable.

What is Observable

As its creators say, Observable is a magic notebook that helps you make the most of your data. For me, it's indeed magical: running JavaScript code in this web-based environment turned out to be easy, as well as importing a custom library.

For the sake of accuracy, it's worth saying that Observable uses not plain JavaScript but rather its "flavor". You can read about all the syntax features here.
Observable notebooks offer features you'd expect from a traditional notebook:

Quick prototyping of visualizations
Running code in cells is accompanied by visual outputs

But the thing that makes Observable different is the concept of reactivity.

How often do you face an exception once you run a cell and it didn't contain a variable which the current code is dependent on? I bet quite often. This is what can be solved by bringing reactivity to the cells. Reactivity means the following: once a certain cell is changed, every other cell that references it is updated as well to reflect the applied modifications. Plus, there is no need to refresh the page once you edit code. The output is changed in real-time.

To dig deeper, you can read about topological order. I hope you’ll find it fascinating and innovative as I do.

Differences between Jupyter Notebooks and Observable

Before we dive into the practical part of this article, here are fundamental differences you should pay attention to:

The first difference that you may find unusual is that the output is always above the code you run.
The way you write a multi-line statement. To run it in a single cell, you need to surround it with curly braces.
In contrast to Jupyter, cells are not executed in top-to-bottom order. As previously mentioned, the order depends on the connections between cells' contents.

Data visualization with Flexmonster and Observable

I was surprised at how gracefully this project stitches together the paradigm of notebooks and JavaScript development. Out of curiosity, I started experimenting.

Firstly, I imported Flexmonster - the library for web reporting using the module for importing external libraries to Observable.

Next, I've defined a <div> container using an HTML template literal. After, I've created an instance of a pivot table which would help me to summarize raw data. To see the pivot table tool rendered, I've run the cell. Then I set a report by dragging and dropping the fields on the grid, filtered the records and highlighted values with colors. And all this interactively.

Note that if you're editing the report interactively, you need to save the results to JSON via the Toolbar button. This JSON can be inserted into the pivot table configuration or uploaded via the setReport API call.

Let’s check out the results we achieved so far:

Live demo

The code is worth a thousand words. You can fork my notebook and play with it. I encourage you to come with your unique ways of exploring data with Flexmonster and Observable.

Feedback

Please share your thoughts in the comments below. I'd be happy if you shared your experience in using Observable and other ways to avoid clumsy workarounds on making third-party libraries work in the Jupyter environment.

We've just launched WebDataRocks Pivot Table on Product Hunt! 🎉

Nika — Wed, 18 Dec 2019 11:05:34 +0000

Hey there, Dev.to community!

We are working on a free data visualization tool for developers and want to share it with you!

We do hope you’ll find it useful for your project.

Let me introduce the product in a few words.

WebDataRocks Pivot Table is an embeddable, rich-featured JavaScript library for visualizing data and it’s analysis. You can customize it to your report logic and app’s UI.

Who this library is for

It’s a real find for everyone who needs to enrich a website or application with analytics for internal or external purposes.

What makes it special

The component is a web-based, meaning you can slice & dice your data right in the browser.
We made the tool lightweight and performant.
It’s handy for developers to embed and integrate with any frameworks and third-party libraries.
Anyone familiar with Excel will easily get used to the functionality of WebDataRocks. Since we endeavored to create a highly intuitive interface for end-users, those who have not used Excel Pivot Tables before will be able to start reporting just as fast.
Last but not least - it’s Free.

Reporting features highlights

Connecting to CSV and JSON data sources
The drag-and-drop feature for dynamic report composing
17 aggregation functions, multiple filters, and layout options
Exporting to PDF, Excel, and HTML

We've prepared a visual overview of all the core reporting features on YouTube to show you how to create your first report ✏️📝

What’s new

Here’s the list of awesome features that come with the latest updates:

Auto-calculation bar - check intermediate calculations real-time by selecting multiple cells on the grid
More connection options via UI
TypeScript type definitions for easy integration with TypeScript apps
Vue integration
React + TypeScript integration

And more!

Dive into all the release features on our blog📚

Demos

Play with the demo to get a feel of what you can do with the component.

On our CodePen, you can embrace the full variety of results you can achieve with WebDataRocks. Take a minute to check it. We hope you’ll love it!

And one more thing…

We’re live on Product Hunt today!🥰

https://www.producthunt.com/posts/webdatarocks-pivot-table

Please check out the tool and share your fair feedback about it. It would mean the world to us!

Towards Business Intelligence with React Hooks: Creating a Reporting App

Nika — Mon, 04 Nov 2019 18:07:06 +0000

The community seems to be split about React Hooks - a new concept introduced in the 16.8.0 release of React. While some developers met it with warmth, others have mixed feelings about it. One thing is certain - React Hooks is a hotly discussed topic in the React community that deserves to be studied more carefully.

In light of its popularity, I’ve decided to do my best to give you a better idea of hooks as a concept and show how to use them to build a React app empowered with an interactive dashboard for financial reporting.

Here's what you'll get as a result of completing the tutorial:

Ready?

Let’s start!

The motivation behind React Hooks

First, let’s figure out what React Hooks are all about. The main purpose of hooks is to allow using state management, side-effects and many other React features in function components.
The great about it is that you can avoid writing redundant components as containers for business logic since it can be successfully encapsulated in hooks.
For this reason, hooks come in handy when you have a lot of shared logic between components. With them, you are more likely to avoid the wrapper hell in React and flatten your component’s tree structure. Also, many note that hot reloading and optimization can be performed faster using hooks.

Plus, many developers acknowledge that it’s easier to write tests for hooks than for class components.

Finally yet importantly - function components with hooks tend to be more lightweight than their class alternatives.

It’s up to you to decide whether to use hooks in your project or not. To my mind, the power of React in general and this novelty, in particular, is that you are free to choose the world you like the most - OOP or functional programming.

Building a React app with hooks

Let's move on to gaining hands-on experience with hooks. In this section, I’d like to show you how it’s easy to create a user interface for a simple yet powerful analytic application writing minimum lines of code.

Data visualization tool for React

To meet requirements on analytical functionality (namely pivoting and charting), we'll use Flexmonster Pivot Table & Charts. Why? Currently, it’s the only JavaScript library for web reporting I could find that supports React Hooks out-of-the-box. Besides, it’s compatible with the latest version of React.

For demonstration purposes, we'll create a single-page application using the Create React App environment.

The next action is to set up a reporting tool inside our React project. For this, we need to take only three straightforward steps. If you want to skip the configuring steps and go straight to working with the library inside the React app, you can download a ready-to-use project from GitHub, run it and customize according to your needs.

But I recommend getting the feel of configuring the reporting solution by walking through the following guidelines:

After you set up a React project, run the following command to install the Flexmonster React module:

npm i react-flexmonster --save

Create a new PivotTableHooks.js file in the src folder and include FlexmonsterReact into it:

import * as FlexmonsterReact from 'react-flexmonster/hooks';

In this file, we’ll be designing our function component.
First, let's create a variable that holds the JSON data set to be analyzed later:

const dataset = [{
        "Revenue": {
            "type": "number"
        },
        "Burn Rate": {
            "type": "number"
        },
        "Net Sales": {
            "type": "number"
        },
        "Expenses": {
            "type": "number"
        },
        "Date": {
            "type": "date"
        },
        "Date Time": {
            "type": "date string"
        },
        "Discount": {
            "type": "number"
        }
    },
    {
        "Burn Rate": 0.01,
        "Revenue": 455,
        "Net Sales": 250,
        "Expenses": 55,
        "Date": "2018-02-14T07:34:08",
        "Date Time": "2018-02-14T07:34:08",
        "Discount": 45
    },
    /// ... 
]

Secondly, create references to different instances of Flexmonster, namely a pivot table and pivot charts (there can be as many of them as you wish). All these components will be the elements of our future dashboard for financial reporting:

const pivot_ref = React.useRef();
const column_chart_ref = React.useRef();
const line_chart_ref = React.useRef();
const line_chart2_ref = React.useRef();
const line_chart3_ref = React.useRef();

Next, define multiple report objects and set them to different pivot and chart instances:

const pivot_report = {
    dataSource: {
        data: dataset
    },
    "slice": {
        "reportFilters": [{
            "uniqueName": "Date.Year",
            "filter": {
                "members": [
                    "date.year.[2018]",
                    "date.year.[2019]"
                ]
            }
        }],
        "rows": [{
            "uniqueName": "Date.Month"
        }],
        "columns": [{
            "uniqueName": "[Measures]"
        }],
        "measures": [{
                "uniqueName": "Revenue",
                "aggregation": "sum"
            },
            {
                "uniqueName": "Discount",
                "aggregation": "sum"
            },
            {
                "uniqueName": "Net Sales",
                "aggregation": "sum"
            },
            {
                "uniqueName": "Gross Sales",
                "formula": "sum(\"Net Sales\") + sum(\"Discount\")",
                "caption": "Gross Sales"
            },
            {
                "uniqueName": "Gross Profit Margin",
                "formula": "(sum(\"Revenue\") - sum(\"Net Sales\") ) / sum(\"Revenue\")",
                "caption": "Gross Profit Margin",
                "format": "percentages_formatting"
            },
            {
                "uniqueName": "Burn Rate",
                "aggregation": "average",
                "active": false,
                "format": "percentages_formatting"
            }
        ]
    },
    "conditions": [{
            "formula": "#value > 6000",
            "measure": "Revenue",
            "format": {
                "backgroundColor": "#00A45A",
                "color": "#FFFFFF",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
        },
        {
            "formula": "#value > 1000",
            "measure": "Discount",
            "format": {
                "backgroundColor": "#df3800",
                "color": "#FFFFFF",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
        }
    ],
    "formats": [{
        "name": "percentages_formatting",
        "decimalPlaces": 2,
        "isPercent": true
    }]
};

return <div className="App">
            <FlexmonsterReact.Pivot ref={pivot_ref} toolbar={true} width="100%" report={pivot_report} reportcomplete={onReportComplete}  reportchange={syncFilters}/>
            <FlexmonsterReact.Pivot ref={column_chart_ref} toolbar={false} width="100%" report={report_column_chart}/>
            <FlexmonsterReact.Pivot ref={line_chart_ref} toolbar={false} width="100%" report={report_line_chart}/>
            <FlexmonsterReact.Pivot ref={line_chart2_ref} toolbar={false} width="100%" report={report_line_chart_2}/>
            <FlexmonsterReact.Pivot ref={line_chart3_ref} toolbar={false} width="100%" report={report_line_chart_3}/>
           </div>;

Each report contains valuable information about the data source, fields on the grid, formatting, filtering, sorting, and the layout's structure. As you may notice, it has a neat JSON structure that is easy to digest.

After we’ve initialized all the instances of Flexmonster, as a bonus, I suggest making them interconnected. We can achieve a real-time interaction between the dashboard’s elements by synchronizing their filters. Let’s implement the following scenario: make all the pivot charts react to changes in the filtering configurations of the pivot table. This can be done easily with the help of the reportchange event and a custom function:

const syncFilters = () => {
    if (!pivot_ref || !column_chart_ref || !line_chart_ref || !line_chart2_ref || !line_chart3_ref) return;
    // apply filters from the pivot table to all the charts
    var hierarchies = pivot_ref.current.flexmonster().getAllHierarchies();
    hierarchies.forEach(function(item) {
        column_chart_ref.current.flexmonster().setFilter(item.uniqueName, pivot_ref.current.flexmonster().getFilter(item.uniqueName));
        line_chart_ref.current.flexmonster().setFilter(item.uniqueName, pivot_ref.current.flexmonster().getFilter(item.uniqueName));
        line_chart2_ref.current.flexmonster().setFilter(item.uniqueName, pivot_ref.current.flexmonster().getFilter(item.uniqueName));
        line_chart3_ref.current.flexmonster().setFilter(item.uniqueName, pivot_ref.current.flexmonster().getFilter(item.uniqueName));
    });
}

You can take a look at how the entire code inside PivotTableHooks.js looks like.

Import PivotTableHooks to App.js and make the router handle the home page:

import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import PivotTableHooks from './PivotTableHooks';

class App extends Component {

  render(){
    return (
        <Router>
          <Route path="/" component={PivotTableHooks}/>
        </Router>

    );
  }
}
export default App;

Results

Now it’s time to run our application and see the results in action! Type in npm start in the console and open http://localhost:3000/. As you see, the pivot table and pivot charts are rendered on a single web page. Coupled together, they provide different views of the same data.

The end-users of your app can interact with such embedded analytics to produce insightful reports. Since all the dashboard’s elements are in sync, each time the data is filtered on the grid, it’s filtered in the pivot charts as well.

It's worth noting that the reports can be configured not only with code but also via the UI. Further, they can be saved in the JSON format and exported to PDF, Excel, HTML, and other formats.

Play with code

You can see the full code of the sample project on my GitHub.
To play with a dashboard and explore its functionality, you can test an alternative JavaScript sample that is available on CodePen.

Final thoughts

Today we've killed two birds with one stone - practiced creating an application with React Hooks and empowered the app with a custom embedded reporting solution that is ready to tackle data analysis challenges.

As you could conclude from your own experience, it takes little time to create such an app. To my mind, this is due to the ease of adding the pivot table using hooks. You can write a single import statement and "hook" the reporting functionality into your app in seconds.

This tutorial provides one of the numerous scenarios of working with the component. Alternatively, you can build more complex by making the pivot table retrieve the data from your SQL/NoSQL database, OLAP cube or Elasticsearch - depending on the data source you prefer the most.

Feedback

I’ll be glad to hear your feedback on the tutorial! Any suggestions for improvements are highly appreciated.

Discover more

To deepen your knowledge of React Hooks, I recommend reading an official guide on React Hooks and Hooks at a Glance - an overview for experienced React users. Also, you may like the talks from React Conf 2018 by Sophie Alpert, Dan Abramov, and Ryan Florence.

To take a closer look at the functionality of Flexmonster, I recommend exploring its live demos, tutorials on integration with frameworks and API reference.

Extending Business Intelligence Features of Kibana

Nika — Mon, 08 Jul 2019 09:31:27 +0000

Kibana as a data visualization engine

Features and capabilities of Kibana are countless. But Kibana can be best described as a powerful interface for accessing Elasticsearch data and making sense of it.

In most cases, Elasticsearch is used as a primary data store. But Kibana can collect diverse data in one centralized place and provide all sorts of eye-catching visualizations for analyzing this data.

Later on, you can bring all created visualizations together on a single dashboard - the most remarkable feature of Kibana. The main purpose of these dashboards is to get a real-time picture of your data, communicate information efficiently and share it within the team.

Besides, since Elasticsearch lies in the heart of the Elastic Stack, working with data is meant to be fast and delightfully easy. In general, all products of the Elastic Stack are effective in terms of development time spent for configuring.

Popular use cases

Most common use cases of a joint work of Elasticsearch and Kibana are log analytics, reporting KPIs, collecting server metrics, security analytics, various business intelligence tasks and many more.

Kibana is widely used in numerous industries: finance, marketing, education, energy and public services, government, healthcare, manufacturing, commerce, media and entertainment, software and technology, telecommunication, travel and a lot more.

The largest companies in the world use Kibana and benefit from it. And this is not without reason. Hundreds of use cases prove that Kibana and Elasticsearch empower organizations to make data-driven decisions.

Open-source nature of Kibana

Kibana is an open-source product and this fact has both advantages and disadvantages. A huge plus is that the product is continuously evolving and becoming better. The community around it is indeed vibrant and active. Many developers are contributing to the development of Kibana's additional capabilities as a product for analysis and visualization. One of the minuses is that such development makes it difficult for developers to keep up with every new major update and make their products compatible with the latest version of Kibana.

Plugins

Among the plugins I’ve managed to test, there is one that notably differs from the others. I’m going to cover its most noteworthy features which may improve your data-driven strategies.

Reporting tool for Elasticsearch

Flexmonster implements the feature which many people longed to see among the available Kibana widgets, namely data pivoting.

Of course, there are plenty of ways to visualize your data in charts, graphs, and maps but you don’t always need exactly these types of presentation. From time to time you need to slice data and explore it interactively before sending to charts.

The main purpose of this plugin is to enable you to extract insights from the data hidden in Elasticsearch documents by displaying it in a summarized view on a grid.

Besides, due to its design, it looks like a native module.

What makes this plugin appealing for analysts?

Availability of all the main reporting features through the UI. Especially I’d like to note the user experience - when working with this tool, everything seemed intuitive and clear.
Ability to personalize the component in the way that fits your requirements.
Interactivity. Both in the field list and on the grid, you can drag and drop fields to change the slice of the data you want to show in the report. Each time you do it, you can see a totally different picture of your data.
A choice of aggregation functions.
Sorting. The values on the grid and members of the hierarchy can be sorted with a few clicks.
Filtering. One can filter data by members and values.

Pivot Charts. There are two modes of the component - the charts and the grid. You can switch between them via the toolbar. This is comfy because you can present the same data in multiple views in a short time.

And what may developers be interested in?

Easy connecting to the available Elasticsearch indices without need to waste time on a long setup.
Ability to save all results. Reports can be stored as JSON files and uploaded later into a component through UI.
Ability to export reports both via the UI. Most popular formats are available: PDF, Excel, CSV, HTML, Image.

This is only a surface analysis of the component’s features which, from my perspective, look promising at first sight.

How to create reports

With the available features, it’s possible to compose a tabular report of any complexity.

Besides, the report’s configuration can be changed anytime later by slicing and dicing the data interactively.

To concentrate on the most important aspects of data, metrics can be highlighted with conditional formatting.

Let me demonstrate how I’ve built a report after installing the plugin to Kibana. Open the gif in a new tab to see the entire process:

That’s it! As a result, I’ve got a carefully crafted report which is ready to be shared across departments.

Personal impression

In my judgment, the process of creating reports is time-saving and allows looking at metrics from different angles. Another thing I’ve noticed is that the component works smoothly and nicely handles large volumes of data. It would be great to add this tool to the dashboard or Canvas alongside with other visualizations.

Final thoughts

Here I’ve shared with you my opinion about Kibana as a powerful data visualization tool and introduced a pivot table plugin which, hopefully, will help you generate intelligible reports based on Elasticsearch documents.

And what are your favorite features of Kibana? Do you use any plugins that help you analyze the data? To your opinion, what features for reporting and visualization would you like to have in Kibana?

I’ll be happy to hear your thoughts.

Thank you for reading!

What to check next

Visualization with free JavaScript Libraries: WebDataRocks and ChartJS

Nika — Tue, 04 Jun 2019 13:37:19 +0000

Today I'd like to share my experience of creating a powerful data visualization tool by using two free JavaScript libraries.

Mastering data visualization is a crucial skill for your career advancement that is easy to overlook in our fast-paced digital world. The ability to present the data in an understandable form and answer important questions about the business is highly appreciated in any field. As a type of data visualization, data dashboards are incredibly instrumental for communicating insights.

Hopefully, at the end of the tutorial, you'll learn how to power up your project with an interactive and customizable dashboard which helps track specific business metrics.

To complete this tutorial, you only need to have basic JavaScript programming skills.
In case you are eager to see the demo right now, here is the link to it.

Data visualization tools

Let’s start with exploring the functionality of the first tool I’ll be using, namely a pivot table component.

WebDataRocks is a JavaScript pivot table which easily integrates with React, Angular, and AngularJS frameworks. It lets you create reports based on the CSV & JSON data and export them to PDF, Excel or HTML.

The first thing you may notice is the component’s interactiveness: you can add the fields via the field list to compose a report and drag and drop them right on the grid to get a completely new view of the data. Also, it’s possible to drill through the cells to see the raw data, apply filters and sort the records by members or values.

All these features help slice and dice your data with ease. I encourage you to explore the functionality by playing with its demo.

To my mind, this tool is perfect both for developers and the end-users: there are a lot of advanced features available via the JavaScript API and the reporting features accessible from the UI.

What I liked the most is the variety of customization options for all tastes. I've managed to change the component's theme and change the icons of the toolbar.

The second tool is a charting library which you most likely heard of or even used in your projects.

Chartjs is an open-source JavaScript charting library that integrates with Vue and React with the help of wrappers.

It’s incredibly popular among developers these days and there are reasons for that.
The main features for which ChartJS is loved by developers:

It’s lightweight - ships at only 10 KB.
Charming visualizations that can spice up any data visualization project.
Charts are responsive and work smoothly on any device.
Everything is customizable via API - animations, tooltips, legend, and colors. Also, you can control the interaction with each element of the chart.

Another feature I’d like to draw attention to is its brief yet comprehensive documentation. Looking through the articles, I’ve managed to find everything I needed to work with charts. The section about the data structure in each tutorial is especially useful - the information it contains helped me to find out everything about the data format required for certain types of charts.

All in all, whether you are a beginner or a professional developer, it will be easy for you to use ChartJS.

Now let’s head over to practice!

📝 Add WebDataRocks

Install a pivot table by downloading a package into your project or simply by using the WebDataRocks CDN:

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"> <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script> <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

Create a container where the pivot table should be rendered:

<div id="pivot-table-container"></div>

Define a function which returns the JSON data. I recommend specifying the data types in the first object explicitly:

function getData() {
    return [{
            "Channel": {
                "type": "string"
            },
            "Segment": {
                "type": "string"
            },
            "Profit": {
                "type": "number"
            },
            "Actual Expenses": {
                "type": "number"
            },
            "Budgeted Expenses": {
                "type": "number"
            },
            "Date": {
                "type": "date"
            }
        },
        {
            "Channel": "Other",
            "Segment": "Stores",
            "Profit": 455,
            "Actual Expenses": 250,
            "Budgeted Expenses": 55,
            "Date": "2015-02-14T07:34:08"
        },
        {
            "Channel": "Other",
            "Segment": "Stores",
            "Profit": 156,
            "Actual Expenses": 501,
            "Budgeted Expenses": 55,
            "Date": "2015-02-14T07:34:08"
        }
    ]
}

Initialize the pivot table with some basic configurations, including the data source and container:

var pivot = new WebDataRocks({
    container: "#pivot-table-container",
    toolbar: true,
    report: {
        dataSource: {
            data: getData()
        }
    }
});

📘 Define the slice to show on the grid

As soon as you fill the pivot table with the data, define a slice which is a subset of your data that should be displayed in the report. Put the hierarchies to the rows, columns, and define the measures with suitable aggregations. If you need a composed aggregation, create the calculated value for the measure.

Here is an example of the slice:

"slice": {
    "reportFilters": [{
        "uniqueName": "Date.Month"
    }],
    "rows": [{
            "uniqueName": "Channel"
        },
        {
            "uniqueName": "Segment"
        }
    ],
    "columns": [{
            "uniqueName": "Measures"
        },
        {
            "uniqueName": "Date.Year"
        }
    ],
    "measures": [{
        "uniqueName": "Profit",
        "aggregation": "sum"
    }]
}

🖌️ Highlight important values

If you need to focus on individual values of the report, for example, on the highest and lowest levels of revenue, now is the best time to do it. Apply conditional formatting via the UI.

Or add conditions to the report:

"conditions": [{
        "formula": "#value > 2000",
        "measure": "Profit",
        "format": {
            "backgroundColor": "#66BA5F",
            "color": "#FFFFFF"
        }
    },
    {
        "formula": "#value < 500",
        "measure": "Profit",
        "format": {
            "backgroundColor": "#D32F2F",
            "color": "#FFFFFF"
        }
    }
]

💻 Install ChartJS

The simplest way is to include the library by using its CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></>

Then you need to create two separate containers for the charts:

<canvas id="lineChart"></canvas>
<canvas id="doughnutChart"></canvas>

Don't forget to specify the IDs so as to tell the library where the charts will be rendered.

📊 Initialize charts

To bind the components together, we need to wait until the pivot table is successfully rendered and filled with the data, request this data, pre-process it accordingly to the format required for the line and doughnut charts, and create the charts. In case any changes are applied to the pivot’s report, we need to send the updated data to the charts.

Let’s see how to implement this behaviour.

Define two functions - createLineChart() and createDougnutChart(). To keep things simple, I’ll show how to define one of these functions - the other can be implemented in a similar way.

In createLineChart(), firstly, you need to get the data from the pivot control by using the getData() method which retrieves the data and asynchronously passes it to its callbackHandler and updateHandler. These two handlers define what should happen once the pivot table is created and updated correspondingly. If you want to specify the slice, you can pass it to getData() as a property of the options argument.

function createLineChart() {
    webdatarocks.getData({
        "slice": {
            "rows": [{
                "uniqueName": "Channel",
                "sort": "asc"
            }],
            "columns": [{
                "uniqueName": "Measures"
            }],
            "measures": [{
                "uniqueName": "Profit",
                "aggregation": "sum"
            }]
        },
    }, drawLineChart, updateLineChart);
}

Secondly, you need to define the function which draws the chart and pass it to getData() as callbackHandler.

function drawLineChart(rawData) {
    var data = prepareDataFunction(rawData);
    var data_for_charts = {
        datasets: [{
            data: data.data,
            borderColor: "rgba(193,46,12,1)",
            fill: false,
            backgroundColor: "rgba(193,46,12,1)",
            label: data.label
        }],
        labels: data.labels
    };
    options = {
        responsive: true,
        legend: {
            position: 'right',
        },
        title: {
            display: true,
            fontSize: 18,
            text: 'Profit by Channel'
        },
        scale: {
            ticks: {
                beginAtZero: true
            },
            reverse: false
        },
        animation: {
            animateRotate: false,
            animateScale: true
        }
    };
    var ctx_linechart = document.getElementById("lineChart").getContext("2d");
    line_chart = new Chart(ctx_linechart, {
        data: data_for_charts,
        type: 'line',
        options: options
    });
}

Similarly, define the function which redraws the chart once the report is changed in some way.

function updateLineChart(rawData) {
    line_chart.destroy();
    drawLineChart(rawData);
}

In the demo, you can see the implementation of prepareDataFunction which iterates over the records and prepares the data for the line and doughnut charts.

I’d like to mention that the ability to choose whether to use bezier curves for a line chart or not is cool. It’s known that disabling this functionality improves performance a bit because drawing a straight line is less costly on resources.

🎨 Enjoy the dashboard

As a result, you have a top-notch data dashboard that lets you quickly capture insights and interact with your data - try filtering the data to see how the slice is changed both in the report and on the charts.

You can add it to any project, including React, Angular, and Vue. The reports from the table can be exported to PDF and HTML.
Besides, both components of this dashboard are free which makes them suitable for startups.

Thank you for reading!

I’ll be glad to see your results :)

Play with the demo

See the full code on CodePen 💡

Useful links

About WebDataRocks:

About Chartjs:

How to Create a Business Data Dashboard in React

Nika — Mon, 27 May 2019 16:39:15 +0000

Have you ever tried to create and embed a data dashboard into your React application? If so, you may know that finding the right data visualization tools that correspond to the requirements of a particular project can be challenging. Let me outline the main requirements:

Performance is above all. The dashboard should run smoothly on any browser and device.
Easy integration with the underlying infrastructure of the application.
A multitude of supported data sources for data analysis (CSV, JSON, databases).
The dashboard should provide essential reporting features such as:

Aggregating raw numbers.
Interactive filtering by dates and values
Sorting in ascending & descending order as well as the ability to define custom sorting rules.
Grouping data under separate dimensions.
Drilling through the data.

Crucial data visualization features include:

A wide range of charts that can be used for comparing values, showing the composition or distribution of the data, analyzing trends over time or expressing relationships between variables.
Interactivity. An end-user should be able to interact with the elements on charts.

Customization options such as styles & themes.
Exporting results to PDF & Excel.
Event system. To define custom scenarios of interaction with the components, events should be supported.

Today I'd like to share with you my thoughts about using tools that meet the above-mentioned demands and work together like a charm.

As a second part of the article, I’ll walk you through the process of creating a dashboard in the React application. All you need to use are two JavaScript libraries and a little bit of your imagination :)

What Will You Get

The dashboard consists of two parts - analytical and visual. The first one is a pivot table which is responsible for performing aggregating and filtering the raw data that I pull from the MongoDB database, the second one - a charting library for displaying this data in the form of appealing charts.

To my mind, these two components are inevitable parts of any dashboard. While the pivot table takes upon itself all the necessary data transforming, the charts make this data easier to perceive for the audience.

Here's a preview of the dashboard you will get as a result of accomplishing the tutorial:

It's worth mentioning that you can save your results afterward: the pivot table allows generating reports in PDF, Excel, CSV, HTML and PNG formats and charts can be exported to PDF or an image.

Have no time for reading the entire tutorial? Jump straight to the last paragraph and find a link to the CodePen demo to play with.

Let's start with introducing the libraries.

Pivot Table

Flexmonster Pivot Table & Charts is a client-side pivot table component I’d definitely recommend for using as a part of embedded BI solution. It integrates smoothly with React and other JavaScript frameworks. But, first of all, it strikes with an abundance of data sources: CSV, JSON, SQL, and NoSQL databases, and Elasticsearch. The second great thing is an interactive functionality that is accessible from its user interface. It's possible to aggregate, filter and sort data easily at runtime:

Besides, its extensive API allows defining interactive behavior and changing the appearance of the component. The thing that I especially like is the customizeCell API call - it helps to restyle the contents of particular cells. Another customization features are conditional and number formatting similar to the ones in Excel. Also, it’s possible to select one field with different aggregation functions or create custom calculated values. The latter functionality is useful when you need to track important sales and marketing metrics.

Charting Library

FusionCharts is a charting library that works with multiple JavaScript frameworks and React is one of them. It’s loved by numerous developers around the world and there are reasons for that. The thing that I liked the most is the convenience of usage. You can display any data in spectacular charts effortlessly - the demos are ready to help you start the journey to the data visualization world. Another remarkable feature is the ability to change themes, labels, tooltips, and legends of the chart through configuring attributes.

Check out how you can visualize the hierarchical data in a treemap:

Integrating Flexmonster with FusionCharts

To make two components work together, you need to initialize them and integrate after. The entire process is quite straightforward:

Install Flexmonster dependencies.
Install FusionCharts dependencies.
Initialize the pivot table and feed the data into it.
Create your report based on this data.
Initialize charts once the pivot table is ready to provide data.

Later you’ll see that you can always return to step 4 so as to change the report, pass updated data to charts and get new insights.

Since each point requires more explanation, let’s get deeper into the details.

Installing a Pivot Table

After creating a single-page React application, you need to install Flexmonster as an npm package and render a pivot table into an HTML container:

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="fm-component"></div>


ReactDOM.render( <
    FlexmonsterReact.Pivot toolbar = {
        true
    }
    width = {
        "100%"
    }
    componentFolder = "https://cdn.flexmonster.com/"
    report = {
        {
            "dataSource": {
                dataSourceType: "ocsv",
                filename: "http://localhost:3000/data"
            }
        }
    }
    />,
    document.getElementById("fm-component"))
);

Connect Your Data Source

Now it's time to load your data into the component. Using the connector for MongoDB, I managed to establish a connection with the MongoDB database and pull the data from it. You can do the same by using this tutorial.

Create Report Based on the Data

Firstly, define which part of the data you need to show on the grid. This subset of the report is called a slice. Here you can put the hierarchies into rows, columns, measures and set all the filters and/or sorting.

I've tried filtering the data by months to show the revenue for two months.

This is an example of the slice that can be a part of the report:

"slice": {
    "rows": [{
        "uniqueName": "Date.Month"
    }],
    "columns": [{
        "uniqueName": "[Measures]"
    }],
    "measures": [{
        "uniqueName": "Revenue",
        "aggregation": "sum"
    }]
}

Now your pivot table is rendered and filled with the data you want to concentrate on.

Installing Charting Library

Setting up FusionCharts is not a problem as well - following the Integration with React guide leads to the successful embedding of the component in your project. After installing its npm package, create a <div> container where the chart should be rendered:

<script src="https://cdn.fusioncharts.com/code/latest/react-fusioncharts.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-fusioncharts@2.0.1/dist/react-fusioncharts.min.js"></script>
<div id="chart-container"></div>

To be able to apply different themes, import the necessary scripts:

<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.gammel.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.candy.js"></script>

Display the Data from the Table in Charts

Each chart of the FusionCharts library accepts JSON data in a different format. Therefore, you need to pre-process the data that you request from the pivot table and provide it to the chart. There is an easy way to do it - just add the connector of Flexmonster that handles processing the data for the appropriate type of chart.
Here is a script to import:

<script src="https://cdn.flexmonster.com/flexmonster.fusioncharts.js"></script>

Now the methods from this connector are available in your application.

Next, you need to implement the following logic:

Wait till the pivot table is rendered and ready to provide data (you can listen to the reportcomplete event for this).
Request the data from the report by using the flexmonster.fusioncharts.getData() API call.
Prepare this data and pass it to callbackHandler and updateHandler where the chart is created for the first time and updated correspondingly.

Here is an example of defining the createChart() function:

function createChart() {
    flexmonster.fusioncharts.getData({
        type: "doughnut2d",
        "slice": {
            "rows": [{
                "uniqueName": "Customer Satisfaction"
            }],
            "columns": [{
                "uniqueName": "[Measures]"
            }],
            "measures": [{
                "uniqueName": "Requests",
                "aggregation": "sum"
            }]
        }
    }, drawChart, updateChart);
}

function drawChart(data) {
    var chartConfigs = {
        type: 'doughnut2d',
        width: '500',
        height: '350',
        dataFormat: 'json'
    };
    data.chart.caption = "Customer Satisfaction";
    chartConfigs.dataSource = data;
    ReactDOM.render( <
        ReactFC {
            ...chartConfigs
        }
        />,
        document.getElementById('chart-container')
    );
}

function updateChart(data) {
    var chartConfigs = {
        type: 'doughnut2d',
        width: '500',
        height: '350',
        dataFormat: 'json'
    };
    data.chart.caption = "Customer Satisfaction";
    chartConfigs.dataSource = data;
    ReactDOM.render( <
        ReactFC {
            ...chartConfigs
        }
        />,
        document.getElementById('chart-container')
    );
}

And attaching the createChart() function to reportcomplete as an event handler:

reportcomplete = {
    createChart
}

These snippets show how to create a single chart on the page but you can define as many charts as you need in a similar way.

Adding Extra Visual Features

Need to personalize the appearance of your dashboard? You can either change colors of particular elements of the charts/pivot table or apply pre-made themes to them. Or even both :)

Personally, I find the teal theme of Flexmonster one of the most eye-catching. And to make the charts fit the palette of the pivot table, I specified the color palette for data plot. You can configure charts through attributes.

Results

Save your results and check out how the chart interacts to the changes you apply to the report:

Bringing it All Together

Today you’ve learned how to enhance your React application with an analytical business dashboard.

To my mind, these two data visualization tools - the pivot table and charting library - totally complement each other. With their help, you are able to create an awesome dashboard in minutes. I encourage you to experiment with your data and try multiple ways of presenting the data.

Please share your results - I’ll be glad to see them!

Thank you for reading!

Demo

Play with the live demo on CodePen 👩‍💻👨‍💻

Data Visualization and Web Reporting in Angular Project

Nika — Fri, 25 Jan 2019 18:14:51 +0000

Problem & Motivation

Recently I’ve faced a challenge of finding fully customizable and easy-to-integrate web components which can serve as embedded BI tools for analysis, reporting, and visualization in my application.

And even more difficult is to find solutions that are compatible with the Angular framework and doesn’t complicate the maintenance of the application.

I guess I’m not alone in that so I’ve decided to share my experience with other developers which might face the same problem.

Today I’ll cover briefly the features of Angular and leave out other theoretical details about its the most basic concepts - I’m sure you’ll find insightful articles here in the community of dev.to and on the pages of Angular documentation.

So, let me get straight to the purpose of this review - to show how to run the analytics in an Angular application and transform the way you are creating reports with the help of two tools: a JavaScript pivot grid and a charting library.

Besides, in the light of the recent framework’s updates, it may be useful to know which tools are worth to be a part of the project that is running on the latest version of Angular.

On top of this, we’ll create a simple yet powerful report which has all the potential to help in further analysis. I can’t wait to share a demo with you.

TL;DR: jump right to the section with useful links which should help you to get your hands dirty with practice.

Why Angular?

Let me start by sharing my thoughts on what I find the best in Angular and how it makes the development a quicker and easier process.

The process of building dynamic client-side applications (single or multi-page) with Angular is accompanied with various benefits. By choosing Angular, you take advantage of the following features:

A modular design of code which makes the application’s components easy to manipulate. Consequently, the code is more organized and readable.
Decoupled components
Simplified MVC architecture
A static typing of TypeScript under the hood which provides type safety and makes the code easier to maintain and refactor.
Powerful CLI that automates the creation of an Angular application.
An active and growing community of developers that share their knowledge about the framework and solutions to problems.
Support for multiple platforms.

All the above-mentioned features lead to improved productivity in building the web, desktop, and mobile applications.

However, Angular has a high learning curve, especially when compared with React. But the efforts put into learning and mastering it are worth the results you will achieve.

Now let’s move further to the solution for web reporting in your project.

What is Flexmonster

Flexmonster is a pivot table component that is written in JavaScript. It’s suitable for web reporting and analysis of tabular and multidimensional data.

Its main advantage is compatibility with various client-side technologies including Angular and AngularJS.

To get started, you need to choose the type of data source that is used in your application. The most common one is an SQL/NoSQL database but JSON, CSV sources, and OLAP cubes are supported equally.

As soon as you’ve embedded Flexmonster into your project and loaded the data into it, you can make use of all the built-in features to start configuring your own interactive report. After all, the report can be exported to Excel, PDF, Image, and HTML.

Nextly, I’d like to outline the list of analytical features which came in handy for my reporting purposes.

Analytical features

Aggregation functions (i.e. 16 built-in functions and the ability to create custom ones)
Organizing the data is possible using sorting, grouping and filtering features
The drag-and-drop feature
Slicing & dicing
Embedded pivot charts.

How to integrate a pivot table with Angular

Personally, I find the whole process as simple as copy-paste. Here’s a tutorial which helped me to get started.

Dashboards & data visualization

If you, your users or teammates need not only aggregate the data but also visualize it, an excellent idea is to build an interactive dashboard inside the app or give an ability to do so. Many analysts are fond of dashboards since they help in tracking business metrics and making data-driven decisions. And, as a developer, you may know that it takes a lot of time to build and configure it upon the ad-hoc or recurring requests.

Let’s consider the second tool that will save you time and help your web project stand out with an interactive data visualization.

Google Charts

It’s hard to find a better charting web service in a segment of free software than Google Charts.
It removes the necessity in manipulating DOM elements with D3.js: Google Charts provides extensive APIs for generating charts based on the data. All you need to enliven your data is to include the Google Loader into a web page, create a DataTable JavaScript object, then asynchronously pass the data to it and define a function that instantiates and draws the chart.

How to load data in charts

The easiest way to pull the data from your application and send it to the charts is to use a web service called Datasource or Flexmonster Pivot Table. The former supports the Chart Tools Datasource protocol and allows sending an SQL query to a Datasource for retrieving a DataTable instance filled with data. The latter can serve as a client-side provider of aggregated data from various data sources. Using it, you don’t need to write queries to retrieve the data from the pivot grid - just call the appropriate API methods for it. Besides, this component offers JavaScript connectors which eliminate the need to write a code of data processing for some basic chart types. But, of course, you can do it if you need to implement some custom logic.

Google Charts in Angular app

Google Charts is compatible with Angular as well - I’ve managed to find a wrapper for it on npm.

This is how a dashboard with Flexmonster and Google Charts can look like:

As you see, charts and tables are not in opposition to each other. On the contrary, they shine together when combined. A dashboard has the potential to enhance the communication of the analysis results.

Summary

Today I’ve tried to analyze the benefits of Angular as a platform for building the dynamic web applications. However, one should be aware that Angular can simplify the development process as well as complicate it. Think thoroughly whether your particular project needs this framework or not.

Looking forward to hearing your feedback and suggestions.

Useful links

These guides helped me to walk through the process of integration with Flexmonster and Google Charts.

A sample of Angular project with Flexmonster and Google Charts

Feel free to fork it and play with your data :)
(I recommend opening a web page with a dashboard in a new tab/window as the embedded browser in this IDE doesn't always show the results correctly)

DEV Community: Nika

Beautiful Dark Mode Dashboard for Analytics

JavaScript Data Visualization in Jupyter Notebook

What is Observable

Differences between Jupyter Notebooks and Observable

Data visualization with Flexmonster and Observable

Live demo

Feedback

Further reading

We've just launched WebDataRocks Pivot Table on Product Hunt! 🎉

Who this library is for

What makes it special

Reporting features highlights

What’s new

Demos

Towards Business Intelligence with React Hooks: Creating a Reporting App

The motivation behind React Hooks

Building a React app with hooks

Data visualization tool for React

Results

Play with code

Final thoughts

Feedback

Discover more

Extending Business Intelligence Features of Kibana

Kibana as a data visualization engine

Popular use cases

Open-source nature of Kibana

Plugins

Reporting tool for Elasticsearch

How to create reports

Personal impression

Final thoughts

What to check next

Visualization with free JavaScript Libraries: WebDataRocks and ChartJS

Data visualization tools

📝 Add WebDataRocks

📘 Define the slice to show on the grid

🖌️ Highlight important values

💻 Install ChartJS

📊 Initialize charts

🎨 Enjoy the dashboard

Play with the demo

Useful links

How to Create a Business Data Dashboard in React

What Will You Get

Pivot Table

Charting Library

Integrating Flexmonster with FusionCharts

Installing a Pivot Table

Connect Your Data Source

Create Report Based on the Data

Installing Charting Library

Display the Data from the Table in Charts

Adding Extra Visual Features

Results

Bringing it All Together

Demo

Recommended reading

Data Visualization and Web Reporting in Angular Project

Problem & Motivation

Why Angular?

What is Flexmonster

Analytical features

How to integrate a pivot table with Angular

Dashboards & data visualization

Google Charts

How to load data in charts

Google Charts in Angular app

Summary

Useful links