목표 : MongoDb의 값을 가져와 그 값을 바탕으로 Google Chart 그래프 그리기
route.go
server.route.GET("/graph", handler.GraphHandler)
server.route.GET("/getGraphData", handler.DrawGraph)
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
cursor, err := collection1.Find(ctx, bson.M{})
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)
//json으로 findOne 값을 넘겨줌
c.JSON(200, finds)
}
graph.html (디폴트그래프와 findone으로 그린 그래프)
<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>
</body>
<script type="text/javascript">
$(document).ready(function() {
defaultGraph();
graph1();
});
function graph1() {
$.ajax({
url:"/getGraphData",
type:"GET",
contentType: "application/json; charset=utf-8",
success: function(resData) {
google.load("visualization", "2", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['test', 'y','z'],
[resData.id,resData.y,resData.x],
[resData.id,resData.x,resData.y]
]);
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>
POSTMAN
url/graph
'GoLang' 카테고리의 다른 글
| GIN Ajax로 값 전달하기 (0) | 2020.11.22 |
|---|---|
| GIN 동적 그래프 그리기 (0) | 2020.11.20 |
| GIN MongoDB Test (0) | 2020.11.17 |
| GIN POST TEST2 (0) | 2020.11.14 |
| GIN POST 테스트 (0) | 2020.11.12 |
