0

I have a lot of data coming from different places and getting stored in MySQL database. I want to create a dashboard view of that. There are two problems,

  1. I want the data to show up on the dashboard page as soon as it gets inserted into the database. (avoid using lookup).
  2. A solution in Java/JavaScript language is expected.
  3. Can I use firebase or something similar that loads data automatically?

I have seen some live dashboards and I keep on wondering how they do it. It will be great if community can provide link to some good tutorials.

Dave Ranjan
  • 2,966
  • 24
  • 55
  • Do you have the web service created ?. What you should use is **Ajax** for `post` or `get` request. Then load that information that will make you insert the information on the db and change the information on the web-page without need of reloading. You just need to see Ajax: I recommend use Jquery or Angularjs. Ex: https://api.jquery.com/jquery.post/ – xsami Jun 08 '17 at 17:46
  • 1
    I will post an example about how you should do it. If you are trying to insert data in a table – xsami Jun 08 '17 at 17:46

2 Answers2

1

I can see some different approaches to solve your problem. First of all, you have to decide from where your data will be provided to the dashboard.

For example: if you create a web app to show some data provided directly by your MySql database, you will have to create a backend app that handles authentication and provide data. As you quoted in your question, you want realtime updates. To do this, you will have to create an architecture using WebSocket which will provide data from MySql as soon as they available. In this case, you would have full control of the system and wouldn't use Firebase, but it demands extra work.

I've faced this problem and, in my case, my team decided to use Firebase as a tool to speed up the process. In my project I have a huge relational database and had to provide some specific information in a dashboard for managers and executives. I decided to write a Java application that reads these data from my production database and push them to a Firebase Realtime Database every five minutes. Then, we created a web app that shows these data stored at Firebase. In this case, I haven't had to handle authentication (because Firebase provide it) and WebSocket. As soon my backend Java App send data to Firebase, it is showed in the dashboard, without needing reload the page.

In Firebase's GitHub account you can see many examples about manipulating data that will be updated in real time.

https://github.com/firebase/quickstart-js

English isn't my native language, so sorry for possible mistakes.

0

Assuming that you have your service running on: http://localhost:4848/ and it has the 2 methods. The first insert on Mysql the and the other get the information of the table that you inserting.

var apiURL = 'localhost:4848/'; // Web service URL
displayUsers(); // When the documents load

function insertUser(input) {
  var apiMethod = 'insert/user';
  var data = $("#username").val();

  $.ajax({
    type: "POST",
    url: (apiURL + apiMethod),
    data: data,
    success: function (response) {
      displayUsers();
    },
    dataType: 'text'
  });
}

function displayUsers() {
  var apiMethod = 'getAll';
  $.ajax({
    type: "POST",
    url: (apiURL + apiMethod),
    success: function (response) {
      $('#user-list').text(response);
    },
    dataType: 'text'
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
  <input type="text" id="username">
  <input type="submit" value="Add" onclick="insertUser()">
</div>
<div class="list" id="user-list">
</div>

Also watch this Post. About firebase I don't know what could help you. But I think this may help you.

xsami
  • 1,312
  • 16
  • 31
  • You may need to debug some of the code, But I think that can help. Any question just ask – xsami Jun 08 '17 at 18:16