bobamo /plugins/visualize/public/index.html

Language HTML Lines 113
MD5 Hash a521c61e388725060436a1e920698593
Repository git://github.com/jspears/bobamo.git View Raw File
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Visualization Plugin</title>
    <link rel="stylesheet" href="/bobamo/visualize/examples/style.css" type="text/css" />
    <link href="/bobamo/visualize/examples/colorbrewer.css" rel="stylesheet"/>
    <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
    <script>
        //a stub for IE.
        if (!window.console) {
            window.console = {
                log:function () {
                },
                error:function () {
                },
                warn:function () {
                }
            }
        }
        window.useAuthentication = false;

    </script>
    <link rel="stylesheet" href="../less/">
    <link rel="stylesheet" href="../css/styles.css">
    <link rel="stylesheet" href="../js/libs/table/jquery.sorter.css">
    <link rel="stylesheet" href="../js/libs/backbone-forms/src/backbone-forms.css">
    <link rel="stylesheet" href="../js/libs/backbone-forms/test/lib/jquery-ui/flick/jquery-ui-1.8.14.custom.css">
    <link rel="stylesheet" href="../js/libs/jquery-miniColors/jquery.miniColors.css">
    <link href="/bobamo//favicon.ico" rel="shortcut icon">
    <script type="text/javascript" src="../js/libs/require/require-jquery.js"></script>
    <script type="text/javascript">
        require.config({
            baseUrl:'/bobamo/js',
            paths:{
                loader:'libs/backbone/loader',
                underscore:'libs/underscore/underscore-1.3.1-amd',
                Backbone:'libs/backbone/backbone-0.9.1-amd',
                'jquery-ui':'libs/backbone-forms/test/lib/jquery-ui/jquery-ui-1.8.14.custom.min',
                'Backbone.Form':'libs/backbone-forms/src/backbone-forms',
                'jquery-editors':'libs/backbone-forms/src/jquery-ui-editors',
                'bootstrap':'libs/bootstrap/js',
                templates:'../templates',
                session:'/bobamo/session',
                static:'/bobamo/static',
                imageupload:'/bobamo/imageupload',
                appeditor:'/bobamo/appeditor',
                modeleditor:'/bobamo/modeleditor',
                less:'/bobamo/less',
                generator:'/bobamo/generator',
                rest:'/bobamo/rest',
                mongoose:'/bobamo/mongoose',
                package:'/bobamo/package',
                tpl:'../tpl',
                visualize:'/bobamo/visualize/js',
                d3:'/bobamo/visualize/js/backbone-d3/d3',
                'Backbone.d3':'/bobamo/visualize/js/backbone-d3/backbone-d3'
            }
        });
    </script>
    <style>
        #chart {
            font: 10px sans-serif;
            shape-rendering: crispEdges;
        }

        .day {
            fill: #fff;
            stroke: #ccc;
        }

        .month {
            fill: none;
            stroke: #000;
            stroke-width: 2px;
        }
    </style>
</head>
<body>
<h3>Test Visualization</h3>
<button id="values">click</button>
<div id="chart"></div>
<script type="text/javascript">
    require(['jquery', 'Backbone', 'visualize/backbone-d3/backbone-d3', 'visualize/backbone-d3/visualisations/calendar' ], function ($, Backbone,B3d, Calendar) {
        var UserCalendar = Calendar.Collection.extend({
//            url:'/bobamo/visualize/examples/calendar.json'
            url:'/bobamo/visualize/data/user',
            parse:function (resp) {
                return resp.payload
            }
        });
        var series1 = new UserCalendar()
        var cal = new Calendar.View(series1, {div:'#chart'});
        $('#values').on('click', function () {
            series1.fetch();
        });
    });

    //        series4.reset([
    //            new DataPoint({x:1, y:5, id:1}),
    //            new DataPoint({x:2, y:4, id:2}),
    //            new DataPoint({x:3, y:3, id:3}),
    //            new DataPoint({x:4, y:2, id:4}),
    //            new DataPoint({x:5, y:1, id:5})
    //        ]);
    //    })
</script>
</body>
</html>
Back to Top