Resolving Styling Issues in Chart Creation with JavaScript and WeWeb

The State Changers meeting revolved around debugging a user interface issue in web app development using WeWeb. This involved working with Charts JS and facing a problem regarding adding style to chart legends, specifically changing the box shapes into circles using border radius.


The point of confusion was that the box turned circular even without applying the border radius. The problem seemed complex due to different interpretations of JSON and JavaScript by the WeWeb tool. The JSON interpretation required keys to be wrapped by quotation marks, leading to an error as JavaScript doesn't require this. The solution involved using "return" at the start to ensure it is interpreted as JavaScript and not JSON, thus avoiding syntax errors. The lesson discussed was to always introduce a return statement when one wants to use JavaScript to avoid conflicts in syntax interpretations between JSON and JavaScript. Moreover, they explored the usage of a more specific Charts JS property "usePointStyle" set to true, to easily convert legend boxes into circles instead of using border radius. The concept of managing complex control systems from the backend was also touched upon, with a mention of integrating Particle JS for graphical effects in WeWeb. The meeting is beneficial for developers in understanding the subtle differences in JSON and JavaScript interpretation by programming tools and how to troubleshoot issues arising from these situations using tools like Charts JS and WeWeb. They also explore advanced debugging using VS Code and handling unusual syntax conflicts.


(Source: Office Hours 8/10/2023 )

State Change Members Can View The Video Here
chris-montgomery-smgTvepind4-unsplash.jpg

View This Video Now

Join State Change Risk-Free