# Best way to create a web-based app to graph temperature data **URL:** \ **Category:** RacketScript\ **Tags:** racketscript\ **Created:** [January 3, 2022, 11:20pm UTC](https://racket.discourse.group/t/best-way-to-create-a-web-based-app-to-graph-temperature-data/522 "2022-01-03T23:20:35Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![LaughingWater](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/laughingwater/32/171_2.png) [@LaughingWater](https://racket.discourse.group/u/LaughingWater)\ **Post date:** [January 3, 2022, 11:20pm UTC](https://racket.discourse.group/t/best-way-to-create-a-web-based-app-to-graph-temperature-data/522/1 "2022-01-03T23:20:35Z")
Consider me a newbie. I'm re-writing my LispWorks refrigeration-monitoring app in Racket with hopes of making it web-based. It needs to draw a graph of temperatures over time, preferably scrollable so we can see anomalies developing. In an HTML environment I gather this is what JavaScript is good for. Is RacketScript appropriate for this kind of task, and is it my best choice, given that I'm writing the back end in Racket? (And is RacketScript even ready for such a task?) ---
**Author:** ![spdegabrielle](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/spdegabrielle/32/95_2.png) [@spdegabrielle](https://racket.discourse.group/u/spdegabrielle)\ **Post date:** [January 3, 2022, 11:58pm UTC](https://racket.discourse.group/t/best-way-to-create-a-web-based-app-to-graph-temperature-data/522/2 "2022-01-03T23:58:03Z")
Hi, The sort of plotting task you describe is usually handled by a plotting library. I’m thinking of things like D3js or Vega-lite. ( I’m no expert so please don’t take that as recommendations of those particular libraries) I believe RacketScript and Urlang work well with other JavaScript libraries - there are reactjs demos for both - maybe that is a good starting point? An interim approach could be write a gui client app that uses the plot library, and pulls data from your back end server. ActivityLog2 is a great example of plot Maybe this blog post will be a useful starting point: > **[Building a Data Visualization Dashboard in Racket](https://alex-hhh.github.io/2019/02/data-visualization-dashboard.html)** > > When experimenting with a new data visualization or data analysis method, it is simpler to write a prototype as a separate application, to evaluate if it is worthwhile investing the effort of adding a full feature to ActivityLog2, this post... Stephen ---
**Author:** ![LaughingWater](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/laughingwater/32/171_2.png) [@LaughingWater](https://racket.discourse.group/u/LaughingWater)\ **Post date:** [January 4, 2022, 7:42pm UTC](https://racket.discourse.group/t/best-way-to-create-a-web-based-app-to-graph-temperature-data/522/3 "2022-01-04T19:42:45Z")
Thank you for the leads. I’m inclined to do the drawing routines myself, since the graph I’ve created in CL does things like indicate day and night, normal temperature limits and defrost times in a colored background. I don’t like thinking what it would take to do that in connection with a plotting library. Plotting the data points is the easy part. I’ve thought about the client app approach, and that would be an improvement over what I have, but it would be so handy to have the monitoring available hardware- and software-independent on the web. Unless there’s a clear benefit to using RacketScript, I think the easiest path is to use HTML and JavaScript to access and display the data collected by Racket. Best wishes, LW ---
**Author:** ![spdegabrielle](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/spdegabrielle/32/95_2.png) [@spdegabrielle](https://racket.discourse.group/u/spdegabrielle)\ **Post date:** [January 4, 2022, 9:53pm UTC](https://racket.discourse.group/t/best-way-to-create-a-web-based-app-to-graph-temperature-data/522/4 "2022-01-04T21:53:19Z")
If you prefer javascript I’d encourage you to check out Urlang. > Urlang is a language designed to allow straightforward translation to JavaScript. Think of Urlang as JavaScript with sane syntax and JavaScript semantics. JavaScript in this context is short for ECMAScript 5 in strict mode. > > Although the constructs of Urlang and JavaScript map almost one-to-one, a little sugar was added: > > - function definitions allow default arguments > - let expressions > > Even though the syntax of Urlang is Racket-like, remember that the semantics is standard JavaScript. This means in particular that tail calls build context. > **[GitHub - soegaard/urlang: Urlang is JavaScript with a sane syntax](https://github.com/soegaard/urlang)** > > Urlang is JavaScript with a sane syntax. Contribute to soegaard/urlang development by creating an account on GitHub. ---
**Author:** ![LaughingWater](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/laughingwater/32/171_2.png) [@LaughingWater](https://racket.discourse.group/u/LaughingWater)\ **Post date:** [January 5, 2022, 8:19pm UTC](https://racket.discourse.group/t/best-way-to-create-a-web-based-app-to-graph-temperature-data/522/5 "2022-01-05T20:19:34Z")
I’m afraid I’m missing too much context to make any sense of Urlang. It would help to have an orientation that assumed I know very little about Racket and the various web technologies that I’m largely clueless about. (I don’t necessarily prefer JavaScript, but I’ve taken an online course, and it’s a well-lit path.) At the moment my most conceptually direct path looks like using Racket’s drawing toolkit to create a pdf that can be part of a web page served using Racket. It may not respond instantly, but it would meet the basic need. ---
**Author:** ![soegaard](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/soegaard/32/19_2.png) [@soegaard](https://racket.discourse.group/u/soegaard)\ **Post date:** [January 5, 2022, 8:31pm UTC](https://racket.discourse.group/t/best-way-to-create-a-web-based-app-to-graph-temperature-data/522/6 "2022-01-05T20:31:20Z")
If the plot is static, then the simplest is to use `plot` and save the image as `svg`. If you need something dynamic, then you'll need to look for a JavaScript library. I have heard good things about D3, but there are lots to choose from. > **[Gallery](https://observablehq.com/@d3/gallery)** > > Looking for a good D3 example? Here’s a few (okay, …) to peruse. Animation D3’s data join, interpolators, and easings enable flexible animated transitions between views while preserving object constancy. Interaction D3’s low-level approach allows...