---
title: Create a Chart
slug: litmusedge/how-to-guides/flows-guides/create-a-chart
description: You can use Flows to create charts. In this page, you will learn how to create a temperature chart.
docTags: 
createdAt: 2023-06-07T19:01:38.000Z
---

You can use Flows to create different types of visualizations such as Line charts, Bar charts, Pie charts, Polar area charts, and Radar charts.

# User Scenario

Review the following scenario for creating a Line chart using Flows Manager.

In a food processing plant, engineers need to monitor and optimize refrigeration units. They can create a line chart visualization with two lines: one showing the temperature in Celsius and the other converting these readings to Fahrenheit. This real-time chart helps in maintaining precise temperature control, which is critical for food safety standards. Such visualization helps in quick decision-making if temperatures deviate from the desired range, ensuring product quality and regulatory compliance.

# Step 1: Create the Chart

**To create a temperature conversion line chart:**

1. In Litmus Edge, navigate to the **Flows Manager **and create a new flow. 
   See [Create a Flow](docId\:wh4ZihWF0PwMRYRbAZbco) to learn more. 
2. Drag a **Datahub Subscribe **node, two **Function **nodes, and a **Chart** node to the canvas and wire them together.
   ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/0O8FWw3dLapqt9JMkS5GO_image.png" size="70" width="607" height="192" position="center" caption="Flows canvas with chart node" showCaption="true"}
3. Double-click the **Datahub Subscribe** node.
   The *Edit Datahub Subscribe node *dialog box appears.
   - **Datahub: **Configure the Datahub connection if needed. See the *Step 3: Configure Connector Nodes* section in [Create a Flow](docId\:wh4ZihWF0PwMRYRbAZbco) to learn more. 
   - **Topic: **Enter **Fahrenheit**.
   - **Name: **Enter **Temperature**.
   - Click **Done**.
     ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/f7Y4NiMev08RYgD7Tgf2s_image.png" size="60" width="403" height="256" position="center" caption="Edit Datahub Subscribe node dialog box" showCaption="true"}
4. Double-click one of the **Function **nodes.
   The *Edit function node *dialog box appears.
   - **Name: **Enter **Farenheit**.
   - **On Message: **Enter the following lines of code to return the temperature in Fahrenheit:
     `msg.topic = 'Fahrenheit '; // Defines the variable`
     `return msg;`
   - Click **Done**.
     ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/NXr8w48TTEVRtQoVeDbjH_image.png" size="70" width="512" height="247" position="center" caption="Edit function node dialog box" showCaption="true"}
5. Double-click the other **Function **node.
   The *Edit function node *dialog box appears.
   - **Name: **Enter **Celsius**.
   - **On Message: **Enter the following lines of code to return the temperature in Celsius:
     `var faren = msg.payload; // Temperature from the device in Fahrenheit.
     `
     `var cel = parseFloat(5 / 9 * (parseInt(faren) - 32)).toFixed(2); // Converts Fahrenheit to Celsius up to two decimal places.
     `
     `msg.payload = cel; // Sets the display value on the chart to be our Celsius calculation.
     `
     `msg.topic = 'Celsius'; // Gives the name "Celsius" to the second line of the chart.
     `
     `return msg;`
   - Click **Done**.
     ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/yuAZE6HrMFOuxAPBZWvah_image.png" size="70" width="510" height="303" position="center" caption="Edit function node dialog box" showCaption="true"}
6. Double-click the **Chart **node. 
   The *Edit chart node *dialog box appears.
   - **Label: **Enter **Temperature**.
   - **Type: **Select **Line chart** from the dropdown option.
   - **Other Options: **There are a number of options for the Chart Types, Labels, Legends, and Series Colours. Feel free to experiment with different options according to your projects. 
   - **Group:** Click the **Edit **icon to add a new dashboard group.
     ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/_dM0yzgTY3QOse5yQ8t_6_image.png" size="60" width="547" height="932" position="center" caption="Edit chart node dialog box" showCaption="true"}
7. Make the following changes in the *Edit dashboard group node *dialog box.
   - **Name: **Enter **Temperature**.
   - **Display group name: **Select the checkbox. 
   - **Tab: **Click the **Edit **icon to add a new dashboard tab.
     ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/CWS6KV0ZZs22eqaqEhwKc_image.png" size="60" width="550" height="461" position="center" caption="Edit dashboard group node dialog box" showCaption="true"}
8. Make the following changes in the *Edit dashboard tab node *dialog box.
   - **Name: **Enter **Temperature**.
   - **Icon: **Enter **dashboard**.
   - Click **Add **or **Update**.
     ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/fk885meXJCCBJ4JsH9P_V_image.png" size="60" width="561" height="541" position="center" caption="Edit dashboard tab node dialog box" showCaption="true"}
9. Click **Add **or **Update** from the *Edit dashboard group node *dialog box. Then click **Done **from the *Edit chart node* dialog box and return to the flows canvas.
10. Add an **Inject **node, a **Function **node, and a **Datahub Publish** node onto the canvas and wire them together.
    ![](https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/ZEqaMul3Qi3MsnNYwNiHP_image.png "Completed flows canvas ")
11. Double-click the **Function **node.
    The *Edit function node *dialog box appears.
    - **On Message: **Enter the following lines of code to generate random float numbers as Fahrenheit temperature.
      `var run = (Math.random() * (86 - 80.75) + 80.75).toFixed(2); //generate random float numbers`
      `msg.payload = run;`
      `return msg;`
    - Click **Done**.
      ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/5j9_bLsTC60k73AV6vXYF_image.png" size="70" width="483" height="261" position="center" caption="Edit function node dialog box" showCaption="true"}
12. Double-click the **Datahub Publish** node.
    The *Edit Datahub Publish node* dialog box appears. 
    - **Datahub: **Configure the Datahub connection if needed. See the *Step 3: Configure Connector Nodes* section in [Create a Flow](docId\:wh4ZihWF0PwMRYRbAZbco) to learn more. 
    - **Topic: **Enter **Fahrenheit**.
    - **Name: **Enter **Temperature**.
    - Click **Done**.
      ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/mzLrptQ5IzSK2_-M6nEO1_image.png" size="60" width="380" height="252" position="center" caption="Edit Datahub Publish node dialog box " showCaption="true"}
13. Click **Deploy**.

# Step 2: View Line Chart as Output

**To view the line chart as output:**

1. Drag the **Sidebar **up from the bottom of the canvas and select the **Dashboard **icon.
   ![](https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/4amOfjJokKGZSup_LsFty_image.png "Dashboard icon on flows canvas")
2. You can see the dashboard group and tab you created from the *Chart *node. Click the **Expand **icon to view the generated chart in the *Node-RED Dashboard *browser window.
   ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/6jDyPZfZw5jDNsmH-VghP_image.png" size="70" width="789" height="282" position="center" caption="Dashboard expand window" showCaption="true"}
3. The line chart shows how Fahrenheit temperatures convert to Celsius temperature in real time.
   ::Image[]{src="https://api.archbee.com/api/optimize/SSUUxKZUk9bFTEPNn_6Zo/2OteieOGghiCG1W9peOc2_image.png" size="70" width="986" height="572" position="center" caption="Line chart output" showCaption="true"}

:::hint{type="info"}
**Note: **You may need to wait sometime to collect enough data for a proper line chart.
:::