IntroductionΒΆ
We can look at the javascript example at dygraphs.com.
<script type="text/javascript">
g = new Dygraph(
document.getElementById("demodiv"),
"ny-vs-sf.txt",
{
rollPeriod: 14,
showRoller: true,
customBars: true,
title: 'NYC vs. SF',
ylabel: 'Temperature (F)',
legend: 'always'
}
);
</script>
For dygraph to work, we need to specify at least three things in html code.
- g: the javascript variable of the Dygraph object
- demodiv: The div id. dygraph will draw the chart on this part of the page.
- ny-vs-sf.txt: The url path to the data file.
We can use the following python codes to generate a random array and plot it with dyplot.
import numpy as np
import pandas as pd
from dyplot.dygraphs import Dygraphs
if __name__ == '__main__':
foo = np.random.rand(100)
boo = pd.Series(foo, index=range(0,100))
dg = Dygraphs(boo.index, "date")
dg.plot(series="Random", mseries=boo)
dg.set_options(title="Tutorial 0")
div = dg.savefig(csv_file="tutorial0.csv", div_id="demodiv", js_vid="jid", html_file="tutorial0.html")
dg.savefig return the html codes to be embedded in html and save html codes to tutorial0.html. The content of div is:
<div id="demodiv" style="width:1024px; height:600px;"></div>
<script type="text/javascript">
jid = new Dygraph(
document.getElementById("demodiv"),
"tutorial0.csv", // path to CSV file
{"legend": "always", "series": {"Random": {"axis": "y"}}, "showRoller": false, "ylabel": "Y Values", "title": "Tutorial 0", "customBars": true, "axes": {"x": {}, "y": {"valueRange": [0.025494957864579806, 1.0853730685966185]}, "y2": {"valueRange": []}}} );
jid.ready(function() {
jid.setAnnotations([] );
});
</script>
You can see the output.