Skip to content

Instantly share code, notes, and snippets.

@msund
Created May 12, 2015 22:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save msund/f9dbc8e1deb13f2f3de6 to your computer and use it in GitHub Desktop.
Save msund/f9dbc8e1deb13f2f3de6 to your computer and use it in GitHub Desktop.
KDNuggest post
If you track events that change--temperature, stock prices, or sales--you need the most recent data. Typical options are: refreshing data with jobs, queries, and code; pay a steep price for clunky desktop software; manually move data and update your graph. <a href="https://plot.ly/">Plotly's<a/> new <a href="http://chriddyp.github.io/external-source-plotter/">Proxy Plotter</a> solves these problems. Easily make, embed, and edit web-based graphs and dashboards that fetch your data. It's free, online, and collaborative. This feature works along with our <a href="https://plot.ly/api">APIs for R, Python, and MATLAB</a>, free <a href="https://plot.ly/online-graphing/">web platform</a>, and <a href="https://plot.ly/product/enterprise/">Enterprise product</a>.
<br>
<br>
<br>
<img src="http://i.imgur.com/cMaJ3qG.png" /></a>
<br>
<br>
<br>
The graph below is an example of an updating plot that fetches data from <a href="https://www.quandl.com/">Quandl</a>. Ploty fetches the most up to date information when you load the page.
<br>
<br>
<br>
<iframe width="640" height="480" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/proxy/plot/?proxy_key=cuJlY8R9h9UUzrO2b6iu&source=https%3A%2F%2Fwww.quandl.com%2Fapi%2Fv1%2Fdatasets%2FNVCA%2FVENTURE_3_10.csv&data=%5B%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Biotechnology%22%2C%22name%22%3A%22Biotechnology%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Business%20Products%20and%20Services%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Business%20Products%20and%20Services%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Computers%20and%20Peripherals%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Computers%20and%20Peripherals%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Consumer%20Products%20and%20Services%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Consumer%20Products%20and%20Services%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Electronics%2FInstrumentation%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Electronics%2FInstrumentation%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Financial%20Services%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Financial%20Services%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Healthcare%20Services%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Healthcare%20Services%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Industrial%2FEnergy%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Industrial%2FEnergy%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22IT%20Services%22%2C%22name%22%3A%22IT%20Services%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Media%20and%20Entertainment%22%2C%22name%22%3A%22Media%20and%20Entertainment%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Medical%20Devices%20and%20Equipment%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Medical%20Devices%20and%20Equipment%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Networking%20and%20Equipment%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Networking%20and%20Equipment%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Other%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Other%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Retailing%2FDistribution%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Retailing%2FDistribution%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Semiconductors%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Semiconductors%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Software%22%2C%22name%22%3A%22Software%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Telecommunications%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Telecommunications%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Unknown%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Unknown%22%7D%5D&layout=%7B%22title%22%3A%22Venture%20Capital%20Investments%20by%20Sector%22%2C%22yaxis%22%3A%7B%22title%22%3A%22Capital%20Investment%20(Millions)%22%2C%22tickprefix%22%3A%22%24%22%7D%7D#"></iframe>
<br>
<br>
<br>
The graph is interactive. Click and drag to zoom, hover to see data, or press the legend items to turn traces on and off. Dates adjusts from years to nanoseconds as you zoom. See our <a href="blog.plot.ly/post/117105992082/time-series-graphs-eleven-stunning-ways-you-can">time series</a> docs to learn more.
<br>
<br>
<br>
<img src="http://i.imgur.com/u5wE0L9.gif" /></a>
<br>
<br>
<br>
<h2>Source</h2>
<br>
<br>
<br>
To build your graph, we'll start with a URL where your data lives (for other uses, <a href="http://help.plot.ly/#tutorialsect">uplodad your files</a>). Plotly fetches the data from this URL whenever you load a graph. For example, the Quandl dataset we're looking at is here:
<br>
<br>
https://www.quandl.com/api/v1/datasets/NVCA/VENTURE_3_10.csv
<br>
<br>
<br>
<h2>Data</h2>
<br>
<br>
<br>
Next we'll add a description of your visualization using <a href="https://plot.ly/javascript-graphing-library/">Plotly's graph JSON</a>. See our <a href="http://chriddyp.github.io/external-source-plotter/quandl/">documentation</a> to learn more. This includes <code>data</code> and <code>layout</code> keys. For the plot we're building, the description is in <a href="https://gist.github.com/msund/0f4011b59f12a7e99d04">this gist</a>. Use special xsrc and ysrc keys to denote the columns that you'd like to plot. For example:
<br>
<br>
<br>
<code>[{"xsrc": "X Data 1", "ysrc": "Y Data 1"}]</code>
<br>
<br>
<br>
<h2>Layout</h2>
<br>
<br>
<br>
Our layout uses JSON that describes other parts of the graph. For example:
<br>
<br>
<br>
<code>{"title": "Example graph"}</code>
<br>
<br>
<br>
<h2>Key</h2>
<br>
<br>
<br>
If you are a paying or enterprise user, you don't need to use this key.
<br>
<code>proxy_key=cuJlY8R9h9UUzrO2b6iu</code>
<br>
<br>
<br>
<h2>Wrapping it all together</h2>
<br>
<br>
<br>
We combine source, data, layout, and key to make <a href="https://plot.ly/proxy/plot/?proxy_key=cuJlY8R9h9UUzrO2b6iu&source=https%3A%2F%2Fwww.quandl.com%2Fapi%2Fv1%2Fdatasets%2FNVCA%2FVENTURE_3_10.csv&data=%5B%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Biotechnology%22%2C%22name%22%3A%22Biotechnology%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Business%20Products%20and%20Services%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Business%20Products%20and%20Services%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Computers%20and%20Peripherals%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Computers%20and%20Peripherals%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Consumer%20Products%20and%20Services%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Consumer%20Products%20and%20Services%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Electronics%2FInstrumentation%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Electronics%2FInstrumentation%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Financial%20Services%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Financial%20Services%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Healthcare%20Services%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Healthcare%20Services%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Industrial%2FEnergy%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Industrial%2FEnergy%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22IT%20Services%22%2C%22name%22%3A%22IT%20Services%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Media%20and%20Entertainment%22%2C%22name%22%3A%22Media%20and%20Entertainment%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Medical%20Devices%20and%20Equipment%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Medical%20Devices%20and%20Equipment%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Networking%20and%20Equipment%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Networking%20and%20Equipment%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Other%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Other%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Retailing%2FDistribution%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Retailing%2FDistribution%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Semiconductors%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Semiconductors%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Software%22%2C%22name%22%3A%22Software%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Telecommunications%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Telecommunications%22%7D%2C%7B%22xsrc%22%3A%22Year%22%2C%22ysrc%22%3A%22Unknown%22%2C%22visible%22%3A%22legendonly%22%2C%22name%22%3A%22Unknown%22%7D%5D&layout=%7B%22title%22%3A%22Venture%20Capital%20Investments%20by%20Sector%22%2C%22yaxis%22%3A%7B%22title%22%3A%22Capital%20Investment%20(Millions)%22%2C%22tickprefix%22%3A%22%24%22%7D%7D">a URL</a> that you paste into your address bar. You can <a href="https://plot.ly/how-to-embed-plotly-graphs-in-websites/">embed the plot</a> in a dashboard, iframe, or other applications, edit the plot in a web app (as seen below), export an image, or <a href="https://plot.ly/online-graphing/tutorials/printing-and-sharing-graphs/">share the plot with collaborators</a>.
<br>
<br>
<br>
<img src="http://i.imgur.com/ygPNFph.png" /></a>
<br>
<br>
<br>
You can use this feature along with our <a href="https://plot.ly/api">APIs for R, Python, and MATLAB</a>, our free web product, and our <a href="https://plot.ly/product/enterprise/">Enterprise product</a>. For advanced use, you can use Plotly in <a href="https://github.com/plotly/Embed-API">dashboards</a>, <a href="plot.ly/ipython-notebooks/">IPython Notebooks</a>, and <a href="moderndata.plot.ly/dashboards-in-r-with-shiny-plotly/">Shiny Apps</a>. The <a href="http://chriddyp.github.io/external-source-plotter/">project page</a> contains this plot, and examples using a SQLite database, Yahoo finance data, Google Drive, GitHub, and Dropbox.
<br>
<br>
<br>
<img src="http://i.imgur.com/7AusV3a.png" /></a>
<br>
<br>
<br>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment