charts-axisupdate.mustache revision d676c69348c891c2a261a6dbd4f450ddb2e312f3
0N/A<style scoped>
0N/A#mychart {
0N/A margin:10px 10px 10px 10px;
0N/A width:90%;
0N/A max-width: 800px;
0N/A height:400px;
0N/A}
0N/A
0N/A.fields label {
0N/A font-weight:bold;
0N/A display:block;
0N/A float:left;
0N/A width:8em;
0N/A}
0N/A
0N/A.fields {
0N/A border-top:1px solid #aaa;
0N/A padding:10px;
0N/A}
0N/A</style>
0N/A<div class="intro">
0N/A<p>This example shows how to access `Chart` instance's value axis after the `Chart` has rendered.</p>
0N/A</div>
0N/A<div class="example">
0N/A{{>charts-axisupdate-source}}
0N/A</div>
0N/A<h3>Access and Update a `Chart` Instance's Axis.</h3>
0N/A
0N/A
0N/A<p>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
0N/Athe axis labels.</p>
0N/A<p>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
0N/Aaxis 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
0N/Aaxis is `category`. Once you have a reference for the axis, you can update all of its public attributes.</p>
0N/A
0N/A```
0N/AYUI().use('charts', function (Y)
0N/A{
0N/A //dataProvider source
0N/A var myDataValues = [
0N/A {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
0N/A {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100},
0N/A {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500},
0N/A {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800},
0N/A {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
0N/A {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200}
0N/A ];
0N/A
0N/A //Define our axes for the chart.
0N/A var myAxes = {
0N/A financials:{
0N/A keys:["miscellaneous", "revenue", "expenses"],
0N/A position:"right",
0N/A type:"numeric",
0N/A styles:{
0N/A majorTicks:{
0N/A display: "none"
0N/A }
0N/A }
0N/A },
0N/A dateRange:{
0N/A keys:["date"],
0N/A position:"bottom",
0N/A type:"category",
0N/A styles:{
0N/A majorTicks:{
0N/A display: "none"
0N/A },
0N/A label: {
0N/A rotation:-45,
0N/A margin:{top:5}
0N/A }
0N/A }
0N/A }
0N/A };
0N/A
0N/A //instantiate the chart
0N/A var myChart = new Y.Chart({
0N/A type:"column",
0N/A categoryKey:"date",
0N/A dataProvider:myDataValues,
0N/A axes:myAxes,
0N/A horizontalGridlines: true,
0N/A verticalGridlines: true,
0N/A render:"#mychart"
0N/A });
0N/A
0N/A //Click handler
0N/A Y.on("click", function(e) {
0N/A var axisName = Y.one("#axisSelector").get("value"),
0N/A rotation = parseFloat(Y.one("#rotation").get("value")),
0N/A color = Y.Escape.html(Y.one("#color").get("value")),
0N/A label = null,
0N/A axis;
0N/A if(axisName)
0N/A {
0N/A axis = myChart.getAxisByKey(axisName);
0N/A if(!isNaN(rotation))
0N/A {
0N/A label = {rotation:rotation};
0N/A }
0N/A if(color)
0N/A {
0N/A if(!label)
0N/A {
0N/A label = {};
0N/A }
0N/A label.color = color;
0N/A }
0N/A if(label)
0N/A {
0N/A axis.set("styles", {label:label});
0N/A }
0N/A }
0N/A }, "#updateAxis");
0N/A});
0N/A```
0N/A