

In [10]:

    
src = """
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://api.cmucreatelab.org/timeline-chart-0.1/grapher2.nocache.js"></script>
<style type="text/css">
body {
   font-family: "Gill Sans Light", Verdana, Arial, sans-serif !important;
   font-size: 10pt !important;
}

</style>
<script>
var series = [];
var dateAxis;

window.grapherLoad = function() {
    dateAxis = new DateAxis("dateAxis", "horizontal", {min: 1398916800, max: 1401595200});

    series[0] = {}
    series[0].axis = new NumberAxis('series0axis', "vertical", {min: -0.01, max: 0.05});

    var datasource = function(level, offset, successCallback, failureCallback) {
      $.ajax({
        url:'http://fluxtream-api-proxy.cmucreatelab.org/api/bodytrack/tiles/1968/ACHD_Liberty.H2S_PPM/'+level+'.'+offset+'.json', 
        success:function(data){successCallback(JSON.stringify(data))},
        failure:failureCallback,
        headers: {Authorization: 'Basic ' + btoa('achd:achdmirror')}
      });
    }
    var plot = new DataSeriesPlot(datasource, dateAxis, series[0].axis, {});
    plot.setStyle(
          {
             "styles" : [
                {
                   "type" : "line",
                   "lineWidth" : 1,
                   "show" : true,
                   "color" : "#0000ff"
                },
                {
                   "type" : "lollipop",
                   "lineWidth" : 1,
                   "radius" : 0,
                   "fill" : false,
                   "show" : true,
                   "color" : "#0000ff"
                }
             ],
             highlight : {
                "lineWidth" : 1,
                "styles" : [
                   {
                      "type" : "lollipop",
                      "color" : "#ff0000",
                      "radius" : 1,
                      "lineWidth" : 1,
                      "fill" : false
                   },
                   {
                      "show" : true,
                      "type" : "value",
                      "fillColor" : "#ff0000",
                      "marginWidth" : 10,
                      "font" : "7pt Helvetica,Arial,Verdana,sans-serif",
                      "verticalOffset" : 7,
                      "numberFormat" : "###,##0.0##"
                   }
                ]
             }
          }
    );
    series[0].pc = new PlotContainer("series0", false, [plot]);


    series[1] = {}
    series[1].axis = new NumberAxis('series1axis', "vertical", {min: -0.01, max: 0.05});

    var datasource = function(level, offset, successCallback, failureCallback) {
      $.ajax({
        url:'http://fluxtream-api-proxy.cmucreatelab.org/api/bodytrack/tiles/1968/ACHD_Avalon.H2S_PPM/'+level+'.'+offset+'.json', 
        success:function(data){successCallback(JSON.stringify(data))},
        failure:failureCallback,
        headers: {Authorization: 'Basic ' + btoa('achd:achdmirror')}
      });
    }
    var plot = new DataSeriesPlot(datasource, dateAxis, series[1].axis, {});
    plot.setStyle(
          {
             "styles" : [
                {
                   "type" : "line",
                   "lineWidth" : 1,
                   "show" : true,
                   "color" : "#0000ff"
                },
                {
                   "type" : "lollipop",
                   "lineWidth" : 1,
                   "radius" : 0,
                   "fill" : false,
                   "show" : true,
                   "color" : "#0000ff"
                }
             ],
             highlight : {
                "lineWidth" : 1,
                "styles" : [
                   {
                      "type" : "lollipop",
                      "color" : "#ff0000",
                      "radius" : 1,
                      "lineWidth" : 1,
                      "fill" : false
                   },
                   {
                      "show" : true,
                      "type" : "value",
                      "fillColor" : "#ff0000",
                      "marginWidth" : 10,
                      "font" : "7pt Helvetica,Arial,Verdana,sans-serif",
                      "verticalOffset" : 7,
                      "numberFormat" : "###,##0.0##"
                   }
                ]
             }
          }
    );
    series[1].pc = new PlotContainer("series1", false, [plot]);




    $(window).resize(setSizes);
    setSizes();
};

function setSizes() {
   dateAxis.setSize($('#dateAxis').width(), $("#dateAxis").height(), SequenceNumber.getNext());
   for (var i = 0; i < 2; i++) {
     series[i].axis.setSize($('#series'+i+'axis').width(), $('#series'+i+'axis').height(), SequenceNumber.getNext());
     series[i].pc.setSize($('#series'+i).width(), $('#series'+i).height(), SequenceNumber.getNext());
   }
}

function displayValue(val) {
   $("#valueLabel").html(val ? val['dateString'] + " " + val['valueString'] : "");
}

</script>
</head>
<body>
<div style="width:100%; height:39px">
<div id="dateAxis" style="position: fixed; left:100px; right:30px; height:37px; border:1px solid black"></div>
</div>
<div style="width:100%; height:75px; margin-top:-1px">
<div id="series0title" style="position: fixed; left:0px; width:99px; height:73px; border:1px solid black"></div>
<div id="series0" style="position: fixed; left:100px; right:30px; height:73px; border:1px solid black"></div>
<div id="series0axis" style="position: fixed; right:0px; width:29px; height:73px; border:1px solid black"></div>
</div>
<div style="width:100%; height:75px; margin-top:-1px">
<div id="series1title" style="position: fixed; left:0px; width:99px; height:73px; border:1px solid black"></div>
<div id="series1" style="position: fixed; left:100px; right:30px; height:73px; border:1px solid black"></div>
<div id="series1axis" style="position: fixed; right:0px; width:29px; height:73px; border:1px solid black"></div>
</div>
<canvas id="narrow" style="width:100%; height:73px"></canvas>
</body>
</html>
"""

iframe_with_source(src)









    Out[10]: