%PDF- %PDF-
Direktori : /home/riacommer/domains/gasworld.com.my/public_html/admin/vendor/rickshaw/examples/ |
Current File : /home/riacommer/domains/gasworld.com.my/public_html/admin/vendor/rickshaw/examples/legend.html |
<!doctype> <head> <link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css"> <link type="text/css" rel="stylesheet" href="../src/css/graph.css"> <link type="text/css" rel="stylesheet" href="../src/css/detail.css"> <link type="text/css" rel="stylesheet" href="../src/css/legend.css"> <link type="text/css" rel="stylesheet" href="css/lines.css"> <script src="../vendor/d3.min.js"></script> <script src="../vendor/d3.layout.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script> <script src="../rickshaw.js"></script> </head> <body> <div id="chart_container"> <div id="chart"></div> <div id="legend_container"> <div id="smoother" title="Smoothing"></div> <div id="legend"></div> </div> <div id="slider"></div> </div> <script> // set up our data series with 50 random data points var seriesData = [ [], [], [] ]; var random = new Rickshaw.Fixtures.RandomData(150); for (var i = 0; i < 150; i++) { random.addData(seriesData); } // instantiate our graph! var graph = new Rickshaw.Graph( { element: document.getElementById("chart"), width: 960, height: 500, renderer: 'area', series: [ { color: "#c05020", data: seriesData[0], name: 'New York' }, { color: "#30c020", data: seriesData[1], name: 'London' }, { color: "#6060c0", data: seriesData[2], name: 'Tokyo' } ] } ); 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 } ); </script> </body>