Skip to content

πŸ“Š Embeddable charts of your health and life data using Stethoscope

Notifications You must be signed in to change notification settings

stethoscope-js/embed

Repository files navigation

πŸ©ΊπŸ“Š Stethoscope Embed

Stethoscope Node CI

This repository contains the web app for embeddable charts of your health and life data using Stethoscope. It's written in React and TypeScript and published at https://stethoscope.js.org/embed/.

To get started, visit stethoscope-js/stethoscope β†’

🎁 Contributing

This repository is for Stethoscope's embeddable web app. We love contributions, so please read our Contributing Guidelines and Code of Conduct and open an issue or make a pull request!

Issues

We use the stethoscope-js/stethoscope repository for issues for all projects, including this one. If you found a bug or have a feature request, open an issue in the Stethoscope repository and add the label "embed".

πŸ’» Usage

To use the web app, you have to visit a URL like the following:

https://stethoscope.js.org/embed/?repo=AnandChowdhary%2Flife&api=rescuetime-time-tracking&latest=top-overview.weeks

You can simple embed this using an HTML <iframe> element:

<iframe title="RescueTime data" src="https://stethoscope.js.org/embed/?repo=AnandChowdhary%2Flife&api=rescuetime-time-tracking&latest=top-overview.weeks"></iframe>

In the above example, the query parameters are the following, URL encoded:

  • repo: Your repository on GitHub, e.g., AnandChowdhary/life
  • api: The data you want to visualize, e.g., rescuetime-time-tracking, which corresponds to the directory in ./data
  • latest: The visualization to display, based on the specific api.json keys, e.g., top-overview.days

Here are some more visualization of real-time data from my life:

This is a real-time screenshot of the above RescueTime weekly overview URL:

Screenshot of visualization

πŸ“„ License