Node-Red configuration
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ui_chart.html 1.9KB

123456789101112131415161718192021
  1. <script type="text/html" data-help-name="ui_chart">
  2. <p>Plots the input values on a chart. This can either be a time based line chart, a bar chart (vertical or horizontal),
  3. or a pie chart.</p>
  4. <p>Each input <code>msg.payload</code> value will be converted to a number. If the
  5. conversion fails, the message is ignored.</p>
  6. <p>Minimum and Maximum <b>Y</b> axis values are optional. The graph will auto-scale to any values received.</p>
  7. <p>Multiple series can be shown on the same chart by using a different <code>msg.topic</code>
  8. value on each input message. Multiple bars of the same series can be shown by using the <code>msg.label</code> property.</p>
  9. <p>The <b>X</b> axis defines a time window or a maximum number of points to display. Older data will be automatically removed from the graph.
  10. The axis labels can be formatted using a <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">
  11. Moment.js time formatted</a> string.</p>
  12. <p>Inputting a <code>msg.payload</code> containing a blank array <code>[]</code> will clear the chart.</p>
  13. <p>See <b><a href="https://github.com/node-red/node-red-dashboard/blob/master/Charts.md" target="_new">this information</a></b>
  14. for how to pre-format data to be passed in as a complete chart.</p>
  15. <p>The <b>Blank label</b> field can be used to display some text before any valid data is received.</p>
  16. <p>The label can also be set by a message property by setting
  17. the field to the name of the property, for example <code>{{msg.topic}}</code>.</p>
  18. <p>The node output contains an array of the chart state that can be persisted if needed. This can be passed
  19. into the chart node to re-display the persisted data.</p>
  20. <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
  21. </script>