Create a Chart

you can use flows to create different types of visualizations such as line charts, bar charts, pie charts, polar area charts, and radar charts use r sce nario 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 in litmus edge, navigate to the flows manager and create a new flow see docid 7x0n7c4dxswtd61vpibza to learn more drag a datahub subscribe node, two function nodes, and a chart node to the canvas and wire them together 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 docid 7x0n7c4dxswtd61vpibza to learn more topic enter fahrenheit name enter temperature click done 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 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 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 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 make the following changes in the edit dashboard tab node dialog box name enter temperature icon enter dashboard click add or update 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 add an inject node, a function node, and a datahub publish node onto the canvas and wire them together 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 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 docid 7x0n7c4dxswtd61vpibza to learn more topic enter fahrenheit name enter temperature click done click deploy step 2 view line chart as output to view the line chart as output drag the sidebar up from the bottom of the canvas and select the dashboard icon 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 the line chart shows how fahrenheit temperatures convert to celsius temperature in real time note you may need to wait sometime to collect enough data for a proper line chart