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

Chart and Datatable Example

Expand Messages
  • kyuhocha
    Hello I am pretty new to JavaScript and the YUI. I have been looking at the chart and Datatable Example at,
    Message 1 of 3 , Jul 31, 2009
    • 0 Attachment
      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.
    • Ryan V. Bayona
      Hello, To get the recordset in the DataTable you would do,, YourDataTable.getRecordSet().getRecords() and then loop through the array returned by these code.
      Message 2 of 3 , Jul 31, 2009
      • 0 Attachment
        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.
        >
      • 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 3 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.