charts-seriesupdate-source.mustache revision 2431f6aca1be7f7a136c5df34022e3f902490075
<html>
<head>
</head>
<body>
<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('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");
});
})();
</script>
</body>
</html>