목표 : MongoDb의 값을 가져와 그 값을 바탕으로 Google Chart 그래프(막대,선) 그리기
route.go
server.route.GET("/getGraphData1", handler.DrawGraph1)handler/graph.go
package handler
import (
"context"
"encoding/json"
"fmt"
"log"
"net/http"
"time"
"github.com/gin-gonic/gin"
"go.mongodb.org/mongo-driver/bson/primitive"
"go.mongodb.org/mongo-driver/mongo"
"go.mongodb.org/mongo-driver/mongo/options"
"gopkg.in/mgo.v2/bson"
)
type Graph struct {
ID primitive.ObjectID
num string `json:"id"`
x int `json:"x"`
y int `json:"y"`
}
func GraphHandler(c *gin.Context) {
c.Header("Content-Type", "text/html")
c.HTML(http.StatusOK, "graph.html", gin.H{
"title": "메인화면",
})
}
func DrawGraph(c *gin.Context) {
c.Header("Content-Type", "application/json charset=utf-8")
ctx, _ := context.WithTimeout(context.Background(), 10*time.Second)
clientOptions1 := options.Client().ApplyURI("mongodb://localhost:27017")
client1, err := mongo.NewClient(clientOptions1)
if err != nil {
log.Fatal(err)
}
err = client1.Connect(context.Background())
collection1 := client1.Database("local").Collection("graph1")
//Find
findOptions := options.Find()
//"select id,x,y from graph1"과 동일함
findOptions.SetProjection(bson.M{
"_id": 0,
"id": 1,
"x": 1,
"y": 1,
})
//조건 where 절에 해당
filter := bson.M{}
//조건과 옵션을 주어 select 한다.
cursor, err := collection1.Find(ctx, filter, findOptions)
if err != nil {
log.Fatal(err)
}
//find한 결과를 전부 json으로 변환
var episodes []bson.M
cursor.All(ctx, &episodes)
//find한 결과를 하나씩 꺼내서 사용
for cursor.Next(ctx) {
var episode bson.M
if err = cursor.Decode(&episode); err != nil {
log.Fatal(err)
}
s, _ := json.Marshal(episode)
fmt.Println(string(s))
}
//FindOne
//find 1개를 한 값을 넘겨줌
doc1 := collection1.FindOne(context.TODO(), bson.M{})
var finds bson.M
doc1.Decode(&finds)
c.JSON(200, episodes)
}
func DrawGraph1(c *gin.Context) {
c.Header("Content-Type", "application/json charset=utf-8")
ctx, _ := context.WithTimeout(context.Background(), 10*time.Second)
clientOptions1 := options.Client().ApplyURI("mongodb://localhost:27017")
client1, err := mongo.NewClient(clientOptions1)
if err != nil {
log.Fatal(err)
}
err = client1.Connect(context.Background())
collection1 := client1.Database("local").Collection("graph2")
//Find
findOptions := options.Find()
findOptions.SetProjection(bson.M{
"_id": 0,
"id": 1,
"x": 1,
})
filter := bson.M{}
cursor, err := collection1.Find(ctx, filter, findOptions)
if err != nil {
log.Fatal(err)
}
//find한 결과를 전부 json으로 변환
var episodes []bson.M
cursor.All(ctx, &episodes)
//find한 결과를 하나씩 꺼내서 사용
for cursor.Next(ctx) {
var episode bson.M
if err = cursor.Decode(&episode); err != nil {
log.Fatal(err)
}
s, _ := json.Marshal(episode)
fmt.Println(string(s))
}
//FindOne
//find 1개를 한 값을 넘겨줌
doc1 := collection1.FindOne(context.TODO(), bson.M{})
var finds bson.M
doc1.Decode(&finds)
c.JSON(200, episodes)
}
json으로 가져온 값을 google chart 양식에 맞게 변경한다.
var gglData = [];
if (jsonData.length > 0) {
// load column headings
var colHead = [];
Object.keys(jsonData[0]).forEach(function (key) {
colHead.push(key);
});
gglData.push(colHead);
// load data rows
jsonData.forEach(function (row) {
var gglRow = [];
Object.keys(row).forEach(function (key) {
gglRow.push(row[key]);
});
gglData.push(gglRow);
});
}
graph.html
<head>
<title>메인 페이지</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<div id="chart_div2" style="width: 900px; height: 500px;"></div>
</body>
<script type="text/javascript">
$(document).ready(function () {
defaultGraph();
graph1();
graph2();
});
function graph2() {
$.ajax({
url: "/getGraphData1",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (jsonData) {
google.load("visualization", "2", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var gglData = [];
if (jsonData.length > 0) {
// load column headings
var colHead = [];
Object.keys(jsonData[0]).forEach(function (key) {
colHead.push(key);
});
gglData.push(colHead);
// load data rows
jsonData.forEach(function (row) {
var gglRow = [];
Object.keys(row).forEach(function (key) {
gglRow.push(row[key]);
});
gglData.push(gglRow);
});
}
var data = google.visualization.arrayToDataTable(gglData);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
},
error: function () {
alert("조회 처리 중 에러가 발생했습니다");
}
})
}
function graph1() {
$.ajax({
url: "/getGraphData",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (jsonData) {
google.load("visualization", "2", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var gglData = [];
if (jsonData.length > 0) {
// load column headings
var colHead = [];
Object.keys(jsonData[0]).forEach(function (key) {
colHead.push(key);
});
gglData.push(colHead);
// load data rows
jsonData.forEach(function (row) {
var gglRow = [];
Object.keys(row).forEach(function (key) {
gglRow.push(row[key]);
});
gglData.push(gglRow);
});
}
var data = google.visualization.arrayToDataTable(gglData);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
},
error: function () {
alert("조회 처리 중 에러가 발생했습니다");
}
})
}
function defaultGraph() {
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['test', 'Sales', 'Expenses'],
['1', 400, 400],
['2', 522, 460],
['3', 612, 1120],
['4', 753, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
</script>
'GoLang' 카테고리의 다른 글
| GIN Ajax table 조작 (0) | 2020.11.25 |
|---|---|
| GIN Ajax로 값 전달하기 (0) | 2020.11.22 |
| GIN 그래프 그리기 (0) | 2020.11.19 |
| GIN MongoDB Test (0) | 2020.11.17 |
| GIN POST TEST2 (0) | 2020.11.14 |
