</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <div id="ProjectTitle">ComponentOne Studio - Cloud Business App Edition </div> <div id="PageTitle"><div id="PageTitleText">FlexChart</div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel">Collapse All</label> <label id="ExpandAllLabel" style="display: none;">Expand All</label> </span> </div> <div class="BreadcrumbsContainer"><table><tr><td> <a href="CloudBusinessAppEdition.html">Cloud Business App Edition </a> > <a href="WijmoControlExtensions.html">Wijmo Control Extensions</a> > Controls > FlexChart</td></tr></table></div> <div id="BodyContent"> <p><strong>FlexChart</strong> provides a flexible way to display a list of items in a bar, line, or scatter chart. A user can simply select a screen template to create a FlexChart that allows data binding, axis binding, range selection or setting line markers without having to code manually. Also, the control provides design flexibility to adjust the size and appearance of the FlexChart. Users can include multiple series in one chart to compare items across different categories. Control the appearance and behavior of X and Y axes through AxisX and AxisY properties respectively. Header and footer styles for charts can also be customised as per users requirements. This allows developers to create complex chart based applications.</p> <div class="FilteredContentJS" data-title="JS" data-itemid="JS"> <table class="SyntaxTable"> <tbody> <tr> <th>Isml.js</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> myapp.FlexChartBrowse.FlexChart_render = <span style="COLOR: #0000ff">function</span> (element, contentItem) { <span style="COLOR: #0000ff">var</span> chart = <span style="COLOR: #0000ff">new</span> c1.cba.FlexChart($(element), contentItem); <span style="COLOR: #0000ff">var</span> collectionView = <span style="COLOR: #0000ff">new</span> c1.cba.LightSwitchCollectionView(contentItem); chart.wjControl.itemsSource = collectionView; myapp.chart = chart.wjControl; }; </pre> </td> </tr> </tbody> </table> </div> <a name="seealsobookmark"></a> </div> <div id="FooterContent"> <p> </p><p> </p><hr style="height: 1px"><p>Copyright (c) <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved. <script>$(document).ready(function() { if (!(window.self !== window.top)) { // Not running in a frameset // Get the page name var pageName = location.href.substring(location.href.lastIndexOf("/") + 1); if (pageName.indexOf("#") != -1) { pageName = pageName.substring(0, pageName.indexOf("#")); } // Append to webframe.html var framePage = "webframe.html#" + pageName; location.href = framePage; } });</script></p> <a target="_blank" href="http://feedback.componentone.com/forums/255790-asp-netlightswitch-documentation" target="_blank">Documentation Feedback </a> | <a href="http://our.componentone.com/groups/" target="_blank"> Product Support Forum </a> </div> </body> </html>