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

Re: Chart and Datatable Example

Expand Messages
  • 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 1 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 2 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.