demo_charts_rickshaw.js 4.95 KB
Newer Older
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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
$(function(){
    

    // line chart
    var sin = [], cos = [], sin2 = [];

        for (var i = 0; i < 10; i += 0.3) {
            sin.push({x: i, y: Math.sin(i)})            
            sin2.push({x: i, y: Math.sin(i-1.57)});
            cos.push({x: i, y: Math.cos(i)});            
        }

    var rlp = new Rickshaw.Graph( {	
        element: document.getElementById("charts-lineplot"),
        renderer: 'lineplot',
        min: -1.2,
        max: 1.2,
        padding: { top: 0.1 },
        series: [{data: sin,color: '#33414E',name: "sin"}, 
                 {data: sin2,color: '#1caf9a',name: "sin2"},
                 {data: cos,color: '#B64645',name: "cos"}]
    });

    var hover = new Rickshaw.Graph.HoverDetail({ graph: rlp });

    rlp.render();

    var rlp_resize = function() {                
        rlp.configure({
                width: $("#charts-lineplot").width(),
                height: $("#charts-lineplot").height()
        });
        rlp.render();
    }

    window.addEventListener('resize', rlp_resize); 
    rlp_resize();
    // eof lineplot


    // Line chart
    var seriesData = [ [], [], [] ];
    var random = new Rickshaw.Fixtures.RandomData(50);

    for (var i = 0; i < 50; i++) {
            random.addData(seriesData);
    }

    var rlc = new Rickshaw.Graph( {
            element: document.getElementById("charts-lines"),
            renderer: 'line',
            min: 50,
            series: [{color: "#33414E",data: seriesData[0],name: 'New York'}, 
                     {color: "#1caf9a",data: seriesData[1],name: 'London'}, 
                     {color: "#B64645",data: seriesData[2],name: 'Tokyo'}]
    });

    rlc.render();    

    var hoverDetail = new Rickshaw.Graph.HoverDetail({graph: rlc});
    var axes = new Rickshaw.Graph.Axis.Time({graph: rlc});
    axes.render();

        var rlc_resize = function() {                
                    rlc.configure({
                            width: $("#charts-lines").width(),
                            height: $("#charts-lines").height()
                    });
                    rlc.render();
            }

        window.addEventListener('resize', rlc_resize); 
        rlc_resize();
    // eof line chart

    // Bar chart 
        var rbc = new Rickshaw.Graph({
                unstack: true,
                element: document.querySelector("#charts-column"),            
                min: 30,
                renderer: 'bar',
                series: [{
                        color: '#33414E',
                        data: [{ x: 0, y: 50 }, { x: 1, y: 52 }, { x: 2, y: 36 }, { x: 3, y: 42 }, { x: 4, y: 36 }, { x: 5, y: 50 }]
                },{
                        color: '#1caf9a',
                        data: [{ x: 0, y: 48 }, { x: 1, y: 40 }, { x: 2, y: 45 }, { x: 3, y: 32 }, { x: 4, y: 33 }, { x: 5, y: 45 }]
                },{
                        color: '#B64645',
                        data: [{ x: 0, y: 43 }, { x: 1, y: 35 }, { x: 2, y: 46 }, { x: 3, y: 49 }, { x: 4, y: 34 }, { x: 5, y: 42 }]
                }]
        });

        rbc.render();

        var rbc_resize = function() {                
                    rbc.configure({
                            width: $("#charts-column").width(),
                            height: $("#charts-column").height()
                    });
                    rbc.render();
            }

        var hoverDetail = new Rickshaw.Graph.HoverDetail({graph: rbc});

        window.addEventListener('resize', rbc_resize);        
        rbc_resize();            
    // eof bar chart 
    
    // Area Chart 
        var seriesData = [ [], [], [] ];
        var random = new Rickshaw.Fixtures.RandomData(100);

        for (var i = 0; i < 100; i++) {
                random.addData(seriesData);
        }

        var graph = new Rickshaw.Graph( {
                element: document.getElementById("charts-legend"),
                renderer: 'area',
                width: $("#charts-legend").width(),
                series: [{color: "#33414E",data: seriesData[0],name: 'Total'}, 
                         {color: "#1caf9a",data: seriesData[1],name: 'New'}, 
                         {color: "#B64645",data: seriesData[2],name: 'Returned'}]
        } );

        graph.render();

        var legend = new Rickshaw.Graph.Legend({graph: graph, element: document.getElementById('legend')});
        var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({graph: graph,legend: legend});
        var order = new Rickshaw.Graph.Behavior.Series.Order({graph: graph,legend: legend});
        var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {graph: graph,legend: legend} );        
        
        var resize = function() {                
                graph.configure({
                        width: $("#charts-legend").width(),
                        height: $("#charts-legend").height()
                });
                graph.render();
        }

        window.addEventListener('resize', resize); 
        resize();    
    // eof Area Chart 
});