Shield UI JavaScript Chart

Shield UI JavaScript Chart

• 1.
  Shield UI JavaScriptChart A Flexible HTML5 Data Visualization Component
• 2.
  Introduction to UIcomponents • 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 JavaScriptChart • 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 JavaScriptChart • Many useful features, which enable any scenario: 21 chart types, Exporting, Selecting, client-side events, livedata 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 ChartSeries
• 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/jquery1.9.1.min.js"></script> <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/shieldchart.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 chartand 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 Thesample 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 avisualization 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 ReachUs • 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