5
<title>Example: Create a Chart with a Time Axis</title>
6
<link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
<link rel="stylesheet" href="../assets/css/main.css">
8
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
<script src="../../build/yui/yui-min.js"></script>
14
<h1>Example: Create a Chart with a Time Axis</h1>
19
<div id="main" class="yui3-u">
20
<div class="content"><style scoped>
22
margin:10px 10px 10px 10px;
29
<p>This example shows how to create a <code>Chart</code> with a Time Axis.</p>
32
<div id="mychart"></div>
33
<script type="text/javascript">
35
YUI().use('charts', function (Y)
38
{date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
39
{date:"2/1/2010", miscellaneous:50, expenses:9100, revenue:100},
40
{date:"3/1/2010", miscellaneous:400, expenses:1100, revenue:1500},
41
{date:"4/1/2010", miscellaneous:200, expenses:1900, revenue:2800},
42
{date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
43
{date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200},
44
{date:"7/1/2010", miscellaneous:6550, expenses:6500, revenue:1100},
45
{date:"8/1/2010", miscellaneous:4005, expenses:2600, revenue:3500},
46
{date:"9/1/2010", miscellaneous:1200, expenses:8900, revenue:3800},
47
{date:"10/1/2010", miscellaneous:2000, expenses:1000, revenue:3650},
48
{date:"11/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
49
{date:"12/1/2010", miscellaneous:5000, expenses:3100, revenue:4100}
52
var mychart = new Y.Chart({
53
dataProvider:myDataValues,
72
<h3>This example shows how to create a Chart with a Time Axis.</h3>
75
<p>When plotting data across a range of dates, it's sometimes preferred to use <code>TimeAxis</code> instead of a <code>CategoryAxis</code>. While a <code>CategoryAxis</code> plots ticks on an
76
axis for each data point on a graph, a <code>TimeAxis</code> plots ticks evenly across a time range. A <code>TimeAxis</code> can be applied to a Chart by setting its <code>categoryType</code>
77
attribute to "time".</p>
79
<pre class="code prettyprint">var myDataValues = [
80
{date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
81
{date:"2/1/2010", miscellaneous:50, expenses:9100, revenue:100},
82
{date:"3/1/2010", miscellaneous:400, expenses:1100, revenue:1500},
83
{date:"4/1/2010", miscellaneous:200, expenses:1900, revenue:2800},
84
{date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
85
{date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200},
86
{date:"7/1/2010", miscellaneous:6550, expenses:6500, revenue:1100},
87
{date:"8/1/2010", miscellaneous:4005, expenses:2600, revenue:3500},
88
{date:"9/1/2010", miscellaneous:1200, expenses:8900, revenue:3800},
89
{date:"10/1/2010", miscellaneous:2000, expenses:1000, revenue:3650},
90
{date:"11/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
91
{date:"12/1/2010", miscellaneous:5000, expenses:3100, revenue:4100}
94
var mychart = new Y.Chart({
95
dataProvider:myDataValues,
96
render:"#mychart",
106
categoryKey:"date",
107
categoryType:"time"
113
<div id="sidebar" class="yui3-u">
117
<div class="sidebox">
119
<h2 class="no-toc">Examples</h2>
123
<ul class="examples">
126
<li data-description="Shows how to use Charts to create a basic chart.">
127
<a href="charts-simple.html">Basic Charts Implementation</a>
132
<li data-description="Shows how to create a chart with multiple series.">
133
<a href="charts-multiseries.html">Chart with Multiple Series</a>
138
<li data-description="Shows how to create a column chart with multiple series.">
139
<a href="charts-column.html">Specify Chart Type</a>
144
<li data-description="Shows how to create a column chart with a stacked numeric axis.">
145
<a href="charts-stackedcolumn.html">Create Stacked Chart</a>
150
<li data-description="Shows how to create a chart with a time axis.">
151
<a href="charts-timeaxis.html">Create a Chart with a Time Axis</a>
156
<li data-description="Shows how to add gridlines to a chart.">
157
<a href="charts-gridlines.html">Add Gridlines to a Chart</a>
162
<li data-description="Shows how to create a chart with planar based events.">
163
<a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a>
168
<li data-description="Shows how to use a chart's styles attribute to customize a chart.">
169
<a href="charts-globalstyles.html">Customize a Chart</a>
174
<li data-description="Shows how to customize the default tooltip of a chart.">
175
<a href="charts-customizedtooltip.html">Customize a Chart's Tooltip</a>
180
<li data-description="Shows how to explicitly define the axes and series for a chart.">
181
<a href="charts-objectstyles.html">Define a Chart's Axes and Series</a>
186
<li data-description="Shows how to use charts to create a pie chart.">
187
<a href="charts-pie.html">Pie Chart</a>
192
<li data-description="Shows how to create a chart with multiple value axes.">
193
<a href="charts-dualaxes.html">Dual Axes Chart</a>
198
<li data-description="Shows how to access a chart instance's value axis after the chart has rendered.">
199
<a href="charts-axisupdate.html">Update Chart Axis</a>
204
<li data-description="Shows how to access a chart instance's seriesCollection after the chart has rendered.">
205
<a href="charts-seriesupdate.html">Update Chart Series</a>
219
<script src="../assets/vendor/prettify/prettify-min.js"></script>
220
<script>prettyPrint();</script>