Giter VIP home page Giter VIP logo

sliding-chart's Introduction

Visualise electrocardiogram (ECG) data using Google Sheets & Plotly for JavaScript.

With more & more data being deployed into the cloud, there is a need to be able to fetch / stream the data directly from the cloud into end users' device(s). This project is a minimal application that fetches sample ECG data (in csv format) from a publicly shared google sheet, parses the fields and plots into a browser window using Plotly.js

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

  1. A code editor (such as Visual Studio Code in this case. VSC provides a "live-server" plugin, a handy tool for testing.)
  2. A browser (Google Chrome browser in this case).
  3. A Google Sheet (comes as part of GSuite Apps) where ECG data may be stored and retrieved as a CSV file.

Installing

To install Visual Studio Code on your platform, please follow instructions detailed under https://code.visualstudio.com/docs/setup/setup-overview

How to get ECG samples and use in google sheets?

  1. From website - https://physionet.org/cgi-bin/atm/ATM, make suitable selections in the tool. Data samples are generated at the bottom of the page.



  1. Save the CSV file onto your computer.

  1. Open Google Sheets & import the csv file from previous step.

  1. From Google Sheets main menu, choose File -> "Publish to web" option & copy the link into your script code.
const uri = ("https://docs.google.com/spreadsheets/d/e/2PACX-1vRhJSg7JV5W_LALesi4F20AWr6cCev99mr12Zh9j6At3TDJWGqYf4qsblAvLYPbugcnK0FOJ_WMnWRV/pub?gid=2093731892&single=true&output=csv");

How to test?



  • Click on "Go-Live" if you're using Visual Studio Code with the plugin installed.

Sample Output


preview-of-output

Coding style tests

TBD

Deployment

TBD

Built & Tested With/On

  • Ubuntu 14.04 LTS
  • Microsoft Visual Studio Code version 1.34.0
  • GSuite (for Google Sheets App)
  • Google Chrome version 74.0.3729

Troubleshooting

Problem: I notice following error in the browser console

*Access to XMLHttpRequest at 'https://docs.google.com...&output=csv' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Solution 1:

Please check SO @ https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present?rq=1

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

  • Subramanya Sheshadri - Initial work

See also the list of CONTRIBUTORS.md who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

sliding-chart's People

Contributors

sshesh avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

sliding-chart's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.