Personal tools

User:Hisa/cytoscape test: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
Line 7: Line 7:
         </style>
         </style>


         <div id="cytoscapeweb" style="width:100%;height:600px" resize:both;>
         <div id="ont_tree" style="width:100%;height:600px" resize:both;>
             Cytoscape Web will replace the contents of this div with your graph.
             Cytoscape Web will replace the contents of this div with your graph.
         </div>
         </div>




        <!-- JSON support for IE (needed to use JS API) -->
 
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/json2.min.js"></script>
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/json2.min.js"></script>
       
        <!-- Flash embedding utility (needed to embed Cytoscape Web) -->
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/AC_OETags.min.js"></script>
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/AC_OETags.min.js"></script>
       
        <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/cytoscapeweb.min.js"></script>
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/cytoscapeweb.min.js"></script>
       
         <script type="text/javascript">
         <script type="text/javascript">
             window.onload=function() {
             window.onload=function() {
Line 33: Line 28:
                     <node id="1">\
                     <node id="1">\
                         <data key="label">A</data>\
                         <data key="label">A</data>\
                        <data key="weight">2.0</data>\
                     </node>\
                     </node>\
                     <node id="2">\
                     <node id="2">\
                         <data key="label">B</data>\
                         <data key="label">B</data>\
                        <data key="weight">1.5</data>\
                     </node>\
                     </node>\
                     <node id="3">\
                     <node id="3">\
                         <data key="label">C</data>\
                         <data key="label">C</data>\
                        <data key="weight">1.0</data>\
                     </node>\
                     </node>\
                     <edge source="1" target="2">\
                     <edge source="2" target="1">\
                         <data key="label">A to B</data>\
                         <data key="label">A to B</data>\
                     </edge>\
                     </edge>\
Line 61: Line 53:
                 };
                 };
                  
                  
                 var vis = new org.cytoscapeweb.Visualization("cytoscapeweb", options);
                 var vis = new org.cytoscapeweb.Visualization("ont_tree", options);


// draw
// draw
                                 var draw_options = {
                                 var draw_options = {
                    // your data goes here
                     network: xml,
                     network: xml,
                   
                    // show edge labels too
                     edgeLabelsVisible: true,
                     edgeLabelsVisible: true,
                   
//                   layout: "Tree",
                    // let's try another layout
layout: { name: 'Tree', options: { orientation : 'bottomToTop'}},
                    layout: "Tree",
                   
                    // hide pan zoom
                     panZoomControlVisible: false  
                     panZoomControlVisible: false  
                 };
                 };
 
//vis.layout({ name: 'Tree', options: { orientation : {'bottomToTop'} }});
                 vis.draw(draw_options);
                 vis.draw(draw_options);
             };
             };

Revision as of 16:59, 27 June 2012

Cytoscape Web will replace the contents of this div with your graph.