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

Toggle Items in a Chart

Expand Messages
  • Kyle Decot
    Hello, I m very new to YUI so forgive me if this has been asked before but I am attempting to build a chart that has 4 or 5 different peoples stats. I would
    Message 1 of 2 , May 29, 2008
    • 0 Attachment
      Hello, I'm very new to YUI so forgive me if this has been asked before but I am attempting to
      build a chart that has 4 or 5 different peoples stats. I would like to be able to toggle each
      person on/off with a checkbox. How would I do something like this? Thank You for you're
      help.
    • tripp.bridges
      Hi Kyle, You can write a function that loops through the form field and updates the chart based on what is checked. I have attached some sample code in which I
      Message 2 of 2 , May 30, 2008
      • 0 Attachment
        Hi Kyle,

        You can write a function that loops through the form field and updates
        the chart based on what is checked. I have attached some sample code
        in which I update the "series" attribute of a bar chart when the value
        of a checkbox changes. This should give you a good idea of what to do.

        Thanks,
        Tripp

        <span class="chart_title">Widgets, Inc. Employee Sales per Quarter</span>
        <div id="chart">Unable to load Flash content. The YUI Charts Control
        requires Flash Player 9.0.45 or higher. You can download the latest
        version of Flash Player from the <a
        href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player
        Download Center</a>.</p></div>

        <div id="datatable"></div>

        <script type="text/javascript">

        YAHOO.widget.Chart.SWFURL = "../../build/charts/assets/charts.swf";
        YAHOO.example.people = [
        {quarter:"First", bob: 20000, dave: 23000, sue: 18000},
        {quarter:"Second", bob: 27000, dave: 32000, sue: 26000},
        {quarter:"Third", bob: 23500, dave: 19000, sue: 24000},
        {quarter:"Fourth", bob: 32000, dave: 24000, sue: 36000}
        ];

        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.people);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema =
        {
        fields: ["quarter", "bob", "sue", "dave"]
        };


        var seriesDef = [{displayName:"Sue", xField:"sue",
        style:{color:0xAE91AC}},
        {displayName:"Bob", xField:"bob", style:{color:0x9FB08E}},
        {displayName:"Dave", xField:"dave", style:{color:0xB68B89}}
        ]

        var myChart = new YAHOO.widget.BarChart("chart", myDataSource, {
        yField:"quarter",
        series:seriesDef

        });



        function updateSeries()
        {
        var checkBoxes = document.getElementById("checkboxes");
        var len = checkBoxes.length;
        var newSeries = new Array();
        for(var i = 0;i < len;i++)
        {
        if(checkBoxes[i].checked)
        {
        newSeries.push(seriesDef[i]);
        }
        }

        myChart.set("series", newSeries);

        }
        </script>
        <form id="checkboxes">
        <input type="checkbox" id="Sue" checked="true"
        onchange="updateSeries()">Sue</input>
        <input type="checkbox" id="Bob" checked="true"
        onchange="updateSeries()">Bob</input>
        <input type="checkbox" id="Dave" checked="true"
        onchange="updateSeries()">Dave</input>
        </form>


        --- In ydn-javascript@yahoogroups.com, "Kyle Decot" <owner@...> wrote:
        >
        > Hello, I'm very new to YUI so forgive me if this has been asked
        before but I am attempting to
        > build a chart that has 4 or 5 different peoples stats. I would like
        to be able to toggle each
        > person on/off with a checkbox. How would I do something like this?
        Thank You for you're
        > help.
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.