Build a Grid (Table) from yahoo quotes (IE only) : Table Grid : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Table Grid »

 

Build a Grid (Table) from yahoo quotes (IE only)



<html>
<head>
  <title>ActiveWidgets Grid :: Examples</title>
  <style> body, html {margin:0px; padding: 0px; overflow: hidden;</style>

  <!-- ActiveWidgets stylesheet and scripts -->
  <link href="gridRuntime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
  <script src="gridRuntime/lib/grid.js"></script>

  <!-- grid format -->
  <style>
    .active-controls-grid {height: 100%; font: menu;}

    .active-column-{width: 80px;}
    .active-column-{width: 80px; text-align: right; background-color: threedlightshadow;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}

    .active-grid-column {border-right: 1px solid threedshadow;}
    .active-grid-row {border-bottom: 1px solid threedlightshadow;}
  </style>
</head>
<body>
  <script>

  //  create ActiveWidgets data model - text-based table
  var table = new Active.Text.Table;

  //  Yahoo provides 15min delayed stock quotes in CSV format
  var url = "http://finance.yahoo.com/d/quotes.csv?s=" +
        "MSFT,ORCL,SAP,CA,ERTS,SFTBF,VRTS,SYMC,INFY,INTU,ADBE,PSFT,SEBL,BEAS,SNPS,CHKP,MERQ,DOX,CTXS,KNM" +
        "&f=sl1d1t1c1ohgv&e=.csv";

  //  set data URL
  table.setURL(url);

  //  start asyncronous data retrieval
  table.request();

  //  define column labels
  var columnNames = ["Ticker""Last""Date""Time""Change""Close""Open""High""Volume"];
  var columnOrder = [014832567];

  //  create ActiveWidgets Grid javascript object
  var obj = new Active.Controls.Grid;

  //  provide column labels
  obj.setColumnProperty("texts", columnNames);
  obj.setColumnProperty("values", columnOrder);

  //  provide external model as a grid data source
  obj.setDataModel(table);

  //  write grid html to the page
  document.write(obj);

  </script>
</body>
</html>

           
       

Download : Download nav_ActiveWidgets.zip nav_ActiveWidgets.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Table Grid