将Amcharts与NodeJS数据一起使用

Question

I am trying to use Amcharts using data from Node JS. I am trying to pass a json as a part of the response from Node server flie to the client side that I could use feed amcharts to create a pie chart. The code is as below -

app.js

var express = require('express');
var path = require('path');
var app = express();
var port = process.env.PORT || 5000;

var delivCount  = require('./serv_delivered.js');
var serv_ontime = require('./serv_ontime.js');
var delayedCount = require('./serv_delayed.js');
var crtidelayedCount = require('./serv_crit_delayed.js');
var chartData = [{
        "country": "Czech",
        "litres": 301.9
    }, {
        "country": "Ireland",
        "litres": 201.1
    }, {
        "country": "Germany",
        "litres": 165.8
    }, {
        "country": "Pak",
        "litres": 139.9
    }, {
        "country": "Austria",
        "litres": 128.3
    }, {
        "country": "UK",
        "litres": 99
    }] ;

app.use(express.static(path.join(__dirname, 'public')));
app.set('views', __dirname + '/src/views');

var bookRouter= express.Router();
app.set('view engine','ejs');

app.get('/',function(req,res){
            delivCount(function(error, res_deliv){
                serv_ontime(function(error, res_ontime){
                    delayedCount(function(error, res_delayed){
                        crtidelayedCount(function(error, res_cdelayed){
                            res.render('index', {title: "Hellow From Render",
                                    res: [res_deliv,res_ontime,res_delayed,res_cdelayed,chartData]
                                });
                        });
                    });
                });
            });
    }); 
app.listen(port,function(err){
    console.log('running server on port'+ port);
}); 

amchart5.js

var chart = AmCharts.makeChart("pie1", {
    "type": "pie",
    "theme": "light",
    "dataProvider": [{
        "country": "Czech",
        "litres": 301.9
    }, {
        "country": "Ireland",
        "litres": 201.1
    }, {
        "country": "Germany",
        "litres": 165.8
    }, {
        "country": "Pak",
        "litres": 139.9
    }, {
        "country": "Austria",
        "litres": 128.3
    }, {
        "country": "UK",
        "litres": 99
    }],
    "valueField": "litres",
    "titleField": "country",
    "balloon": {
        "fixedPosition": true
    },
    "export": {
        "enabled": true
    }
});

Can anyone help me use the chartData that I am sending from app.js to create a pie chart?

Adding screenshot validating correct data -

Answer 1

if your server is returning the correct values, and you're using a external js file, you could do something like this.

function createChart(chartData){
    var chart = AmCharts.makeChart("pie1", {
        "type": "pie",
        "theme": "light",
        "dataProvider": chartData,
        "valueField": "litres",
        "titleField": "country",
        "balloon": {
            "fixedPosition": true
        },
        "export": {
            "enabled": true
        }
    });
}

and then call the function from ejs file

<script>
    createChart(<%- res[4] %>);
</script>

as you declare your res as an array and your chart data is on the index 4, this should work. ps: maybe you need to use JSON.stringify in your array and pay attention on the load order of scripts.