« Back
in Node.js #javascript ECharts DataVisualization read.
Data Visualization with ECharts and Node.js + Express + Jade Templates

Data Visualization with ECharts and Node.js + Express + Jade Templates.

I wanted to share how I've decided to quickly pull out commonly used charts writing a heavy amount of code either in the server side controller or the Javascript on the client side. Plus, it's all in Javascript! Take that how you will.

As you can see in the main diagram, we're going to pull some data from a datastore (I used DynamoDB but in this post it's just going to be in memory) and that comes into Node as Javascript object. Then the whole heart behind this thing is that the chart options for ECharts can get very big. So I've templated the whole thing into a JSON file.

The Bar Chart JSON File

[YourApplication]/reports/barChart.json

{
    "title" : {
        "text": "Survey Responses",
        "subtext": "responses by question"
    },
    "tooltip" : {
        "trigger": "axis"
    },
    "legend": {
        "data":["#responses"]
    },
    "toolbox": {
        "show" : false
    },
    "calculable" : true,
    "xAxis" : [
        {
            "type" : "category",
            "data" : ["cat1","cat2","cat3","cat4"]
        }
    ],
    "yAxis" : [
        {
            "type" : "value"
        }
    ],
    "series" : [
        {
            "name":"#responses",
            "type":"bar",
            "data":[2.0, 4.9, 7.0, 23.2],
            "markPoint" : {
                "data" : [
                    {"type" : "max", "name": "Most answered"},
                    {"type" : "min", "name": "Least answered"}
                ]
            },
            "markLine" : {
                "data" : [
                    {"type" : "average", "name": "average"}
                ]
            }
        }
    ]
}                    

Notice that the default has 4 categories and some arbitrary numbers in the series data. We're going to change this in a second.

The Express Route

[YourApplication]/routes/index.js

var express = require('express');  
var router = express.Router();  
var responses_x_questions = require('../reports/barChart.json');  
var clone = require('clone');  
/* GET home page. */
router.get('/', function(req, res, next) {

  var chartOptions = clone(responses_x_questions);

  var categories = ["newCat1","newCat2","newCat3","newCat4","newCat5"];

  chartOptions.xAxis[0].data = categories;
  chartOptions.series[0].data = [10,20,30,40,50];

  res.render('index', { title: 'Express', data: JSON.stringify(chartOptions) });
});

module.exports = router;

Since we used require and loaded the template as an object, we can directly reference the nodes in the JSON object to adjust the categories and data that the chart will display.

This keeps our controller nice and clean. It will also keep our client code clean too as you will see in a moment.

Because we pass back this object to the client, we have to pass the model using JSON.stringify() to serialize it properly.

Update: My buddy Owen let me know that I was actually mutating the responses_x_questions object. So I cloned it using this (cloning package)[https://www.npmjs.com/package/clone] for Node. The code has been updated accordingly.

The View - index.jade

[YourApplication]/views/index.jade

extends layout

block content  
  h1= title
  p Welcome to #{title}
  #chart(style="width: 600px; height: 400px;")
  script.
    var chartoptions = !{data}

    var chart = echarts.init(document.getElementById('chart'));
    chart.setOption(chartoptions);

The key part here is !{data} where data is the value we returned from the controller. The exclamation marks tells it to preserve formatting e.g. the quotes. Now we don't have lengthy JS code to deal with on the client side either.

Final Chart Output

Let's check out what we get. We should be seeing 5 categories with the new data now:

Bar Chart from node, express, echarts and jade

Beautiful =].

comments powered by Disqus