<div id="mychart"></div>
<form id="changeValue" class="fields" action="#">
    <div class="body">
    <p>
        <label for="seriesSelector">series:</label>
        <select name="seriesSelector" id="seriesSelector">
            <option value="expenses">expenses</option>
            <option value="revenue">revenue</option>
        </select>
    </p>
    <p>
        <label for="fillColor">fill color:</label>
        <input type="text" name="fillColor" id="fillColor" />
    </p>
    <p>
        <label for="borderColor">border color:</label>
        <input type="text" name="borderColor" id="borderColor" />
    </p>
    <p>
        <label for="borderWeight">border weight:</label>
        <input type="text" name="borderColor" id="borderWeight" />
    </p>
    </div>
    <div class="footer">
    <p>
        <button type="button" class="action" id="updateSeries">Update Series</button>
    </p>
    </div>
</form>
<script type="text/javascript">
(function() {
    YUI().use('escape', '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 = Y.one("#seriesSelector").get("value"),
                fillColor = Y.Escape.html(Y.one("#fillColor").get("value")),
                borderColor = Y.Escape.html(Y.one("#borderColor").get("value")),
                borderWeight = parseFloat(Y.one("#borderWeight").get("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");
    });
})();
</script>
