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
      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
        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
          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.