Create Smart Factory Data Dashboard Step-by-Step

By the end of this tutorial, you will learn how to create a realistic dashboard for a smart factory, that looks like this. Are you ready? Let's get started -- it won't take long.

Step 1: Access JEDI and Login

1. Navigate to your JEDI instance at http://localhost:9123/login If JEDI is running on a different computer, replace localhost with the IP address of that computer.

2. Click the "User ID" field.

3. Enter your user ID.

4. Click the "Password" field and enter your password.

5. Click "LOGIN".

Step 2: Verify Data Reception

1. Click "Device Dashboard" to check if JEDI is receiving data from Machinechat IoT Simulator.

2. Here, we see that JEDI is receiving data from the simulator with target_id as "SmartFactory".

We are now read to create our first "Data Dashboard".

Step 3: Add Your First Chart

3. Click "Data Dashboard".

4. Click "ADD CHART" to add a chart to the dashboard.

5. Click this text field.

6. Type "Humidity".

7. Click "Chart Type".

8. Select "Gauge".

9. Click the "Source" field. This shows the "target_id" of all the data sources sending data to JEDI.

10. Select "SmartFactory".

11. Click "Property". You will see a list of metrics from the source "SmartFactory".

12. Select "humidity".

13. Click "ADD" to add the chart to the dashboard.

Congratulations! You've added your first chart to the dashboard. Now let's add a few more charts.

Step 4: Add a Second Chart (Tile Chart)

1. Click "ADD CHART" to add another chart to the dashboard.

2. Click "Name".

3. Type "Temperature"

4. Click "Chart Type".

5. Select "Tile".

6. Click the "Source" field.

7. Click "SmartFactory".

8. Click "Property".

9. Select "Temperature".

10. Click "ADD" to add the chart to the dashboard.

11. Drag and drop the "Tile" chart beside the "Gauge" chart.

Yeah! That's your second chart on the dashboard. Let's get a bit more adventurous.

Step 5: Add a Third Chart (Time Series Chart)

1. Click "ADD CHART" to add another chart.

2. Click "Name".

3. Type "Temperature Series"

4. Click "Chart Type".

5. Select "Time Series" chart.

6. Now let us add some metrics to this "Time Series" chart.

7. Click the "Source" field.

8. Select "SmartFactory"

9. Click this "Property" field.

10. Select "Temperature".

11. Click here to "fill" the line chart.

12. Click this "Label" field.

13. Type "Temperature" as the label. This will be displayed on the chart.

14. Click the color circle to select the color that will be used to draw the chart.

15. Click on the color to select it.

16. Remember to click "Save" to save your color choice.

17. Click "ADD" to add the metric to the "Time Series" chart.

18. Click "ADD" to add the "Time Series" chart to the dashboard.

19. Drag and drop the "Temperature Series" beside the "Tile" chart.

Hurray! Now that's something!

Are you ready for the final adventure? Let's stack two metrics on the same "Time Series" chart to that you study trends and relationships in your data.

Step 6: Add a Final Stacked Time-Series Chart

Adding the First Metric to the Chart

1. Click "ADD CHART" to add the final chart to the dashboard.

2. You know the drill. Click "Name".

3. Type "Trends"

4. Click "Chart Type".

5. Select "Time Series".

6. Click here to enable multiple Y-axis. We'll use one for "Temperature" and another for "Humidity".

7. Click this icon to add a metric to the "Time Series" chart.

8. Click the "Source" field.

9. Select "SmartFactory"

10. Click this "Property" field.

11. Select "temperature".

12. Click here and select a color.

13. Click here.

14. Click "Save"

15. Click "ADD" to add "temperature" to the "Time Series" chart.

Adding the Second Metric to the Time-Series Chart

1. Click this icon to add another metric to the same "Time Series" chart.

2. Click the "Source" field.

3. Click "SmartFactory"

4. Click this "Property" field.

5. Select "humidity".

6. Click this "Label" field.

7. Type "Humidity"

8. Click here to place the Y-axis for "Humidity" to the right of the chart. If you have multiple Y-axis on the same side, use the "Y-Axis Padding" measured in pixels to space them out.

9. Click here select a color.

10. Click here.

11. Click "Save"

12. Click "ADD" to add "Humidity" to the "Time Series" chart.

13. Click "ADD" to add the stacked "Time Series" chart to the dashboard.

14. Click here and drag the corner so increase the width of the chart.

Now that's a masterpiece.

Congratulations! You've Unleashed the Power of Data Visualization!

Take a moment to appreciate the smart factory dashboard you've just built. With real-time gauges, insightful trendlines, and the comprehensive insights from your stacked chart, you've laid a powerful foundation for monitoring and understanding your factory operations.

This Is Just the Beginning

Think about how you can further customize this dashboard:

• Experiment: Try different chart types and layouts. JEDI offers many ways to display your data.
• Add More Metrics: As you connect more sensors, enrich your dashboard with new insights.
• Set Up Alerts: Configure rules to get notified about critical events, helping you react quickly.

Your IoT data journey with Machinechat JEDI is off to an amazing start. Keep exploring, building, and transforming your operations!

Need help? Contact our support team: support@machinechat.io