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

Line Charts

More chart types...

Source code

<script type="application/ample+xml" xmlns:c="http://www.amplesdk.com/ns/chart"> <c:line title="Line chart" xAxisLabel="X Axis long label" xAxisType="Number" yAxisLabel="Y Axis long label" yAxisType="Number"> <c:group label="Set 0"> <c:item value="0,30" /> <c:item value="1,20" /> <c:item value="2,15" /> <c:item value="3,30" /> <c:item value="4,30" /> <c:item value="5,40" /> <c:item value="6,30" /> <c:item value="7,20" /> <c:item value="8,30" /> <c:item value="9,15" /> <c:item value="10,10" /> <c:item value="11,20" /> <c:item value="12,15" /> <c:item value="13,30" /> <c:item value="14,30" /> <c:item value="15,40" /> <c:item value="16,30" /> <c:item value="17,20" /> <c:item value="18,30" /> <c:item value="19,15" /> <c:item value="20,30" /> <c:item value="21,5" /> </c:group> <c:group label="Set 1"> <c:item value="0,20" /> <c:item value="1,10" /> <c:item value="2,25" /> <c:item value="3,40" /> <c:item value="4,20" /> <c:item value="5,10" /> <c:item value="6,20" /> <c:item value="7,30" /> <c:item value="8,40" /> <c:item value="9,25" /> <c:item value="10,20" /> <c:item value="11,10" /> <c:item value="12,25" /> <c:item value="13,40" /> <c:item value="14,20" /> <c:item value="15,10" /> <c:item value="16,20" /> <c:item value="17,30" /> <c:item value="18,40" /> <c:item value="19,25" /> <c:item value="20,20" /> <c:item value="21,10" /> </c:group> <c:group label="Set 2"> <c:item value="0,10" /> <c:item value="1,30" /> <c:item value="2,25" /> <c:item value="3,10" /> <c:item value="4,20" /> <c:item value="5,30" /> <c:item value="6,40" /> <c:item value="7,5" /> <c:item value="8,10" /> <c:item value="9,25" /> <c:item value="10,20" /> <c:item value="11,10" /> <c:item value="12,5" /> <c:item value="13,10" /> <c:item value="14,5" /> <c:item value="15,10" /> <c:item value="16,20" /> <c:item value="17,40" /> <c:item value="18,20" /> <c:item value="19,5" /> <c:item value="20,20" /> <c:item value="21,15" /> </c:group> <c:group label="Set 3"> <c:item value="0,12" /> <c:item value="1,18" /> <c:item value="2,16" /> <c:item value="3,12" /> <c:item value="4,24" /> <c:item value="5,16" /> <c:item value="6,18" /> <c:item value="7,16" /> <c:item value="8,16" /> <c:item value="9,22" /> <c:item value="10,24" /> <c:item value="11,26" /> <c:item value="12,28" /> <c:item value="13,32" /> <c:item value="14,28" /> <c:item value="15,34" /> <c:item value="16,16" /> <c:item value="17,24" /> <c:item value="18,22" /> <c:item value="19,12" /> <c:item value="20,14" /> <c:item value="21,16" /> </c:group> <c:group label="Set 4"> <c:item value="0,12" /> <c:item value="1,32" /> <c:item value="2,25" /> <c:item value="3,22" /> <c:item value="4,26" /> <c:item value="5,36" /> <c:item value="6,32" /> <c:item value="7,15" /> <c:item value="8,14" /> <c:item value="9,10" /> <c:item value="10,12" /> <c:item value="11,20" /> <c:item value="12,22" /> <c:item value="13,24" /> <c:item value="14,26" /> <c:item value="15,28" /> <c:item value="16,32" /> <c:item value="17,24" /> <c:item value="18,26" /> <c:item value="19,22" /> <c:item value="20,20" /> <c:item value="21,16" /> </c:group> <!-- c:group label="Set 2" values="0,5;1,15;2,30;3,25" /> <c:group label="Set 2" values="0,15;1,25;2,10;3,15" /--> </c:line> <br /> <br /> <c:line title="Line chart (one series)" xAxisLabel="X Axis long label" xAxisType="Number" yAxisLabel="Y Axis long label" yAxisType="Number"> <c:group label="Set 0"> <c:item value="0,30" /> <c:item value="1,20" /> <c:item value="2,15" /> <c:item value="3,30" /> <c:item value="4,30" /> <c:item value="5,40" /> <c:item value="6,30" /> <c:item value="7,20" /> <c:item value="8,30" /> <c:item value="9,15" /> <c:item value="10,10" /> <c:item value="11,20" /> <c:item value="12,15" /> <c:item value="13,30" /> <c:item value="14,30" /> <c:item value="15,40" /> <c:item value="16,30" /> <c:item value="17,20" /> <c:item value="18,30" /> <c:item value="19,15" /> <c:item value="20,30" /> <c:item value="21,5" /> </c:group> </c:line> <br /> <br /> <c:line title="Line chart (stack)" type="stack" xAxisLabel="X Axis long label" xAxisType="Number" yAxisLabel="Y Axis long label" yAxisType="Number"> <c:group label="Set 0"> <c:item value="0,30" /> <c:item value="1,20" /> <c:item value="2,15" /> <c:item value="3,30" /> <c:item value="4,30" /> <c:item value="5,40" /> <c:item value="6,30" /> <c:item value="7,20" /> <c:item value="8,30" /> <c:item value="9,15" /> <c:item value="10,10" /> <c:item value="11,20" /> <c:item value="12,15" /> <c:item value="13,30" /> <c:item value="14,30" /> <c:item value="15,40" /> <c:item value="16,30" /> <c:item value="17,20" /> <c:item value="18,30" /> <c:item value="19,15" /> <c:item value="20,30" /> <c:item value="21,5" /> </c:group> <c:group label="Set 1"> <c:item value="0,20" /> <c:item value="1,10" /> <c:item value="2,25" /> <c:item value="3,40" /> <c:item value="4,20" /> <c:item value="5,10" /> <c:item value="6,20" /> <c:item value="7,30" /> <c:item value="8,40" /> <c:item value="9,25" /> <c:item value="10,20" /> <c:item value="11,10" /> <c:item value="12,25" /> <c:item value="13,40" /> <c:item value="14,20" /> <c:item value="15,10" /> <c:item value="16,20" /> <c:item value="17,30" /> <c:item value="18,40" /> <c:item value="19,25" /> <c:item value="20,20" /> <c:item value="21,10" /> </c:group> <c:group label="Set 2"> <c:item value="0,10" /> <c:item value="1,30" /> <c:item value="2,25" /> <c:item value="3,10" /> <c:item value="4,20" /> <c:item value="5,30" /> <c:item value="6,40" /> <c:item value="7,5" /> <c:item value="8,10" /> <c:item value="9,25" /> <c:item value="10,20" /> <c:item value="11,10" /> <c:item value="12,5" /> <c:item value="13,10" /> <c:item value="14,5" /> <c:item value="15,10" /> <c:item value="16,20" /> <c:item value="17,40" /> <c:item value="18,20" /> <c:item value="19,5" /> <c:item value="20,20" /> <c:item value="21,15" /> </c:group> <c:group label="Set 3"> <c:item value="0,12" /> <c:item value="1,18" /> <c:item value="2,16" /> <c:item value="3,12" /> <c:item value="4,24" /> <c:item value="5,16" /> <c:item value="6,18" /> <c:item value="7,16" /> <c:item value="8,16" /> <c:item value="9,22" /> <c:item value="10,24" /> <c:item value="11,26" /> <c:item value="12,28" /> <c:item value="13,32" /> <c:item value="14,28" /> <c:item value="15,34" /> <c:item value="16,16" /> <c:item value="17,24" /> <c:item value="18,22" /> <c:item value="19,12" /> <c:item value="20,14" /> <c:item value="21,16" /> </c:group> <c:group label="Set 4"> <c:item value="0,12" /> <c:item value="1,32" /> <c:item value="2,25" /> <c:item value="3,22" /> <c:item value="4,26" /> <c:item value="5,36" /> <c:item value="6,32" /> <c:item value="7,15" /> <c:item value="8,14" /> <c:item value="9,10" /> <c:item value="10,12" /> <c:item value="11,20" /> <c:item value="12,22" /> <c:item value="13,24" /> <c:item value="14,26" /> <c:item value="15,28" /> <c:item value="16,32" /> <c:item value="17,24" /> <c:item value="18,26" /> <c:item value="19,22" /> <c:item value="20,20" /> <c:item value="21,16" /> </c:group> <!-- c:group label="Set 2" values="0,5;1,15;2,30;3,25" /> <c:group label="Set 2" values="0,15;1,25;2,10;3,15" /--> </c:line> <br /> <br /> <c:line title="Line chart (percentage)" type="percentage" xAxisLabel="X Axis long label" xAxisType="Number" yAxisLabel="Y Axis long label" yAxisType="Number"> <c:group label="Set 0"> <c:item value="0,30" /> <c:item value="1,20" /> <c:item value="2,15" /> <c:item value="3,30" /> <c:item value="4,30" /> <c:item value="5,40" /> <c:item value="6,30" /> <c:item value="7,20" /> <c:item value="8,30" /> <c:item value="9,15" /> <c:item value="10,10" /> <c:item value="11,20" /> <c:item value="12,15" /> <c:item value="13,30" /> <c:item value="14,30" /> <c:item value="15,40" /> <c:item value="16,30" /> <c:item value="17,20" /> <c:item value="18,30" /> <c:item value="19,15" /> <c:item value="20,30" /> <c:item value="21,5" /> </c:group> <c:group label="Set 1"> <c:item value="0,20" /> <c:item value="1,10" /> <c:item value="2,25" /> <c:item value="3,40" /> <c:item value="4,20" /> <c:item value="5,10" /> <c:item value="6,20" /> <c:item value="7,30" /> <c:item value="8,40" /> <c:item value="9,25" /> <c:item value="10,20" /> <c:item value="11,10" /> <c:item value="12,25" /> <c:item value="13,40" /> <c:item value="14,20" /> <c:item value="15,10" /> <c:item value="16,20" /> <c:item value="17,30" /> <c:item value="18,40" /> <c:item value="19,25" /> <c:item value="20,20" /> <c:item value="21,10" /> </c:group> <c:group label="Set 2"> <c:item value="0,10" /> <c:item value="1,30" /> <c:item value="2,25" /> <c:item value="3,10" /> <c:item value="4,20" /> <c:item value="5,30" /> <c:item value="6,40" /> <c:item value="7,5" /> <c:item value="8,10" /> <c:item value="9,25" /> <c:item value="10,20" /> <c:item value="11,10" /> <c:item value="12,5" /> <c:item value="13,10" /> <c:item value="14,5" /> <c:item value="15,10" /> <c:item value="16,20" /> <c:item value="17,40" /> <c:item value="18,20" /> <c:item value="19,5" /> <c:item value="20,20" /> <c:item value="21,15" /> </c:group> <c:group label="Set 3"> <c:item value="0,12" /> <c:item value="1,18" /> <c:item value="2,16" /> <c:item value="3,12" /> <c:item value="4,24" /> <c:item value="5,16" /> <c:item value="6,18" /> <c:item value="7,16" /> <c:item value="8,16" /> <c:item value="9,22" /> <c:item value="10,24" /> <c:item value="11,26" /> <c:item value="12,28" /> <c:item value="13,32" /> <c:item value="14,28" /> <c:item value="15,34" /> <c:item value="16,16" /> <c:item value="17,24" /> <c:item value="18,22" /> <c:item value="19,12" /> <c:item value="20,14" /> <c:item value="21,16" /> </c:group> <c:group label="Set 4"> <c:item value="0,12" /> <c:item value="1,32" /> <c:item value="2,25" /> <c:item value="3,22" /> <c:item value="4,26" /> <c:item value="5,36" /> <c:item value="6,32" /> <c:item value="7,15" /> <c:item value="8,14" /> <c:item value="9,10" /> <c:item value="10,12" /> <c:item value="11,20" /> <c:item value="12,22" /> <c:item value="13,24" /> <c:item value="14,26" /> <c:item value="15,28" /> <c:item value="16,32" /> <c:item value="17,24" /> <c:item value="18,26" /> <c:item value="19,22" /> <c:item value="20,20" /> <c:item value="21,16" /> </c:group> <!-- c:group label="Set 2" values="0,5;1,15;2,30;3,25" /> <c:group label="Set 2" values="0,15;1,25;2,10;3,15" /--> </c:line> </script>