_YlKIZLTYzr.gif?auto=format%2Ccompress&gifq=35&w=400&h=300&fit=min)
According to TigerGraph, "Graph databases allow you to interconnect data together to derive insights that weren’t previously possible." It is used by many applications ranging from Facebook to Google. The speed of graph database allows us to pull complex data in a short time, and we can use it in conjunction with existing database which makes it performing much better. At MixPose, we can run complex analytics for yoga teachers and their classes via graph database through TigerGraph.
In this guide, we will go through step by step guide on how to setup a graph database via TigerGraph and how MixPose used it to do analytics for our yoga classes.
Step 1: Go to TigerGraphYou can visit https://tgcloud.io to get started with tigergraph, which have a free tiger that you can test it out.
There is an option to sign up with Google, which makes the life much more easier. Upon singing up you will be able to access the initial unused credits and a dashboard
Now that account is created, you can easily create a free solution to test out the Graph Database
We can select blank to start a new graph
and AWS would give us free tier access
And we can name our solution to make
After pending task you should get following
In design scheme, we can now create Vertex and Edges, in this first iteration we will create User, Lesson and Instructor as Vertex. and following edges
User follow Instructor
Instructor teach lesson
User attend lesson
User feedback lesson
User friendship User
Step after that would be Map Data to Graph, in our case we had to write seperate script to turn our firebase data into csv as well as building that into an automatic process.
When data are all loaded you should have following
You can now use Explore graph to see the power of the graphSQL
Using the same tool you can also see additional groups
We can now do more powerful tools such as adding numbers into GSQL using Accum. In this example we are going to build out an instructor feature which they get to see how their followers have been attending their classes. First we will go to Write Queries feature.
After that we can use following code
CREATE QUERY GetInstructorInfo(Vertex<Instructor> inputInstructor) FOR GRAPH MyGraph {
/* Write query logic here */
SumAccum<Int> @studentClassCountAccum;
ListAccum<String> @studentAccum;
//GroupByAccum<Int groupCount, ListAccum<String> list> @@studentGroupAccum;
Start = {inputInstructor};
Class = SELECT tgt FROM Start:s-(teaches:e)->Lesson:tgt;
Students = SELECT tgt FROM Class:s-(attend:e)-User:tgt
Accum tgt.@studentAccum += s.ClassName,
tgt.@studentClassCountAccum += 1
//Post-Accum @@studentGroupAccum += (1, tgt.InstructorId)
ORDER BY tgt.@studentClassCountAccum DESC;
PRINT Students;
}This gives us option to print out students along with the amount of classes they've been to, upon pressing run we'd see the results both in graph view as well as in JSON view
There is an option that we cal call the Query endpoint to retrieve the json.
We can write a front end code on our own server to and chart.js to chart the following
<!doctype html>
<!--
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<!-- Add Firebase products that you want to use -->
<script src="/__/firebase/7.15.0/firebase-app.js"></script>
<script src="/__/firebase/7.15.0/firebase-analytics.js"></script>
<script src="/__/firebase/7.15.0/firebase-auth.js"></script>
<script src="/__/firebase/7.15.0/firebase-functions.js"></script>
<script src="/__/firebase/7.15.0/firebase-storage.js"></script>
<script src="/__/firebase/7.15.0/firebase-messaging.js"></script>
<script src="/__/firebase/7.15.0/firebase-database.js"></script>
<script src="/__/firebase/7.15.0/firebase-firestore.js"></script>
<script src="/__/firebase/7.15.0/firebase-performance.js"></script>
<script src="/__/firebase/init.js"></script>
<title>Teacher's graph analytics</title>
</head>
<body class="mixpose-theme lesson-page">
<canvas id="historychart"></canvas>
<script src="/js/base.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
var settings = {
"url": "https://mixposegraph.i.tgcloud.io:9000/query/MyGraph/GetInstructorInfo?inputInstructor={instructorid}",
"method": "GET",
"timeout": 0,
"headers": {
"Authorization": "Basic {token}",
"Content-Type": "text/plain"
}
};
$.ajax(settings).done(function (response) {
console.log(response);
var jsonData = JSON.parse(response.replace('@',''));
console.log(jsonData[0].Students);
var labelData = [];
var classData = [];
for(var i = 0; i < jsonData[0].Students.length; i++)
{
//tc.addQueryOutput(jsonData[0][i]);
labelData.push(jsonData[0].Students[i].attributes.DisplayName);
classData.push(jsonData[0].Students[i].attributes.studentClassCountAccum);
}
console.log(labelData);
var barChartData = {
labels: labelData,
datasets: [
{
label: "Class Count",
backgroundColor:"#00cb39",
borderColor:"#4b9258",
borderWidth:1,
fillColor: "#00cb39",
strokeColor: "#00cb39",
pointColor: "#00cb39",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "#00cb39",
data: classData
}
]
};
var ctx = document.getElementById("historychart").getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Student ClassCount'
},
scales: {
xAxes: [{
display: true
}]
}
}
});
});
</script>
</div>
</body>
</html>And that would yield us result like following
We can do more advanced features in the future.
Step 5: Demo
Peter Ma
Comments