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

Re: Toggle Items in a Chart

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