Shield UI JavaScript Chart

Shield UI JavaScript Chart - A Flexible HTML5 Data Visualization Component

1. Shield UI JavaScript Chart A Flexible HTML5 Data Visualization Component

2. Introduction to UI components What are UI components? - reusable pieces of software that can be integrated in different projects What problems do UI components solve? - reusability- can be used in multiple projects independently - achieving a fairly complex task in little time- do not have to start from scratch just set up component properties and run. Intuitive interface of the components shrinks development time and secures timely delivery of project - maintainability – do not have to worry about browser changes –components updates address this need -scalability- can be used in small projects or multi-team effort The tendency is that sites are ever more complex, more visually appealing . High standards have raised for the level of presentation and UI components are here to meet them A strong trend over the last year, similar to internet usage, component usage has skyrocketed Usage of UI components - Hundreds of companies and projects, thousands of components are out there to meet specific requirements

3. Shield UI JavaScript Chart A fast and accurate JavaScript UI component used in data visualization - built on top of the latest HTML5 and CSS3 technologies available as a JQuery plug in Fully Customizable- enable handling of both trivial and complex tasks Provides excellent presentation and appealing design: Examples of Bar Chart, Polar Bar Chart- for visualization of periodic trends and Spline Chart with smooth curves.

4. Shield UI JavaScript Chart Many useful features, which enable any scenario : 21 chart types, Exporting, Selecting, client-side events, live-data support, Inverse layout, Localization, Styling and Theming Easily plot data and add graphs to your site . This ensures contemporary look with little effort - you have great visualization on your site and project is complete in short deadline

5. Shield UI Chart Series

6. Using ShieldUI Chart Two easy steps to initialize your chart 1. Include :Add references to the required scripts on the page: <script type="text/ javascript " src ="// www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js "></script> <script type="text/ javascript " src ="// www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js "></script> </head> 2. Component configuration : Setup control properties, such as: dataSeries : [{ seriesType : 'line' , collectionAlias : 'Households' , data : [ 0.164 , 0.173 , 0.184 , 0.167 , 0.177 , 0.189 , 0.180 , 0.183 , 0.188 , 0.160 , 0.176 , 0.178 ] } , { seriesType : 'line', collectionAlias: 'Industry', data: [0.103, 0.105, 0.112, 0.111, 0.102, 0.099, 0.110, 0.113, 0.117, 0.119, 0.123, 0.117] }]

7. Result Rendered chart and its structure - X/Y Axis, Legend, Different Data Series (Household, Industry), two prebuilt Light and Dark Themes. The default labels for chart title, subtitle, axes and tick labels, graph points, tooltips and legend can be changed -Along with numeric values, date and time are also accepted as graph input, making our charting solution one of the few supporting temporal data.

8. ASP.NET sales dashboard The sample uses related ASP.NET chart components from  ShieldUI The layout works as follows. Initially, only  the first chart, which is a bar chart, is rendered and populated with data. This is the "quarters" chart and represent a graph for the quarterly sales of a company.  Clicking, or selecting a bar from the first chart populates the second chart - which represents the sales for a particular quarter, broken down by product category. Selecting a piece of the donut chart, or a category, populates the third chart, which represents the sales for this particular category during this quarter. The finished presentation looks like this:  

9. Advantages Get a visualization on your site in minutes – drastically reduced development time. Put focus on customization, rather than development itself Intuitive API allows non-technical users to take advantage of the products as well. Do not worry about browser compatibility – this is the task of the UI component (all desktop and mobile browsers are supported) Separation of data, visualization and functionalities/interactivity Unified look across applications- same component can be reused in several projects with similar scenarios Exporting features allows embedding of output in a variety of documents or presentations- this completes your project lifecycle, export, print or add to your powerpoint presentation. New features and releases address existing problems and solves future development needs- problems solved by developers not by the end user Product is mature and offers plenty of functionality to tackle different scenarios Uses latest web development technologies: HTML5, JavaScript and CSS3

10. How to Reach Us On our main website: http://www.shieldui.com Demos of our components: http://demos.shieldui.com For usage of component in scientific or non-commercial projects you can download our free trial for evaluation

11. Q & A