Analytics are great for getting feedback on how your product is being received by the target audience. The more you know about end users, the better you can steer your product towards success. While there are a number of analytics options that can plug into a website or application, none of them seem to get it quite right.

Google Analytics provides a feature-rich platform that tracks a user’s experience fairly accurately but there is a bit of too much information to digest properly; sensory overload if you will.

if you will. Mixpanel does a great job of allowing users to pick and choose what they want to focus on, yet there is a limit on what you can accomplish and time is found fighting with the environment.

So what’s left? Roll your own solution with React and a JavaScript charting library.

The Use Case

I work for a company called ZingChart that provides a charting library for JavaScript developers to create dynamic charts on their website. Every day we provide support to our users as they ask questions, evaluate their options, and try the product. This makes analytics vital to improving our customers’ experience. None of the out-of-the-box solutions we evaluated were able to show us any deep correlations between our customers and their usage patterns. Eventually, we decided to roll our own analytics system and ultimately build a dashboard using our own product to visualize our data.

The Technology

React is the it framework of 2015. The web development world is crazy over it and why shouldn’t they ? With it’s easy ramp-up time, minimalist syntax, and composibility, React makes it easy to create UI-rich sites that scale fairly nicely (Facebook does use it on their own site after all). While there may be some naysayers with valid arguments against React, it is hard to disagree that framework is great for rapid prototyping, and small projects. My co-workers and I enjoy exploring new technologies and evaluating them for knowledge and to support our customers. React looked to be a great framework for exploration to explore and to build our analytics tools with.

ZingChart works fairly well with React out of the box. While React does not provide any performance gains for ZingChart through it’s Virtual DOM for the library, the ability to create composable elements is extremely beneficial in keeping our codebase DRY. To make it even easier to create charts with React, the team created a React Component to wrap around the library — https://github.com/zingchart/ZingChart-React .

<ZingChart id=”chart-1” height="500" width="600" data={configObj}/>

The Core Component allows us to utilize React and its syntax without compromising ZingChart’s functionality. We embraced the React workflow by making the component fully functional with the commonJS format to make development painless.

The Dashboard

The main goal of our project is to obtain insight into our customers’ activity across the site. We ended up creating a slew of different ways to analyze our data, but this article highlights one of the dashboards created . We designed it to view the content our users are most interested in and where they reside in the world.