In the <a href="http://blog.tadaboard.com/design-and-preview-your-interactive-dashboard-in-3-minutes/">previous post</a> we covered how to design your first dashboard. Now we are going to explain how to push your data in with Node as backend.

Before starting make sure you have registered on <a href="https://www.tadaboard.com">Tadaboard</a> and you have created your dashboard layout. It takes a few minutes to put together all the widgets you need to create your first interactive dashboard.

<img src="http://tadaboard:8888/wp-content/uploads/2017/08/dashboard-layout-1-300x150.png" alt="" width="300" height="150" class="alignnone size-medium wp-image-16 img-fluid img-fluid--exceed-container img-fluid--exceed-container--centered" />

Once the dashboard mock is done you can head to the Data tab to have it will look like. You'll find that the dashboard will populate with At this point we can start playing with our data.

In order to implement the data end-point we need first to grab the sample JSON available in the main panel:
<img src="http://tadaboard:8888/wp-content/uploads/2017/08/json-sample-1-300x189.png" alt="" width="300" height="189" class="alignnone size-medium wp-image-17 img-fluid img-fluid--exceed-container img-fluid--exceed-container--centered" />

Every dashboard layout it's strictly connected to its own dataset. You need to use the data sample as a reference when implementing the API.

In this example we'll create an HTTP server using Node and will adopt the <a href="https://github.com/tadaboard/node-sdk/">Tadaboard SDK for NodeJS</a> to implement the JSON response in an easier way.

You can use the <a href="https://github.com/tadaboard/node-sdk/">SDK</a> to handle the request body, manage the query object and target the specific data structures for each widget.

<pre><code class="language-javascript">var TB = require('tadaboard');

// Body should be a JSON either as string or object
var tb = new TB.response({ requestBody: request.body, queryDefault: { metric: "total-users" } });

// Set the data for every single widget in the dashboard by targeting their widget identifier
tb.widget(&lt;widgetId&gt;, { 
  id: "total-users", 
  value: 48,
  variation: 0.123
});

// You can also use the query merged from response and default
// to change the content of another widget
switch(tb.getQuery().metric) {
  case "total-users":
    tb.widget(&lt;widgetId&gt;, { value: 48 });
    break;
  case "active-users":
    tb.widget(&lt;widgetId&gt;, { value: 10 });
    break;
}

// Get the response JSON as either object...
tb.toJSON();

// or string
tb.toString();
</code></pre>

Once you've assigned data objects to all the widgets you can use the output JSON and send it through your response.
On the main panel now switch to URL mode so you can specify your own data end-point, set the preferred HTTP method and hit Apply to test it. In case the dashboard gets some errors you'll get a feedback just below the URL field.
<img src="http://tadaboard:8888/wp-content/uploads/2017/08/data-input-1-300x202.png" alt="" width="300" height="202" class="alignnone size-medium wp-image-19 img-fluid img-fluid--exceed-container img-fluid--exceed-container--centered" />

And this is how it loos like:

[js]

<script>
!function(a,d,e,r,t,o,n){document.write('<div class="tadaboard-embed" data-id="CxAv"></div>'),a.TadaboardAutoload=!0,a.Tadaboard&&a.Tadaboard.runParser(),o=d.createElement(e),n=d.getElementsByTagName(e)[0],o.async=1,o.src=r,n.parentNode.insertBefore(o,n)}(window,document,'script','https://s3-eu-west-1.amazonaws.com/tadaboard-production/embed.js');</script>

[/js]

You can take a look at the sources right <a href="https://github.com/tadaboard/node-sdk/blob/master/examples/blog/random_dashboard">here</a>.

For any questions don't forget to get in touch with us on Twitter <a href="https://twitter.com/Tadaboard">@Tadaboard</a> or via email at <a href="mailto:hello@tadaboard.com">hello@tadaboard.com</a>.