</ 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">Wijmo FlexChart Screen</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="GettingStartedwithCloud Business Applications.html">Getting Started</a> > <a href="ScreenTemplates.html">Screen Templates</a> > Wijmo FlexChart Screen</td></tr></table></div> <div id="BodyContent"> <a id="top" name="top"></a> <p>FlexChart screen is used to visualise a list of items in a variety of chart types. The screen enables you to add customizable charts to your application. Depending on the type of data you need to display, you can represent your data in column, bar, scatter, bubble, line, and area charts, to name a few, or a combination of these. On moving mouse over a chart element, tooltip appears that shows details about the data point.</p> <p><strong>Properties</strong> panel in Visual Studio can be used to set the properties for the control in design view. For example, use default property editor to adjust the control's size, position of label for the display name, or default color palette to set colors for each series in the control. However, <strong>ComplexPropertyEditor</strong> is used to edit complex properties such as <strong>HeaderStyle</strong>, <strong>FooterStyle</strong>, or <strong>DataLabel</strong>.</p> <p>You can include multiple series in one chart to compare items across different categories. Control the appearance and behavior of X and Y axes through <strong>AxisX</strong> and <strong>AxisY</strong> properties respectively. Header and footer styles for charts can also be customized as per users requirements.</p> <p>This section describes how to use <strong>Wijmo FlexChart Screen</strong> template and add data.<br> This topic comprises of three steps:</p> <p><a href="#step1">Step 1: Add a Screen</a></p> <p><a href="#step2">Step 2: Add Data to Screen</a></p> <p><a href="#step3">Step 3: Build and Run the Project</a></p> <p>The following image shows how the <strong>FlexChart</strong> appears after completing the steps above:</p><img border="0" alt="" src="images/FCOutput.png"><a id="step1" name="step1"></a> <h3>Step 1: Add a Screen</h3> <ol> <li>In the <strong>Solution Explorer</strong>, right click the client folder of your application (for example: <font face="Courier New">Application1.HTMLClient</font>) and click <strong>'Add Screen...</strong>'.</li> <li>The <strong>Add New Screen</strong> dialog appears, select the screen template named <strong>Wijmo FlexChart Screen</strong> for your application.<br> <br> <img style="HEIGHT: 412px; WIDTH: 640px" border="0" alt="" src="images/FCAddScreen.png" width="759" height="519"></li> <li>Under <strong>Provide screen information</strong>, enter a name (for example: <code>FlexChartBrowse</code>) for the screen in <strong>Screen Name</strong> text box.</li> </ol><a href="#top">Back to Top</a> <a id="step2" name="step2"></a> <h3>Step 2: Add Data to Screen</h3> <p>The example uses data from local database file <strong>ApplicationData.mdf</strong>.</p> <ol> <li>Under <strong>Screen Data</strong> within <strong>Provide screen information</strong> section of <strong>Add New Screen</strong> dialog, click the drop-down arrow.</li> <li>A list of tables appears. Select <strong>ApplicationData.Fruits</strong>.<br> <br> <img style="HEIGHT: 412px; WIDTH: 640px" border="0" alt="" src="images/FCAddData.png" width="759" height="519"></li> <li>Click <strong>OK</strong>. The screen, <strong>FlexChartBrowse.lsml</strong> is added to your application</li> <li><strong>FlexChartBrowse.lsml</strong> page is added to the project under <strong>Screens</strong> folder, and the screen appears as shown in the image below:<br> <br> <img border="0" alt="" src="images/FlexChartScreen.png"></li> </ol><a id="step3" name="step3"></a> <h3>Step 3:Build and Run the Project</h3> <ol> <li>Click <strong>Build | Build Solution</strong> to build the project.</li> <li>Press <strong>F5</strong> to run the project.</li> </ol> <p><a href="#top">Back to Top</a></p> <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>