<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Specify Chart Type</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Specify Chart Type</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><style scoped>
#mychart {
margin:10px 10px 10px 10px;
width:90%;
max-width: 800px;
height:400px;
}
</style>
<div class="intro">
<p>This example shows how to create a column <code>Chart</code> with multiple series.</p>
</div>
<div class="example">
<div id="mychart"></div>
<script type="text/javascript">
(function() {
YUI().use('charts', function (Y)
{
var myDataValues = [
{category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
{category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},
{category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},
{category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
{category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
];
var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart", type:"column"});
});
})();
</script>
</div>
<h3>This example shows how to create a column Chart with multiple series.</h3>
<p>In the previous example, we made a line/marker combination chart with multiple series. In this example, we're going use the type attribute to change it to a Column Chart.</p>
<h4>CSS</h4>
<pre class="code prettyprint">#mychart {
margin:10px 10px 10px 10px;
width:90%;
max-width: 800px;
height:400px;
}</pre>
<h4>HTML</h4>
<pre class="code prettyprint"><div id="mychart"></div></pre>
<h4>JavaScript</h4>
<pre class="code prettyprint">var myDataValues = [
{category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
{category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},
{category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},
{category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
{category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
];
var mychart = new Y.Chart({
dataProvider: myDataValues,
render: "#mychart",
type: "column"
});</pre>
<p>By default, Chart's series data display as combo series. (combination of line and marker with an optional fill) In this example, changing the type attribute allowed us to display the same data with column series. The following series types can be specified:</p>
<ul>
<li><code>combo</code>: A combination of line, marker and area series. By default, the line and marker series display. The fills can be toggled on by setting showAreaFill to true. Alternatively, the markers and lines can be turned off by setting showLines or showMarkers to false.</li>
<li><code>column</code>: A histogram plotted horizontally whose values are measured vertically.</li>
<li><code>bar</code>: A histogram plotted vertically whose values are measured horizontally.</li>
<li><code>line</code>: Data points connected by lines.</li>
<li><code>marker</code>: Data points plotted along an x and y axis.</li>
<li><code>area</code>: Fill representing data points.</li>
<li><code>spline</code>: Like a line chart except the data points are connected with a curves.</li>
<li><code>areaspline</code>: Curved area chart.</li>
<li><code>combospline</code>: Curved combo chart.</li>
<li><code>pie</code>: Data is displayed as wedges of a pie.</li>
</ul>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Shows how to use Charts to create a basic chart.">
<a href="charts-simple.html">Basic Charts Implementation</a>
</li>
<li data-description="Shows how to create a chart with multiple series.">
<a href="charts-multiseries.html">Chart with Multiple Series</a>
</li>
<li data-description="Shows how to create a column chart with multiple series.">
<a href="charts-column.html">Specify Chart Type</a>
</li>
<li data-description="Shows how to create a column chart with a stacked numeric axis.">
<a href="charts-stackedcolumn.html">Create Stacked Chart</a>
</li>
<li data-description="Shows how to create a chart with a time axis.">
<a href="charts-timeaxis.html">Create a Chart with a Time Axis</a>
</li>
<li data-description="Shows how to add gridlines to a chart.">
<a href="charts-gridlines.html">Add Gridlines to a Chart</a>
</li>
<li data-description="Shows how to create a chart with planar based events.">
<a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a>
</li>
<li data-description="Shows how to use a chart's styles attribute to customize a chart.">
<a href="charts-globalstyles.html">Customize a Chart</a>
</li>
<li data-description="Shows how to customize the default tooltip of a chart.">
<a href="charts-customizedtooltip.html">Customize a Chart's Tooltip</a>
</li>
<li data-description="Shows how to explicitly define the axes and series for a chart.">
<a href="charts-objectstyles.html">Define a Chart's Axes and Series</a>
</li>
<li data-description="Shows how to use charts to create a pie chart.">
<a href="charts-pie.html">Pie Chart</a>
</li>
<li data-description="Shows how to create a chart with multiple value axes.">
<a href="charts-dualaxes.html">Dual Axes Chart</a>
</li>
<li data-description="Shows how to access a chart instance's value axis after the chart has rendered.">
<a href="charts-axisupdate.html">Update Chart Axis</a>
</li>
<li data-description="Shows how to access a chart instance's seriesCollection after the chart has rendered.">
<a href="charts-seriesupdate.html">Update Chart Series</a>
</li>
<li data-description="Shows how to add a legend to a chart.">
<a href="charts-legend.html">Create Chart with a Legend</a>
</li>
<li data-description="Shows how to render multiple data points in a singe marker.">
<a href="charts-groupmarkers.html">Group Marker Chart</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/charts',
name: 'charts-column',
title: 'Specify Chart Type',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('charts-simple');
YUI.Env.Tests.examples.push('charts-multiseries');
YUI.Env.Tests.examples.push('charts-column');
YUI.Env.Tests.examples.push('charts-stackedcolumn');
YUI.Env.Tests.examples.push('charts-timeaxis');
YUI.Env.Tests.examples.push('charts-gridlines');
YUI.Env.Tests.examples.push('charts-stackedarea');
YUI.Env.Tests.examples.push('charts-globalstyles');
YUI.Env.Tests.examples.push('charts-customizedtooltip');
YUI.Env.Tests.examples.push('charts-objectstyles');
YUI.Env.Tests.examples.push('charts-pie');
YUI.Env.Tests.examples.push('charts-dualaxes');
YUI.Env.Tests.examples.push('charts-axisupdate');
YUI.Env.Tests.examples.push('charts-seriesupdate');
YUI.Env.Tests.examples.push('charts-legend');
YUI.Env.Tests.examples.push('charts-groupmarkers');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>