YUI 3.x Home -

YUI Library Examples: Charts: Update Chart Series

Charts: Update Chart Series

This example shows how to access a Chart instance's seriesCollection after the Chart has rendered.

Update Series of a Chart Instance After It has Rendered.

You can update a series after the Chart has rendered through the getSeries method. This method returns a reference to a series instance based on either the instance's seriesCollection index or the key value associated with the value data of the series. This example uses the value key of each series to update the fill color, border color and border weight of its markers.

  1. YUI().use('charts', function (Y)
  2. {
  3. var myDataValues = [
  4. {category:"Q1", expenses:137000, revenue:532200},
  5. {category:"Q2", expenses:211000, revenue:689100},
  6. {category:"Q3", expenses:151000, revenue:521500},
  7. {category:"Q4", expenses:163000, revenue:892650}
  8. ];
  9.  
  10. var mychart = new Y.Chart({type:"bar", dataProvider:myDataValues, render:"#mychart"});
  11.  
  12. //Click handler
  13. Y.on("click", function(e) {
  14. var seriesName = document.getElementById("seriesSelector").value,
  15. fillColor = document.getElementById("fillColor").value,
  16. borderColor = document.getElementById("borderColor").value,
  17. borderWeight = document.getElementById("borderWeight").value,
  18. series,
  19. marker = {fill:{}, border:{}};
  20. if(seriesName)
  21. {
  22. series = mychart.getSeries(seriesName);
  23. if(fillColor)
  24. {
  25. marker.fill.color = fillColor;
  26. }
  27. if(borderColor)
  28. {
  29. marker.border.color = borderColor;
  30. }
  31. if(!isNaN(borderWeight))
  32. {
  33. marker.border.weight = borderWeight;
  34. }
  35. series.set("styles", {marker:marker});
  36. }
  37. }, "#updateSeries");
  38. });
YUI().use('charts', function (Y) 
{ 
    var myDataValues = [ 
        {category:"Q1", expenses:137000, revenue:532200}, 
        {category:"Q2", expenses:211000, revenue:689100}, 
        {category:"Q3", expenses:151000, revenue:521500}, 
        {category:"Q4", expenses:163000, revenue:892650}
    ];
 
    var mychart = new Y.Chart({type:"bar", dataProvider:myDataValues, render:"#mychart"});
 
    //Click handler
    Y.on("click", function(e) {
        var seriesName = document.getElementById("seriesSelector").value,
            fillColor = document.getElementById("fillColor").value,
            borderColor = document.getElementById("borderColor").value,
            borderWeight = document.getElementById("borderWeight").value,
            series,
            marker = {fill:{}, border:{}};
        if(seriesName)
        {
            series = mychart.getSeries(seriesName);
            if(fillColor)
            {
                marker.fill.color = fillColor;
            }
            if(borderColor)
            {
                marker.border.color = borderColor;
            }
            if(!isNaN(borderWeight))
            {
                marker.border.weight = borderWeight;
            }
            series.set("styles", {marker:marker});
        }
   }, "#updateSeries");
});

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings