<div id="mychart"></div>

<div class="fields">

<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>

<p>

<button type="button" class="action" id="updateSeries">Update Series</button>

</p>

</div>

<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>