YUI 3.x Home -

YUI Library Examples: Charts: Update Chart Axis

Charts: Update Chart Axis

This example shows how to access Chart instance's value axis after the Chart has rendered.

View example in new window.

Access and Update a Chart Instance's Axis.

Often times, you will need to update a chart after it has been rendered. This example demonstrates how to access and update an axis. Specifically, we'll update the rotation and color of the axis labels.

A Chart instance's axes can be accessed through the getAxisByKey method. This method takes the axis' key identifier as an argument. If you have explicitly set your axis through the axes attribute, you will know the key identifier. If not, the default key identifier for the value axis is "values" and the default key identifier for the category axis is category. Once you have a reference for the axis, you can update all of its public attributes.

  1. YUI().use('charts', function (Y) 
  2. { 
  3.     //dataProvider source
  4.     var myDataValues = [ 
  5.         {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
  6.         {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100}, 
  7.         {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500}, 
  8.         {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800}, 
  9.         {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
  10.         {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200} 
  11.     ];
  12.  
  13.     //Define our axes for the chart.
  14.     var myAxes = {
  15.         financials:{
  16.             keys:["miscellaneous", "revenue", "expenses"],
  17.             position:"right",
  18.             type:"numeric",
  19.             styles:{
  20.                 majorTicks:{
  21.                     display: "none"
  22.                 }
  23.             }
  24.         },
  25.         dateRange:{
  26.             keys:["date"],
  27.             position:"bottom",
  28.             type:"category",
  29.             styles:{
  30.                 majorTicks:{
  31.                     display: "none"
  32.                 },
  33.                 label: {
  34.                     rotation:-45,
  35.                     margin:{top:5}
  36.                 }
  37.             }
  38.         }
  39.     };
  40.  
  41.     //instantiate the chart
  42.     var myChart = new Y.Chart({
  43.                         type:"column",
  44.                         categoryKey:"date",
  45.                         dataProvider:myDataValues, 
  46.                         axes:myAxes, 
  47.                         horizontalGridlines: true,
  48.                         verticalGridlines: true,
  49.                         render:"#mychart"
  50.                     });
  51.  
  52.     //Click handler
  53.     Y.on("click", function(e) {
  54.         var axisName = document.getElementById("axisSelector").value,
  55.             rotation = document.getElementById("rotation").value,
  56.             color = document.getElementById("color").value,
  57.             label = null,
  58.             axis;
  59.         if(axisName)
  60.         {
  61.             axis = myChart.getAxisByKey(axisName);
  62.             if(!isNaN(rotation))
  63.             {
  64.                 label = {rotation:rotation};
  65.             }
  66.             if(color)
  67.             {
  68.                 if(!label)
  69.                 {
  70.                     label = {};
  71.                 }
  72.                 label.color = color;
  73.             }
  74.             if(label)
  75.             {
  76.                 axis.set("styles", {label:label});
  77.             }
  78.         }
  79.    }, "#updateAxis");
  80. });
YUI().use('charts', function (Y) 
{ 
    //dataProvider source
    var myDataValues = [ 
        {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
        {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100}, 
        {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500}, 
        {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800}, 
        {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
        {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200} 
    ];
 
    //Define our axes for the chart.
    var myAxes = {
        financials:{
            keys:["miscellaneous", "revenue", "expenses"],
            position:"right",
            type:"numeric",
            styles:{
                majorTicks:{
                    display: "none"
                }
            }
        },
        dateRange:{
            keys:["date"],
            position:"bottom",
            type:"category",
            styles:{
                majorTicks:{
                    display: "none"
                },
                label: {
                    rotation:-45,
                    margin:{top:5}
                }
            }
        }
    };
 
    //instantiate the chart
    var myChart = new Y.Chart({
                        type:"column",
                        categoryKey:"date",
                        dataProvider:myDataValues, 
                        axes:myAxes, 
                        horizontalGridlines: true,
                        verticalGridlines: true,
                        render:"#mychart"
                    });
 
    //Click handler
    Y.on("click", function(e) {
        var axisName = document.getElementById("axisSelector").value,
            rotation = document.getElementById("rotation").value,
            color = document.getElementById("color").value,
            label = null,
            axis;
        if(axisName)
        {
            axis = myChart.getAxisByKey(axisName);
            if(!isNaN(rotation))
            {
                label = {rotation:rotation};
            }
            if(color)
            {
                if(!label)
                {
                    label = {};
                }
                label.color = color;
            }
            if(label)
            {
                axis.set("styles", {label:label});
            }
        }
   }, "#updateAxis");
});

More Charts Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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