Commit 91012a3e authored by Paul Asmuth's avatar Paul Asmuth
Browse files

hacketyhack

parent 05cac9a8

web/fnordquery.html

+1 −1
Original line number Diff line number Diff line
@@ -4,7 +4,7 @@ 
    <title>FnordQuery</title>

    <script src='vendor/jquery-1.6.2.min.js' type='text/javascript'></script>

    <script src='vendor/d3.v2.js' type='text/javascript'></script>

    <script src='fnordquery.js' type='text/javascript'></script>

    <script src='src/fnordquery.js' type='text/javascript'></script>

    <link href='fnordquery.css' rel='stylesheet' type='text/css'>

  </head>

</html>

web/src/fnordquery.js

0 → 100644
+3 −0
Original line number Diff line number Diff line 
fnordquery = {

  widgets: {}

}
 
 No newline at end of file

web/src/fnordquery.timeseries_widget.js

0 → 100644
+158 −0
Original line number Diff line number Diff line 
fnordquery.widgets.timeseries_widget = function(){



    var widget_uid = "fnord-" + parseInt(Math.random()*99990000);

    var width, height, opts;



    function render(_opts){

      opts = _opts;



      draw_layout();



      width = opts.elem.width();

      height = opts.height || 350;



      canvas = d3.select('#container-'+widget_uid)

        .append("svg:svg")

        .attr("width", width)

        .attr("height", height);



      //for (ind in opts.series){



        

        var seriesData = [ [], [], [], [], [], [], [], [], [] ];

        var random = new Rickshaw.Fixtures.RandomData(150);



        for (var i = 0; i < 150; i++) {

          random.addData(seriesData);

        }





        var palette = new Rickshaw.Color.Palette( { scheme: 'classic9' } );



        var graph = new Rickshaw.Graph( {

          element: document.getElementById("chart"),

          width: 1630,

          height: 500,

          renderer: 'area',

          stroke: true,

          series: [

            {

              color: palette.color(),

              data: seriesData[0],

              name: 'Moscow'

            }, {

              color: palette.color(),

              data: seriesData[1],

              name: 'Shanghai'

            }, {

              color: palette.color(),

              data: seriesData[2],

              name: 'Amsterdam'

            }, {

              color: palette.color(),

              data: seriesData[3],

              name: 'Paris'

            }, {

              color: palette.color(),

              data: seriesData[4],

              name: 'Tokyo'

            }, {

              color: palette.color(),

              data: seriesData[5],

              name: 'London'

            }, {

              color: palette.color(),

              data: seriesData[6],

              name: 'New York'

            }

          ]

        } );



        graph.render();



        var hoverDetail = new Rickshaw.Graph.HoverDetail( {

          graph: graph

        } );



        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 highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {

          graph: graph,

          legend: legend

        } );



        var smoother = new Rickshaw.Graph.Smoother( {

          graph: graph,

          element: $('#smoother')

        } );



        var ticksTreatment = 'glow';



        var xAxis = new Rickshaw.Graph.Axis.Time( {

          graph: graph,

          ticksTreatment: ticksTreatment

        } );



        xAxis.render();



        var yAxis = new Rickshaw.Graph.Axis.Y( {

          graph: graph,

          tickFormat: Rickshaw.Fixtures.Number.formatKMBT,

          ticksTreatment: ticksTreatment

        } );



        yAxis.render();





    }



    function draw_layout(){

      $(opts.elem)

        .append(

          $('<div></div>')

            .attr('class', 'headbar')

            .append($('<h2></h2>').html(opts.title)) 

        )

        .append(

          $('<div></div>')

            .attr('id', 'container-'+widget_uid).css({

              height: opts.height + 6,

              marginBottom: 20,

              overflow: 'hidden'

            })

        );



      // if(opts.ticks){

      //   $('.headbar', opts.elem).append('<div class="tick_btns btn_group"></div>');

      //   for(__tick in opts.ticks){

      //     var _tick = opts.ticks[__tick];

      //     $('.tick_btns', opts.elem).append(

      //       $('<div></div>').attr('class', 'button tick').append($('<span></span>')

      //         .html(FnordMetric.util.formatTimeRange(_tick)))

      //         .attr('data-tick', _tick)

      //         .click(changeTick)  

      //     );

      //   }

      // }

    }







    return {

      render: render

    }



};

web/test.html

+11 −116
Original line number Diff line number Diff line
@@ -6,39 +6,28 @@ 
    <script src='vendor/jquery-ui.min.js' type='text/javascript'></script>

    <script src='vendor/d3.v2.js' type='text/javascript'></script>

    <script src='vendor/rickshaw.js' type='text/javascript'></script>



    <script src='fnordquery.js' type='text/javascript'></script>

    <link href='vendor/rickshaw.css' rel='stylesheet' type='text/css'>



    <script src='src/fnordquery.js' type='text/javascript'></script>

    <script src='src/fnordquery.timeseries_widget.js' type='text/javascript'></script>

    <link href='fnordquery.css' rel='stylesheet' type='text/css'>

  </head>

</html>

<body class="inner">



<h1>Live Search Queries</h1>

<h3>Live Search Queries</h3>

<h1>Gross Search Volume</h1>

<h3>NumericTimeseries Report</h3>



<ul class="ui_tabs tabs">

  <li data-tab="Overview" class="active"><a href="#">Overview</a></li>

</ul>



<div class="widget RealtimeValueWidget full_width" style="width: 1688px; ">

  <div class="headbar">

    <h2>Realtime Queries</h2>

    <div class="tick_btns btn_group" style="margin-right:17px;">

      <div class="button tick" data-tick="3"><span>3 sec</span></div>

      <div class="button tick" data-tick="5"><span>5 sec</span></div>

      <div class="button tick" data-tick="15"><span>15 sec</span></div>

      <div class="button tick" data-tick="30"><span>30 sec</span></div>

    </div>

  </div>

</div>



<div class="mywidget"></div>





<div id="content">



  <form id="side_panel">



  <form id="side_panel" style="display:none;">

    <section><div id="legend"></div></section>

    <section>

      <div id="renderer_form" class="toggler">
@@ -102,104 +91,10 @@ 
</div>



<script>



var seriesData = [ [], [], [], [], [], [], [], [], [] ];

var random = new Rickshaw.Fixtures.RandomData(150);



for (var i = 0; i < 150; i++) {

  random.addData(seriesData);

}



var palette = new Rickshaw.Color.Palette( { scheme: 'classic9' } );



var graph = new Rickshaw.Graph( {

  element: document.getElementById("chart"),

  width: 1630,

  height: 500,

  renderer: 'area',

  stroke: true,

  series: [

    {

      color: palette.color(),

      data: seriesData[0],

      name: 'Moscow'

    }, {

      color: palette.color(),

      data: seriesData[1],

      name: 'Shanghai'

    }, {

      color: palette.color(),

      data: seriesData[2],

      name: 'Amsterdam'

    }, {

      color: palette.color(),

      data: seriesData[3],

      name: 'Paris'

    }, {

      color: palette.color(),

      data: seriesData[4],

      name: 'Tokyo'

    }, {

      color: palette.color(),

      data: seriesData[5],

      name: 'London'

    }, {

      color: palette.color(),

      data: seriesData[6],

      name: 'New York'

    }

  ]

} );



graph.render();



var hoverDetail = new Rickshaw.Graph.HoverDetail( {

  graph: graph

} );



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 highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {

  graph: graph,

  legend: legend

} );



var smoother = new Rickshaw.Graph.Smoother( {

  graph: graph,

  element: $('#smoother')

} );



var ticksTreatment = 'glow';



var xAxis = new Rickshaw.Graph.Axis.Time( {

  graph: graph,

  ticksTreatment: ticksTreatment

} );



xAxis.render();



var yAxis = new Rickshaw.Graph.Axis.Y( {

  graph: graph,

  tickFormat: Rickshaw.Fixtures.Number.formatKMBT,

  ticksTreatment: ticksTreatment

} );



yAxis.render();





  fnordquery.widgets.timeseries_widget().render({

    title: "Fnord!!!!",

    elem: $('.mywidget')

  })

</script>



</body>
 
 No newline at end of file

CRA Git | Maintained and supported by SUSTech CRA and CCSE