# How to draw real-time data in a specific canvas area？

**URL:** <https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [January 22, 2025, 1:11pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631 "2025-01-22T13:11:28Z")\
**Posts on this page:** 1\
**Showing post:** 15

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 23, 2025, 12:06pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/15 "2025-01-23T12:06:17Z")

</div>

Hello @cola,

Keep in mind what _Serial.println()_ is sending from Arduino:  
_[https://docs.arduino.cc/language-reference/en/functions/communication/serial/println/](https://docs.arduino.cc/language-reference/en/functions/communication/serial/println/)_

It is much cleaner to do this on Arduino side as the terminating character:

`Serial.print('\n'); // Sends only an ASCII line feed`

And one less character to send and deal with on receiving end.

You may have to `trim()` those extra characters later before converting a String to a float or otherwise.  
Sometimes the conversion method will trim whitespace for you but that is not always the case.

Keep this in mind for future!

References:

> **[trim() / Reference](https://processing.org/reference/trim_.html)**
>
> Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbs…

> **[Serial / Libraries](https://processing.org/reference/libraries/serial/index.html)**
>
> Send data between Processing and external hardware through serial communication (RS-232).

> [@Question about trims and integers](https://discourse.processing.org/t/question-about-trims-and-integers/18255):
>
> String[] a = split(receivedString, ','); println(a[0]); println(a[1]); println(a[2]); println(a[3]); println(a[4]); println(a[5]); println(a[6]); int val1 = Integer.parseInt(a[0].trim()); int val2 = Integer.parseInt(a[1].trim()); int val3 = Integer.parseInt(a[2].trim()); int val4 = Integer.parseInt(a[3].trim()); int val5 = Integer.parseInt(a[4].trim()); int val6 = Integer.parseInt(a[5].trim()); int val7 = Integer.parseInt(a[6].trim()); XChart.push("incoming",val1); YChart.…

`:)`

---

_[View the full topic](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631)._