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, 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 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/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 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