DEV Community: Mike

An update: Still coding on the road. Now Off-Grid.

Mike — Tue, 19 Jan 2021 05:59:26 +0000

So it's been a while since I last posted this: https://dev.to/mikeschultz/coding-out-of-a-van-in-new-zealand-kk1. More than a year has gone by, a pandemic, world chaos, and a lot of us are now working remotely...so I figured I'd give an update.

Since being a digital nomad overseas has been on hold at the moment, I've since then moved back to the USA and converted an SUV into a home/work/adventure vehicle. Still working full-time, still maximizing my free time enjoying the outdoors and taking pictures. So here's a little breakdown of how I'm able to live and work out of it!

The Office

The number one question I always get: "How are you able to work on the road full time?"

In the passenger seat, I've rigged up a removable desk using a dash mount made specifically for my vehicle, numerous ball joints and clamps, and a trip to home depot to cut some wood. I use that 12.9" iPad Pro as a second monitor via sidecar on my MacBook Pro. It's fairly solid, and gives a decent amount of rest support!

Power

"Ok but does your car battery drain?" Since I live out of this vehicle I need a lot of power for my computer, fridge, and all my camera gear. Instead of just relying on the car battery, I've installed a full solar system that you would find on one of those "van life" builds. 300 Watts of solar power charges up my 100AH Lithium Battery. The 1000W inverter allows me to plug my household supplies and electronics. As an added bonus, the solar controller also charges my car's alternator battery if it ever dies!

I've mounted the 3x100 Watt solar panels on top of my roof top tent. And yes, having the tent open increases the efficiency of the panels when angled towards the sun!

Internet

For internet, I tether off of my cellular AT&T and Verizon unlimited plans, depending on the strength of the signal. I typically use an app called "Gaia" to not only find places to camp, but to also gauge cell signal strength. I tent to stay close to towns during the work week, and have successful luck with getting 20-30mb/s consistently. And yes, I do have zoom meetings daily and rarely have any connectivity issues.

I also have a cellular booster on top of the roof to give me a couple bars more in rural areas.

And that's all of the necessities I need to do my work on the road.

As for the rest of it...

I know "living on the road" is always a loaded topic: Showers, bathrooms, cooking, fridge, staying safe, etc, but I wanted to just focus on the working on the road aspect of it for this article. If you are interested in more, I have been posting a fair amount of my road life content on my Instagram and TikTok recently with a bunch of answers and pictures. (Say hi if you do land on there!)

Quick Tour on TikTok

Thanks for the read and happy to answer questions on here as well!

ZingChart Angular Examples

Mike — Mon, 10 Feb 2020 18:24:49 +0000

Whether you are looking for a solution to quickly create a chart, or you are looking to build complex dashboards within your Angular application, ZingChart's new Angular component is the perfect solution for you.

Getting Started

To help get you started with our library in your Angular application, check out the first post in this series - How to Create Charts in Angular.

If you run into any issues using ZingChart, its component or any of the 35+ chart types, don't hesitate to reach out to support@zingchart.com.

Customized Charts

The ZingChart Angular component has the same capabilities that the regular library has, allowing you to fully customize charts to your brand, like this Angular Gauge Chart!

https://stackblitz.com/edit/zingchart-angular-example-gauge

Listening to Events

We can attach a listener to any of ZingChart's events and use that information outside of ZingChart, in our Angular application. The following example shows how we can create a custom tooltip that is external to the chart.

https://stackblitz.com/edit/zingchart-angular-example-events

Data Binding

By data binding a chart's configuration, we can control the data and how it's appearance from Angular. The dropdown demonstrates different datasets being loaded into our chart with our data attribute being bound via Angular.

https://stackblitz.com/edit/zingchart-angular-example-data-binding

35+ Chart Types

The Angular component is compatible with all chart types that ZingChart offers, including plugins such as maps!

https://stackblitz.com/edit/zingchart-angular-example-map

Creating Charts in Angular

Mike — Thu, 06 Feb 2020 18:14:09 +0000

We at ZingChart have been hard at work, creating a TypeScript Definition File and Angular component for our library!

ZingChart — The last data visualization library you’ll need

ZingChart is one of the original JavaScript charting libraries, and continues to innovate and improve on its feature set. With over 35 different chart types, a rich API of methods/events to integrate with, and a dedicated support team, ZingChart provides an all-in-one solution for your data visualization needs.

ZingChart has over 35 different base chart types and hundreds of configurations

Typescript Definition File

We have created a TypeScript definition file for the ZingChart library! All of the typings for our JSON configuration are now readily available, with descriptions for each attribute. This allows our developers who use TypeScript in their applications to validate their chart configurations with ease. This works well with IDEs such as Visual Studio Code that support type-ahead with descriptions. It is automatically included in our zingchart-angular component.

Getting started with Angular

If you don’t have an Angular Application, you can easily set one up with the angular-cli

$ ng new my-app

First we add the package to our Angular Application via NPM:

$ npm i zingchart-angular

We then add our chart module to our App's module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { ZingchartAngularModule } from 'zingchart-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ZingchartAngularModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Inside of the app.component.ts, we define the look and feel of our chart. We can use ZingChart's TypeScript Definition file to validate the JSON config:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'zing-app';
  config:zingchart.graphset = {
    type: 'line',
    series: [{
      values: [3,4,5,5,6,7,5,3]
    }]
  };
}

Finally, we add our a chart into our markup inside of app.component.html.

<div>
  <zingchart-angular [config]="config" [height]="500"></zingchart-angular>
</div>

https://stackblitz.com/edit/zingchart-angular-helloworld

That was it! Only a few lines of code, and we have a fully reactive chart that updates when your data does.

Reactivity

The zingchart-angular component is reactive to all of its properties — from the chart configuration to the data. If any changes are sent to the component, the chart is re-rendered automatically.

https://stackblitz.com/edit/zingchart-angular-reactivity

Events and Methods — Tying your app together with ZingChart

The revised ZingChart component is all about connectivity to your Angular component. Events are automatically bound to the function you provide via props, and all available ZingChart methods are available when you access a specific component via refs.

Events

By binding a function to a known ZingChart event prop, we can perform custom actions when a chart emits an event. In the example below the event node_mouseover is emitted and its contents are displayed.

<zingchart-angular [config]="config" [height]="300" (node_mouseover)="onNodeMouseover($event)"></zingchart-angular>

https://stackblitz.com/edit/zingchart-angular-event

I highly recommend checking out all of ZingChart's events to see what is available to you.

Methods

Methods can be called when a ref is given to the component, and a known method is called from the instance of the component. Below is an example of dynamically adding a plot, from a custom button created in Angular.

  <zingchart-angular #chart1 [config]="config"></zingchart-angular>

...
    export class AppComponent {
      ...

    obtainData() {
      console.log(this.chart.getdata());
    }

https://stackblitz.com/edit/zingchart-angular-method

I recommend reviewing ZingChart's available methods.

Get Charting!

With a better understanding of ZingChart and its Angular component, all you need is to include it into your application. Head over to our Github repository for the full documentation of the component: https://github.com/zingchart/zingchart-angular

A pioneer in the world of data visualization, ZingChart is a powerful Javascript library built with big data in mind. With over 35 chart types and easy integration with your development stack, ZingChart allows you to create interactive and responsive charts with ease.

Connecting Data to a Data Visualization Dashboard with Vue

Mike — Mon, 18 Nov 2019 21:08:06 +0000

This is a continuation article in a series of data visualization examples utilizing the JavaScript framework Vue.js, ZingChart and ZingGrid. We highly recommend starting from the first article to follow along more easily.

In our previous article, we walked through an example of how to create a data visualization dashboard with ZingChart and ZingGrid. We’re continuing this example by connecting our dashboard to real data, and handing the data management and fetching from the server to ZingGrid.

If you’d like to follow along, a finished example from our last article is the best place to start. You can grab that code from the Github repository under the part-2-complete branch: https://github.com/zingsoftinc/vue-dashboard

Creating a REST API for our dataset

We’ll start by creating a REST API server to host our transactions data. We recommend using json-server to quickly deploy endpoints in less than a minute flat!

First install the JSON server via NPM:

$ npm install -g json-server

We can then run the server directly from our transactions.json
file with:

json-server --watch /path/tp/transactions.json

We can see if the endpoint is working by making a GET call to http://localhost:3000/transactions to obtain a full list of our data.

Utilizing ZingGrid to manage the data

In the previous article of this series, we handled data flow from the App.vue down to each component, and obtained the data from a single file.

Diagram of data flow from the App.vue down to each component

In this article, we’re utilizing ZingGrid’s REST API feature to obtain our dataset from a remote data source. We’ll then communicate the data to all other components on the page, via the main parent App.vue.

Diagram of data flow from the App.vue using a REST API

Connecting ZingGrid to a remote data source

ZingGrid works out of the box with most REST API endpoints. We simply configure our data with zg-data and zg-param components.

<zg-data>
 <zg-param name="src" value="'http://localhost:3000/transactions"></zg-param>
 <zg-param name="searchKey" value="search"></zg-param>
 <zg-param name="loadByPage" value="true"></zg-param>
</zg-data>

Let’s breakdown each zg-param attribute:

src — the location of the REST API endpoint where our data resides.
searchKey — when using the built-in search functionality on ZingGrid, we specify the query parameter needed to search in the REST API. In our example, json-server has the query parameter of search.
loadByPage - Load by page enables paginated queries on your REST API. This helps reduce the amount of data being transferred by only requesting what is in view. Suppose /transactions has a total of 2000 entries, and ZingGrid has a paginated view of 10 entries. Without loadByPage, we would be downloading all 2000 entries initially, instead of the 10 that are just in view!

Connecting our calendar filter to ZingGrid

In order to utilize an external component to handle our data in conjunction with ZingGrid, we need to be a little creative.

First we pass the start and end dates from our calendar to ZingGrid in our App.vue file.

<v-date-picker mode="range" v-model="range"/>
<transaction-details-grid :start="range.start" :end="range.end" />

In our TransactionDetailsGrid, we create a new computed property queryString to reflect a query string with timestamp values, to be appended to our ZingGrid’s data component.

json-server has equality operations built in the REST API. For our calendar, we want to create a date range around each timestamp.

computed: {
  queryString() {
    return `timestamp_lte=${this.end.getTime()}&timestamp_gte=${this.start.getTime()}`;
    }
  }

Finally, we modify our src being passed to ZingGrid, and append our queryString value to it.

<zg-param name="src" :value="'http://localhost:3000/transactions?' + queryString"></zg-param>

Now every time our calendar date-range is updated, ZingGrid re-fetches the data!

Connecting our charts to our data

We now need to connect the data obtained from ZingGrid to our charts.

We hook into ZingGrid’s event system to notify our Vue application when data changes, is filtered, or is searched upon.

We attach event listeners to ZingGrid, and pass a localized callback to emit an event back up to App.vue.

const getData = () => {
  const data = this.$refs.myGrid.getData({
    rows: 'visible'
  });
  return this.$emit('ondatachange', data);
};

this.$refs.myGrid.addEventListener('data:load', getData);
this.$refs.myGrid.addEventListener('grid:search', getData);
this.$refs.myGrid.addEventListener('grid:filter', getData);

Back up in App.vue, we listen for the ondatachange in our TransactionDetailsGrid, and update our local transactions data.

<transaction-details-grid
 :start="range.start"
 :end="range.end"
 @mouseover="handleEntryHover"
 @ondatachange="updateData" />
updateData(data) {
 // We perform a copy of our data so we can modify it locally.
 this.transactions = JSON.parse(JSON.stringify(data));
},

https://glitch.com/~vue-dashboard-live-data

Our dashboard should be fully functional, with our new remote dataset! Note that filtering and searching in ZingGrid also modify the state of the charts and what values are being represented. This allows for powerful data exploration with ZingGrid and ZingChart, with the ability to sift through large sets of data. You can view the finished product here: https://glitch.com/~vue-dashboard-live-data

That concludes our series for how to create a data visualization dashboard with Vue! If you’d like to see more Vue data visualization content, feel free to ask away in the comments!

Creating charts in React just got easier

Mike — Mon, 11 Nov 2019 16:21:15 +0000

Adding charts to your React Application just got easier thanks to ZingChart’s revised React component.

The ZingChart team recently updated the zingchart-react component to create visualizations by adding more features and direct access to events and methods right on the component! We’re excited to show you how it works!

ZingChart — The last data visualization library you’ll need

ZingChart has over 35 different base chart types and hundreds of configurations

Add charts to your React.js application in less than a minute

If you don’t have a React Application, you can easily set one up with create-react-app

$ npx create-react-app myApplication

First we add the package to our React Application via NPM:

$ npm i zingchart-react

We then include the component in the project file where we want a chart rendered.

import ZingChart from 'zingchart-react';

Finally, we add a chart into our markup to be rendered!

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        type: 'bar',
        series: [{
          values: [4,5,3,4,5,3,5,4,11]
        }]
      }
    }
  }
  render() {
    return (
      <div>
        <ZingChart data={this.state.config}/>
      </div>
    );
  }
}

https://glitch.com/~react-chart

That was it! Only a few lines of code, and we have a fully reactive chart that updates when your data does.

Taking it a step further

The above example is a minimal example of how simple it is to create a chart in ZingChart, however the library is powerful enough to make more complicated and interactive visualizations, too.

https://glitch.com/~zingchart-react-example

REACTivity

The zingchart-react component is reactive to all of its properties — from the chart configuration to the data. If any changes are sent to the component, the chart is re-rendered automatically.

https://glitch.com/~zingchart-react-reactivity

Events and Methods — Tying your app together with ZingChart

The revised ZingChart component is all about connectivity to your React component. Events are automatically bound to the function you provide via props, and all available ZingChart methods are available when you access a specific component via refs.

Events

<ZingChart ref={this.chart} data={this.state.config} node_mouseover={this.nodeInfo}/>

https://glitch.com/~zingchart-react-events

List of all ZingChart events: https://www.zingchart.com/docs/api/events

Methods

<ZingChart ref={this.chart} data={this.state.config}/>
...
this.chart.current.addplot({
  data: {
    values: [5,5,3,6,7,3,4,6,7],
    text: "My new plot"
  }
});

https://glitch.com/~zingchart-react-methods

List of all ZingChart methods: https://www.zingchart.com/docs/api/methods

All of the above examples can be found on our glitch collection:

https://glitch.com/@zing-soft/react

Get Charting!

With a better understanding of ZingChart and its React component, all you need is to include it into your application. Head over to our Github repository for the full documentation of the component: https://github.com/zingchart/zingchart-react

Coding Out of a Van in New Zealand

Mike — Thu, 07 Nov 2019 01:21:24 +0000

We all know about remote jobs and how productive you can still be outside of an office setting. But what about working remotely? And I mean really remotely.

I have been traveling the world for the past 6 months, working remotely as a Software Engineer. Currently I have been in New Zealand for the past couple months, traveling the islands, taking tons of pictures, and working remotely - all from the comfort of my campervan. Striving for that ultimate work/life balance, optimizing any free time to go exploring, and to enjoy my passion of photography.

I get asked quite often how I'm able to work on the road, and how I deal with keeping connected. I figured I'd share my experience so far and what's unique to coding remotely! I won't bore you with the details of utilizing slack for communication, and how to deal with timezones as I'm sure every digital nomad article out there touches on that. Instead, I'll share the quirks and challenges that I deal with on the road - from finding places to work at to searching for the next place to spend the night.

Places to work

When you're on the road...the road is your workplace! I find a balance between coffee shops, libraries, or even just out of the campervan very flexible.

And you get to work out of some pretty awesome places:

(ok this is actually in Melbourne, Australia, but it'd definitely one of the coolest libraries I've been to).

But it's not all picturesque. I've definitely had some late nights in airports, buses, and hostels trying to hotfix some bugs.
or when it's rainy outside and you're confined to the campervan...

Internet

This is a TOUGH one. When you're mobile, you're relying on public wifi (cringe 😬. Don't worry, I practice safe public wifi usage.) and tethering off of your mobile phone if you have signal.

For security concerns and speed, I tried to always tether off my phone. In New Zealand, pay-as-you go phone plans average about $70-80NZD (~$50USD) for 40-50GB. However once you run out, additional data becomes astronomical. I've seen $20NZD for every GB extra!

Needless to say, rationing of data became very real and I have a new appreciation towards the movement of towards Progressive Web Applications and keeping things RAIL - that is to make the web smaller, faster, and more efficient.

I ended up hopping network providers every time I ran out of data. Also have my US sim card (Google Fi) for emergency data.

(sim card graveyard)

Places to spend the night (or just work from).

New Zealand is one of the easiest places to live in a campervan - Freedom Camping.

All over the country are designated camping spaces where you can freely park, camp, and sleep from! These spaces most often have amenities such as toilets, dump stations (for your van), and sometimes have free wifi!

I found these sites the best to hunker down and get some long hours of work done without any distractions.

(Yeah, thats a freedom camping site. Cellular signal was great too!)

There are also a number of paid campgrounds with showers, kitchens, secured wifi (sometimes unlimited), and common lounging areas. I do recommend these for when you want a little bit of "luxury".

The Work-Life balance

This may seem like a lot of effort, just to travel - and you're right it is. In fact, I'm quite exhausted just typing all of this out! While coding and Software Engineering are my professional passions, photography and hiking are my personal passions. Traveling to the ends of the earth, waking up at 2am to hike to the top of the mountain just to catch the sunrise. It's what keeps my mind fresh and helps to bring new ideas to my life and career.

Quick plug for my instagram: https://www.instagram.com/pixelsight/

It's a journey not for everyone, but hopefully I've inspired some of you to try and find that work-life balance, no matter how extreme it is! Thanks for reading!

Creating a Data Visualization Dashboard with Vue

Mike — Tue, 29 Oct 2019 19:47:03 +0000

Creating custom dashboards is hard work! Whether it be an analytics dashboard to monitor your site’s traffic and social presence, or a SaaS dashboard to see how your product is growing, creating a dashboard from scratch can be quite complex and time-consuming.
This is the second article in our series about integrating ZingChart with Vue to create an interactive dashboard. If you’d like to learn more about the zingchart-vue component, check out the first article in this series.

With the use of third party libraries, we can alleviate most of the heavy lifting and create dashboards that have complex interactivity with minimal effort. This article will be an overview of the libraries needed to create almost any type of dashboard.

Vue.js — We will be using the popular Vue JavaScript framework to build our dashboard around. With its robust data handling and rich developer community with UI widgets, this is the perfect framework to set the groundwork.
ZingChart — To create dashboards with unique visualizations, we will need a library that covers all use cases. ZingChart provides over 30 different chart types including the basics such as Line, Bar, and Pie Charts, but also more unique visualizations such as WordCloud, Gauge, and Radar. The library even has maps!
ZingGrid — Dashboards aren’t complete without a data table to display details about our data in a logical format. A complementary product to ZingChart, ZingGrid will provide a useful set of features to handle our data including filtering, sorting, and searching. With its unique compatibility with ZingChart allowing rich interactivity between the two products, it’s a no brainer to add this library to our arsenal.

Visualizing your Data with ZingChart

We can easily customize and add charts to our dashboard using the zingchart-vue component. The component allows for easy data-binding, and exposes out ZingChart’s events and methods to the component level. For more information about the ZingChart Vue component, check out the previous article in this series: https://medium.com/@zingchart/interactive-charts-with-vue-js-e72de19fa6cd

Inspecting your Data with ZingGrid

Charts and data visualizations are great for understanding your data, but when you need to see specific details of an event it can be tedious. Data grids and tables are useful for organizing large amounts of data and for finding specific entries in that data.

Adding Data to the Grid

Unlike ZingChart, ZingGrid is built as a web component and is portable in any framework including Vue. We can easily add data to our grid with the data attribute and the .prop modifier, which stringifies the data before being sent to ZingGrid. This not only allows ZingGrid to retain a fresh copy of the data, but automatically converts it to a format that web components can understand.

<zing-grid :data.prop="myData"></zing-grid>

Filtering, Sorting, and Pagination, Oh My!

A list of data entries isn’t useful unless there is a way to navigate through the list easily. ZingGrid provides multiple useful features that let you easily sort through your data. Best of all, adding these features is as simple as adding an attribute to the <zing-grid> element.

<zing-grid :data.prop="myData" filter sort pager></zing-grid>

Interactivity with Other Components

Like ZingChart, ZingGrid allows for deep integration to its environment with API methods and events. You can learn more about these in the docs: https://www.zinggrid.com/docs/api-methods

Now that we have a basic understanding of the tools we’re going to utilize, let’s build our dashboard!

Getting Started

For this tutorial, you will need the vue-cli installed on your computer. This will allow us to quickly scaffold, run, and test our dashboard with ease. If you don’t have this cli tool installed, head over to https://cli.vuejs.org/#getting-started to start there.

Once it’s installed, we’ll create a project with our dashboard starter code.

vue create --preset zingsoftinc/vue-dashboard#starter myDashboard

After this tutorial you should be familiar with:

Basic data flow and manipulation in a dashboard
Creating ZingChart and ZingGrid in Vue
Communicating across multiple widgets in the dashboard

The starter code contains styling and structure already defined to help you focus on the important highlights of creating your dashboard.

Project Overview

myDashboard/
├── src/
│   ├── App.vue
│   ├── main.js
│   │── data/
│   │  └── transactions.js
│   ├── components/
│   │  ├── LatestTransactionsChart.vue
│   │  ├── TransactionDetailsGrid.vue
└───└──└── TransactionBreakdownChart.vue

App.vue - The root Vue component which contains our dashboard
main.js - The entry point for our Vue application
components/ - Various charts and grids that we will learn how to connect together
data/ - The dataset that our dashboard will build off of. In future tutorials, we'll learn how to connect and filter data to remote sources, including databases.

The starter code has three components pre-defined and styled for you. Our focus will be on how to manipulate our dataset to pass data to each component, and to tie-in interactions across those components.

Our Dataset

For this tutorial we'll be creating a sales analytics dashboard based on a set of transactions. Our dataset is simply an array of these objects:

{
  "id":1,
  "first_name":"Ketti",
  "last_name":"Latham",
  "email":"klatham0@time.com",
  "company":"InnoZ",
  "amount":"1529.29",
  "timestamp":1554550724000,
  "license_type":"saas",
  "purchase_type":"new"
}

Important attributes :

license_type - Either SaaS, internal, website, or enterprise
purchase_type - Either new, renewal, or cancellation (if the user has opted out from a renewal)

Our Components

We will be focusing on three different components in this tutorial, comprised of ZingChart and ZingGrid.

LatestTransactionsChart.vue - A line chart comparing the amount earned in dollars over time
TransactionBreakdownChart.vue - A pie chart breaking down the occurrence of each transaction type
TransactionDetailsGrid.vue - A grid listing each transaction during the period

Step 1: Passing Data to the Components

For our components to render any charts or grids, we need to pass the data to each component individually since specific charts and grids may need to have the data formatted differently.
First we'll import our data from the transactions file into our App.vue, along with our chart components. We also register the components in our Vue app to be used.

// App.vue
<script>
  import transactions from './data/transactions.js';
  import LatestTransactionsChart from "./components/LatestTransactionsChart.vue";
  import TransactionBreakdownChart from "./components/TransactionBreakdownChart.vue";
  import TransactionDetailsGrid from "./components/TransactionDetailsGrid.vue";
export default {
    name: 'app',
    // Register the components to be used
    components: {
      LatestTransactionsChart,
      TransactionBreakdownChart,
      TransactionDetailsGrid,
    },
    data() {
      return {
        transactions,
      }
    }
  }
</script>

Then we'll pass the transactions object into each of our three components.

// App.vue
<template>
  <div id="app">
    <section class="dashboard">
      ...
      <div class="dashboard__row">
        <latest-transactions-chart ref="latestTransactions" :entries="transactions"/>
        <transaction-breakdown-chart ref="transactionBreakdown" :entries="transactions"/>
      </div>
      <div class="dashboard__row">
        <transaction-details-grid :entries="transactions"/>
      </div>
    </section>
  </div>
</template>

Let's dive into each of our three components to manipulate the data to render out a chart or a grid.

Latest Transactions Chart

For the "Latest Transactions Chart", we need to format our transactions array into a single dimensional array containing a pair of values: the timestamp, followed by the dollar amount for each transaction.

// LatestTransactionsChart.vue
<template>
  <zingchart :data="chartConfig"></zingchart>
</template>
<script>
  export default {
    props: ['entries'],
    computed: {
     values() {
        return this.entries.map(o => {
          return [o.timestamp, parseFloat(o.amount.slice(1,-1))]
       });
     },
     chartConfig() {
       ...
       series: [{
         values: this.values,
       }],
       ...
     },
    },
  }
</script>

We write both the values and chartConfig as computed properties rather than data so we can automatically track any changes that occur to the data from the parent App.vue component.

Transaction Breakdown Chart

Similarly for our "Transaction Breakdown" Chart, we need to format the data as an array of objects, with each value containing the total value of the transaction types. ZingChart will calculate the overall percentage for us, but we'll need to do a bit of summations over the transactions:

// TransactionBreakdown.vue
<template>
  <zingchart :data="chartConfig"></zingchart>
</template>
<script>
  export default {
    props: ['entries'],
    computed: {
     values() {
      const categories = this.entries.reduce((acc, transaction) => {
        acc[transaction.purchase_type] = acc[transaction.purchase_type] || 0;
        acc[transaction.purchase_type]++;
        return acc;
      }, {});
      return Object.keys(categories).map((name) => {
        return {
          values: [categories[name]],
          text: name
        }
      })
     },
     chartConfig() {
const colors = [
        {
          backgroundColor: '#04A3F5',
          hoverState: {
            backgroundColor: '#45D6C4'
          }
        },
        {
          backgroundColor: '#98D1EE',
          hoverState: {
            backgroundColor: '#45D6C4'
          }
        },
        {
          backgroundColor: '#295A73',
          hoverState: {
            backgroundColor: '#45D6C4'
          }
        },
      ]; 

       ...
        series: this.values.map((o,index) => Object.assign(o, colors[index])),
       ...
},
    },
  }
</script>

Transaction Details Grid

As for the "Transaction Details" Grid, ZingGrid natively accepts an array of objects so all we have to do is pass the data!

<transaction-details-grid :entries="transactions"></transaction-details-grid>

Step 2: Adding an External Component to Control Our Data

If all went smoothly you should see the charts and grids populated with a full year's worth of transactions. But what if we only wanted to view a month's view of transactions? We would need to control our data at the App level to do so.
We will be adding an additional library to help us select dates via a calendar component:

https://vcalendar.io/

First let's install the library to our project:

$ npm i v-calendar

And add the following lines to our main.js, just before the new Vue constructor is invoked.

import VCalendar from 'v-calendar';
Vue.use(VCalendar);

Inside of our App.vue file we'll need to add a new field in our data object to keep track of the start and end dates that the calendar is displaying. We will default to showing the current month's transactions.

data() {
    return {
      transactions,
      range: {
        start: new Date().setDate(1), 
        end: new Date() 
      }
    };
  }

We will be using the range property to control both the start and end dates with one widget. Next, we'll add the v-calendarcomponent to our template, binding both the start and end dates to our new data fields.

<header>
  <h4>Date Range</h4>
  <v-date-picker mode="range" v-model="range"/>
</header>

A new computed property called filteredTransactions will be needed to return a subset of the transactions, based on the date range.

{
...
computed: {
    filteredTransactions() {
      return this.transactions.filter(entry => {
        return (
          entry.timestamp >= this.range.start.getTime() &&
          entry.timestamp < this.range.end.getTime()
        );
      });
    },
...
}

Finally, we'll update all the components to accept the new filtered date range:

<template>
  <div>
    <latest-transactions-chart :entries="filteredTransactions"></latest-transactions-chart>
    <transaction-breakdown-chart :entries="filteredTransactions"></transaction-breakdown-chart>
    <transaction-details-grid :entries="filteredTransactions"></transaction-details-grid>
  </div>
</template>

The charts and grids should now show a subset range of the transactions! This also demonstrates how data modeling works in Vue: one-way reactivity from the parent to its children.

Step 3: Adding Interactions Between the Components

Our dashboard is looking more complete, but to take it a step further we can add shared interactivity between the components. Both ZingChart and ZingGrid come with rich API Methods and Events, from reacting to MouseEvents to modifying state from external methods.

We will be demonstrating how to control mouseover events from ZingGrid to highlight the same entry in both our Latest Transactions and Transaction Breakdown Charts.

To begin, we need to listen for ZingGrid's row mouseover event. ZingGrid calls this a record:mouseover event. We perform this in the component's mounted() lifecycle callback once the grid has finished rendering.

// TransactionDetailsGrid.vue
mounted() {
    // Attach an event listener to ZingGrid
    this.$refs.myGrid.addEventListener('record:mouseover', (e) => {
      this.$emit('mouseover', e);
    });
  }

Since we have encapsulated each of our chart and grid components in their own respective components for code clarity, we need to emit this event back up into our App.vue parent component.

Back in our App.vue file, we need to delegate the mouseover
event from ZingGrid to our children charts.

First we define a callback that the mouseover event should listen to.

// App.vue
<transaction-details-grid @mouseover="handleEntryHover"></transaction-details-grid>

In our new method handleEntryHover, we reference both our charts and call on the ZingChart methods that are available thanks to the zingchart-vue component.

{
...
methods: {
  handleEntryHover(e) {
    // Obtain references to the charts
    let latestTransactions = this.$refs.latestTransactions;  
    let transactionBreakdown = this.$refs.transactionBreakdown;
  }
}
...
}

Since ZingGrid emits CustomEvents, the information that we need will be under e.detail. Inside, we see a rich amount of information about the grid and the event.

For our Latest Transactions chart, we want a guide to appear on the chart when the user hovers over the corresponding row in our grid. To do so, we need to call the chart's setguide method and pass it an object containing the specific key/value (x-axis value), or in this case the timestamp.

// Set our guide corresponding to the correct timestamp
latestTransaction.setguide({
  keyvalue: e.detail.ZGData.data.timestamp
});

For our Transaction Breakdown chart, we will need to determine the row entry's purchase_type and the corresponding index that the data is defined when we created the chart.

We utilize the getseriesdata method of the chart to obtain the data used to create the chart to find the index. Once found, we then call the showhoverstate to change the pie slice color to highlight the entry in focus. Recall that the data format of the pie chart is an array of a single entry. The showhoverstate method requires a nodeindex so we default at 0.

const indexInFocus = transactionBreakdown
  .getseriesdata()
  .findIndex(o => o.text === e.detail.ZGData.data.purchase_type);

transactionBreakdown.showhoverstate({
  plotindex: indexInFocus,
  nodeindex: 0
});

All together:

handleEntryHover(e) {
  // Obtain references to the charts
  let latestTransactions = this.$refs.latestTransactions;
  let transactionBreakdown = this.$refs.transactionBreakdown;
// Set our guide corresponding to the correct timestamp
  latestTransaction.setguide({
    keyvalue: e.detail.ZGData.data.timestamp,
  });
// Highlight the pie slice in focus
  const indexInFocus = transactionBreakdown
    .getseriesdata()
    .findIndex(o => o.text === e.detail.ZGData.data.purchase_type);
  transactionBreakdown.showhoverstate({
    plotindex: indexInFocus,
    nodeindex: 0
  });
}

And there you have it! Interactions across ZingGrid and ZingChart.

Check out a completed, working example of this Vue dashboard in the master branch of our starter code at https://github.com/zingsoftinc/vue-dashboard and at https://glitch.com/~vue-dashboard-starter

We took our example a step further and created a sales dashboard with custom sparklines and more interactions and features. You can check out a working example and the code for it here: https://glitch.com/~vue-dashboard

Next time we'll show you how to connect a live database, to search, filter, and query directly from your dashboard.

To be notified of future articles follow us on Twitter!

Interactive charts with Vue.js

Mike — Wed, 16 Oct 2019 09:21:34 +0000

Deciding which JavaScript charting library to include in your Vue.js application can be challenging due to the number of data visualization options out on the web.

ZingChart stands out by having over 100 unique events and methods to control, modify, and interact with Vue. The library not only includes over 35 unique chart types, but also has enough customization that you can create your own visualizations! If that's not enough, ZingChart recently released their official Vue.js component that wraps all of the library's functionality to be used easily in a Vue Application.

https://github.com/zingchart/zingchart-vue

Let's see how it works…

Creating a chart

A Hello World

A simple example of creating a chart using the zingchart-vue component is the best way to demonstrate the ease of the library.

<zingchart :data="{type: 'line', legend: {}, series: [{values: [4,5,3,3,3,4,5]}}"></zingchart>

The component takes a data configuration object specified by ZingChart to describe the features and values that a chart should take. The above example describes a line chart with some values to be plotted, along with a legend.

https://glitch.com/~vue-chart

A More Advanced Example

The above example is a simple demonstration of how easy it is to create a line chart, but if we wanted something more complex and customized, the library and component allow us to do so:

Data Reactivity

The Vue component automatically updates whenever any of its attributes change. This includes series values, or anything in the configuration object.

https://glitch.com/~zingchart-vue-reactivity

Interactivity with other components

We can integrate our charts to other charts or UI components by listening to events, and modifying the chart using methods.

Binding Events

For example, if we wanted to display a node's value on hover in our Vue application, we would hook into the node_mouseover event.

https://glitch.com/~zingchart-vue-events

All events that ZingChart emits are available on the Vue component with the "@" annotation.

Modifying with methods

Alternatively, if we wanted to annotate our chart by adding a label to a specific node, we would utilize the addobject API method and create a new label:

this.$refs.myChart.addobject({
  type: 'label',
  data: {
    "text": "Something interesting!",
    "background-color": "#3f51b5",
    "font-size": "14px",
    "font-weight": "normal",
    "font-color": "#FFFFFF",
    "padding": "10%",
    "border-radius": "3px",
    "offset-y":-30,
    "shadow": false,
    "callout": true,
    "callout-height": "10px",
    "callout-width": "15px",
    "hook":"node:plot=0;index=4"
  }
});

https://glitch.com/~zingchart-vue-methods

All methods are readily available on the component's object to be called.

Get Charting!

With a better understanding of ZingChart and its Vue component, all you need is to include it into your application. Head over to our Github repository for the full documentation of the component: https://github.com/zingchart/zingchart-vue

Stay Tuned

Over the coming weeks we will be creating a dashboard built with Vue and the zingchart-vue component to demonstrate the flexibility and power of both tools. To receive updates of when we publish new articles, follow us on twitter:

https:/twitter.com/zingchart