Wiki  |   Blog  |   Sitemap  |   Search  
Home
JavaScript UI FrameworkExamplesUI Languages (SVG, XUL..)Charts examplesColumn Charts

Column Charts

More chart types...

Source code

<script type="application/ample+xml" xmlns:c="http://www.amplesdk.com/ns/chart"> <c:bar title="Column chart" orient="horizontal" xAxisLabel="X Axis" yAxisLabel="Y Label" xAxisValueLabels="1999,2000,2001,2002,2003"> <c:group label="Set 0"> <c:item value="10" /> <c:item value="20" /> <c:item value="30" /> <c:item value="40" /> <c:item value="50" /> </c:group> <c:group label="Set 1"> <c:item value="20" /> <c:item value="10" /> <c:item value="25" /> <c:item value="45" /> <c:item value="15" /> </c:group> <c:group label="Set 2"> <c:item value="30" /> <c:item value="30" /> <c:item value="5" /> <c:item value="10" /> <c:item value="40" /> </c:group> <c:group label="Set 3"> <c:item value="15" /> <c:item value="25" /> <c:item value="35" /> <c:item value="30" /> <c:item value="10" /> </c:group> <!-- c:group label="Set 2" values="5;15;30;25" /--> </c:bar> <br /> <br /> <c:bar title="Column chart (one series)" orient="horizontal"> <c:group label="Set 0"> <c:item value="10" /> <c:item value="20" /> <c:item value="30" /> <c:item value="40" /> <c:item value="50" /> </c:group> </c:bar> <br /> <br /> <c:bar title="Column chart (stack)" type="stack" orient="horizontal" xAxisLabel="X Axis" yAxisLabel="Y Label"> <c:group label="Set 0"> <c:item value="10" /> <c:item value="20" /> <c:item value="30" /> <c:item value="40" /> <c:item value="50" /> </c:group> <c:group label="Set 1"> <c:item value="20" /> <c:item value="10" /> <c:item value="25" /> <c:item value="45" /> <c:item value="15" /> </c:group> <c:group label="Set 2"> <c:item value="30" /> <c:item value="30" /> <c:item value="5" /> <c:item value="10" /> <c:item value="40" /> </c:group> <c:group label="Set 3"> <c:item value="15" /> <c:item value="25" /> <c:item value="35" /> <c:item value="30" /> <c:item value="10" /> </c:group> <!-- c:group label="Set 2" values="5;15;30;25" /--> </c:bar> <br /> <br /> <c:bar title="Column chart (percentage)" type="percentage" orient="horizontal" xAxisLabel="X Axis" yAxisLabel="Y Label"> <c:group label="Set 0"> <c:item value="10" /> <c:item value="20" /> <c:item value="30" /> <c:item value="40" /> <c:item value="50" /> </c:group> <c:group label="Set 1"> <c:item value="20" /> <c:item value="10" /> <c:item value="25" /> <c:item value="45" /> <c:item value="15" /> </c:group> <c:group label="Set 2"> <c:item value="30" /> <c:item value="30" /> <c:item value="5" /> <c:item value="10" /> <c:item value="40" /> </c:group> <c:group label="Set 3"> <c:item value="15" /> <c:item value="25" /> <c:item value="35" /> <c:item value="30" /> <c:item value="10" /> </c:group> <!-- c:group label="Set 2" values="5;15;30;25" /--> </c:bar> </script>