title: How make more advanced charts in node-red? How can I make live chart in Node-red with two or more y axis?
body: <p>I have problem with make more advanced live chart. I use node-red on PC to collect data from PLC and display it in line chart using standard node-red dashboard chart node. PLC read values from 30 sensors: 20 preassure, 3 temperature, 3 flow, 1 speed. Read frequency is 4Hz. Not all values are visible at time, because I want chart to be clear. For this I need also split y axis according to sensors. So one for preassure, one for temperature, one for flow and one for speed. For now data is coming in form of array msg.payload[] but it is not important because I will  format data to proper form. I know format data for live chart to work is</p>
  <pre><code>{topic:&quot;temperature&quot;, payload:22}
  {topic:&quot;humidity&quot;, payload:66}
   
  </code></pre>
  <p>and for static chart</p>
  <pre><code>msg.payload =[{
  &quot;series&quot;: [&quot;A&quot;, &quot;B&quot;, &quot;C&quot;],
  &quot;data&quot;: [
      [{ &quot;x&quot;: 1504029632890, &quot;y&quot;: 5 },
       { &quot;x&quot;: 1504029636001, &quot;y&quot;: 4 },
       { &quot;x&quot;: 1504029638656, &quot;y&quot;: 2 }
      ],
      [{ &quot;x&quot;: 1504029633514, &quot;y&quot;: 6 },
       { &quot;x&quot;: 1504029636622, &quot;y&quot;: 7 },
       { &quot;x&quot;: 1504029639539, &quot;y&quot;: 6 }
      ],
      [{ &quot;x&quot;: 1504029634400, &quot;y&quot;: 7 },
       { &quot;x&quot;: 1504029637959, &quot;y&quot;: 7 },
       { &quot;x&quot;: 1504029640317, &quot;y&quot;: 7 }
      ]
  ],
  &quot;labels&quot;: [&quot;&quot;]
  }]
  </code></pre>
  <p>.
  <a href="https://i.stack.imgur.com/t6IXd.png" rel="nofollow noreferrer">standard chart with data from above code</a>
  I know node-red dashboard chart is similar to chart.js. I can send ui_control message to adjust actual y-axe and add two more y-axis:</p>
  <pre><code>let msg2=
  {
      ui_control :{ 
          options: {
              scales: {
                  xAxes: [{
                      type: 'time',
                      time: {
                          unit: 'minute',
                          unitStepSize: 1,
                          displayFormats: {
                              minute: 'HH:mm'
                          }
                      }
                  }],
                  yAxes: [{
                      id: &quot;1&quot;,
                      scaleLabel: {
                              display: true,
                              labelString: 'pressure [bar]'
                              },
                      ticks: {
                          min: -10,
                          max: 10,
                          stepSize: 2
                      }
                  }, {
                      id: &quot;2&quot;,
                      scaleLabel: {
                              display: true,
                              labelString: 'Temperature [°C]'
                              },
                      ticks: {
                          min: 0,
                          max: 20,
                          stepSize: 4
                      }
                      }, {
                      id: &quot;3&quot;,
                      scaleLabel: {
                              display: true,
                              labelString: 'Flow [L/min]'
                              },
                      ticks: {
                          min: 0,
                          max: 20,
                          stepSize: 4
                      }
                  }]
              }    ,        
                  legend: {
                      display: true,
          position: 'top',
        },
        
        title: {
          display: true,
          text: 'Chart'
        }
      ,
              animation: {
                  duration: 0
              }
          }},
  };
  
  return msg2;
  </code></pre>
  <p>Result is:
  <a href="https://i.stack.imgur.com/bQ9Fd.png" rel="nofollow noreferrer">Same data, ui_control message result</a></p>
  <p>And now I want display for example:</p>
  <pre><code>msg.payload = 5;
  msg.topic=&quot;C&quot;;
  msg.yAxis=&quot;3&quot;;
  return msg;
  </code></pre>
  <p>and instead get &quot;C&quot; on axe 3 (temperature), I get it on axe 1 (pressure), and Node-red sometimes freeze after send above message.
  <a href="https://i.stack.imgur.com/2uWyP.png" rel="nofollow noreferrer">chart with one data point on 1 y axe</a></p>
  <p>So now proper question: How Can I use more than one y axis? Can I done this with standard node-red dashboard chart? How data structure should look for static chart, and how for live chart? Maybe I should use node-red template node and write code in HTML based on chart.js? And one last question, how can I minimalize PC usage, because when I run 30 sensors, at 4Hz, I get 1200 point in just 10s?</p>
  <p>I will be grateful for your help :D</p>