Rose User Guide - Advanced Tutorials: Multiple Inheritance output.html

output.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<head>
  <title>Output</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function startDrawing() {
    var data = new google.visualization.DataTable();
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    data.addColumn('number', 'Time');
    var time_dist_data = {};
    var colours_present = [];
    $.each(["blue", "green", "red"], function(i, colour) {
        $.ajax({
            url: colour + ".json",
            dataType: "json",
            success: function(json_data) {
                colours_present.push(colour);
                $.each(Object.keys(json_data), function(i, time) {
                    if (!time_dist_data.hasOwnProperty(time)) {
                        time_dist_data[time] = {};
                    }
                    time_dist_data[time][colour] = json_data[time];
                });
            }
        });
    });
    $(document).ajaxStop(function() {
        colours_present.sort();
        $.each(colours_present, function() {
            data.addColumn('number', 'Distance: ' + this);
        });
        times = Object.keys(time_dist_data).sort(function(t1, t2) {
            return t1 - t2;
        });
        var i = 0;
        var intId = setInterval(function () {
            time = times[i];
            var row_data = [parseFloat(time)];
            $.each(colours_present, function() {
                row_data.push(time_dist_data[time][this]);
            });
            data.addRow(row_data);
            chart.draw(data, {curveType: "function",
                          width: 500, height: 400,
                          colors: colours_present,
                          vAxis: {title: "Distance", minValue: 0.0, maxValue: 450.0},
                          hAxis: {title: "Time", minValue: 0.0, maxValue: 15.0},
            });
            i += 1;
            if (i + 1 == times.length) {
                clearInterval(intId);
            }
        }, 50);
    });
}
google.setOnLoadCallback(startDrawing);
</script>
</head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>