Loading ...
Sorry, an error occurred while loading the content.

Re: Chart and Datatable Example

Expand Messages
  • kyuhocha
    Thank you very much for your quick reply. I still do not understand what values YourDataTable.getRecordSet().getRecords()returns. Is there a function to just
    Message 1 of 3 , Jul 31, 2009
    • 0 Attachment
      Thank you very much for your quick reply.

      I still do not understand what values YourDataTable.getRecordSet().getRecords()returns.
      Is there a function to just get the data instance of the whole table
      in the YAHOO.util.DataSource form?

      here is my JavaScript code so you have better understanding of my "noobieness"

      <script type="text/javascript">

      YAHOO.widget.Chart.SWFURL = "yui/build/charts/assets/charts.swf";

      //used to format x axis labels
      YAHOO.example.numberToCurrency = function( value )
      {
      return YAHOO.util.Number.format(Number(value), {prefix: "$", thousandsSeparator: ","});
      }
      //--- data

      YAHOO.example.annualIncome =
      [
      { year: 2003, revenue: 1246852, expense: 1123359, income: 123493 },
      { year: 2004, revenue: 2451876, expense: 2084952, income: 366920 },
      { year: 2005, revenue: 2917246, expense: 2587151, income: 330095 },
      { year: 2006, revenue: 3318185, expense: 3087456, income: 230729 }
      ];

      var incomeData = new YAHOO.util.DataSource( YAHOO.example.annualIncome );
      incomeData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
      incomeData.responseSchema = { fields: [ "year", "revenue", "expense", "income" ] };

      var seriesDef =
      [
      {
      xField: "revenue",
      displayName: "Revenue"
      },
      {
      xField: "expense",
      displayName: "Expense"
      },
      {
      type: "line",
      xField: "income",
      displayName: "Income"
      }
      ];
      var currencyAxis = new YAHOO.widget.NumericAxis();
      currencyAxis.labelFunction = "YAHOO.example.numberToCurrency";
      //manipulating the DOM causes problems in ie, so create after window fires "load"
      var mytable;
      YAHOO.util.Event.addListener(window, "load", function()
      {

      //--- chart

      var mychart = new YAHOO.widget.BarChart( "chart", incomeData,
      {
      series: seriesDef,
      yField: "year",
      xAxis: currencyAxis
      });


      //--- data table

      var columns =
      [
      { key: "year", sortable: true, resizeable: true },
      { key: "revenue", formatter: "currency", sortable: true, resizeable: true, editor: new YAHOO.widget.TextboxCellEditor({validator:YAHOO.widget.DataTable.validateNumber})},
      { key: "expense", formatter: "currency", sortable: true, resizeable: true,editor: new YAHOO.widget.TextboxCellEditor({validator:YAHOO.widget.DataTable.validateNumber}) },
      { key: "income", formatter: "currency", sortable: true, resizeable: true, editor: new YAHOO.widget.TextboxCellEditor({validator:YAHOO.widget.DataTable.validateNumber}) }
      ];
      mytable = new YAHOO.widget.DataTable( "datatable", columns, incomeData,
      { sortedBy: { key: "year", dir: "asc" }
      });
      var highlightEditableCell = function(oArgs) {
      var elCell = oArgs.target;
      if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
      this.highlightCell(elCell);
      }
      };
      mytable.subscribe("cellMouseoverEvent", highlightEditableCell);
      mytable.subscribe("cellMouseoutEvent", mytable.onEventUnhighlightCell);
      mytable.subscribe("cellClickEvent", mytable.onEventShowCellEditor);

      return {
      oDS: incomeData,
      oDT: mytable
      };


      });
      function ReloadChart() {
      var something = mytable.getRecord();
      console.log(something);

      mychart = new YAHOO.widget.BarChart( "chart", something,
      {
      series: seriesDef,
      yField: "year",
      xAxis: currencyAxis
      });}
      </script>

      --- In ydn-javascript@yahoogroups.com, "Ryan V. Bayona" <r2b2_ry@...> wrote:
      >
      > Hello,
      >
      > To get the recordset in the DataTable you would do,,
      >
      > YourDataTable.getRecordSet().getRecords() and then loop through the array returned by these code.
      >
      > You can update the chart by passing a new DataSource to the chart
      >
      > YourChart.set('dataSource',datasource_instance_where_you_passed_the_datatable_records)
      >
      > --- In ydn-javascript@yahoogroups.com, "kyuhocha" <kyuhocha@> wrote:
      > >
      > > Hello
      > >
      > > I am pretty new to JavaScript and the YUI.
      > > I have been looking at the chart and Datatable Example at, http://developer.yahoo.com/yui/examples/charts/charts-datatable.html, and wanted to add more functions to it.
      > >
      > > I want to let the user edit the datatable and when they click on update chart button the chart will refresh to the new data values in the datatable.
      > >
      > > For now I have the editable datatable (by looking at inline cell editing example). But I do not know how to get the data off the new datatable and update the chart.
      > >
      > > Also do I need to make the chart and table variables global if I want to edit them later? If so what is the best approach? I am asking this because I tried to write a function to update the chart but seems like I can not access the function if I place it in the
      > >
      > > YAHOO.util.Event.addListener(window, "load", function()
      > > {...}
      > >
      > > part of the code.
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.