Как передать данные MySQL на Fusion Chart с использованием JavaScript и Node.Js? - PullRequest
Новая
       93

Как передать данные MySQL на Fusion Chart с использованием JavaScript и Node.Js?

0 голосов
/ 14 февраля 2020

Здесь я загрузил два скриншота. Я хочу отобразить данные MySQL в этом индикаторе. Я использую JavaScript и Node.Js для подключения к базе данных MySQL.

Код Fusion Chart 

    <script type="text/javascript">

    let fusionCharts= document.querySelector('#chart-container')   

    FusionCharts.ready(function() {

        var fusionCharts = new FusionCharts("chart-container",{
            "type": "angulargauge",
            "renderAt": "chart-container",
            "width": "450",
            "height": "250",
            "dataFormat": "json",
            "dataSource": {
                // Chart Configuration
                "chart": {
                    "caption": "",
                    "lowerLimit": "0",
                    "upperLimit": "100",
                    "showValue": "1",
                    "numberSuffix": "%",
                    "theme": "fusion",
                    "showToolTip": "0"
                },
                // Chart Data
                "colorRange": {
                    "color": [{
                        "minValue": "0",
                        "maxValue": "50",
                        "code": "#F2726F"
                    }, {
                        "minValue": "50",
                        "maxValue": "75",
                        "code": "#FFC533"
                    }, {
                        "minValue": "75",
                        "maxValue": "100",
                        "code": "#62B58F"
                    }]
                },
                "dials": {
                    "dial": [{
                        "value": "80",
                    }]
                }
            }
        });
        fusionCharts.render();
    });

Как заменить значение диаграммы ('80 ') на MySQL данные .

MySQL Код подключения к базе данных 

const mysql=require("mysql");    
const express=require("express");    
const bodyParser=require("body-parser");    

var app=express();    
app.use(bodyParser.json());    
var mysqlConnection=mysql.createConnection({    
    host: "localhost",    
    port: 3306,    
    user: "username",    
    database: "mydb",    
    password: "password",    
});    

mysqlConnection.connect((err)=>{    
    if (!err){    
        console.log("Wow! Connection Established");    
    }    
    else{    
        console.log("Opps! Connection Failed");    
    }    
});    

mysqlConnection.connect(function(err){    
    if (!err);    
    mysqlConnection.query("SELECT Temperature FROM ISL201 ORDER BY ISL201.Timestamp DESC", function(err, results){    
        if (!err);        
        console.log(results);    
    });    
});

1 Ответ

0 голосов
/ 14 февраля 2020

Вот фрагмент, который можно использовать для рендеринга FusionCharts с использованием вышеуказанных технологий

Сервер. js

const mysql = require("mysql");
const express = require("express");
const bodyparser = require("body-parser");
const path = require("path");
var app = express();
//Configuring express server
app.use(bodyparser.json());

//MySQL details
var mysqlConnection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "fusioncharts_jspsample",
  multipleStatements: true
});

mysqlConnection.connect(err => {
  if (!err) console.log("Connection Established Successfully");
  else console.log("Connection Failed!" + JSON.stringify(err, undefined, 2));
});

//Establish the server connection
//PORT ENVIRONMENT VARIABLE
const port = process.env.PORT || 8080;
app.listen(port, () => console.log(`Listening on port ${port}..`));

app.use(express.static("public"));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname + "/index.html"));
});


app.get("/api/number_of_visitor/:id", (req, res) => {
  mysqlConnection.query(
    "SELECT * FROM number_of_visitor WHERE id = ?",
    [req.params.id],
    (err, rows, fields) => {
      if (!err) {
        res.json(rows);
      } else console.log(err);
    }
  );
});

Клиентский фрагмент 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
  </head>

  <body>
    <h1>Angular Gauge</h1>

    <script type="text/javascript">
      async function fetchData(id = 1) {
        const { data } = await axios.get(
          `http://localhost:8080/api/number_of_visitor/${id}`
        );
        return data;
      }

      Promise.all([fetchData()]).then(v => {
        console.log(v);
        let val = v[0][0].bakersfield_central;
        const ds = {
          chart: {
            caption: "Customer Satisfaction Score",
            subcaption: "Last week",
            lowerLimit: "0",
            upperLimit: "22500",
            lowerLimitDisplay: "Bad",
            upperLimitDisplay: "Good",
            showValue: "1",
            valueBelowPivot: "1",
            theme: "fusion"
          },
          colorRange: {
            color: [
              {
                minValue: "0",

            maxValue: "7500",
            code: "#e44a00"
          },
          {
            minValue: "7500",
            maxValue: "15000",
            code: "#f8bd19"
          },
          {
            minValue: "15000",
            maxValue: "22500",
            code: "#6baa01"
          }
        ]
      },
      dials: {
        dial: [
          {
            value: val
          }
        ]
      }
    };

    FusionCharts.ready(function() {
      var cSatScoreChart = new FusionCharts({
        type: "angulargauge",
        renderAt: "container",
        width: "400",
        height: "250",
        dataFormat: "json",
        dataSource: ds
      }).render();
    });
  });
</script>
<div id="container"></div>

Использовал POSTMAN для обслуживания запросов.

Если вы все еще сталкиваетесь с проблемой, вот демонстрационная версия (SQL файл включен) - https://www.dropbox.com/s/6am59m3cemfslat/database_demo.zip?dl=0

...