advertisement

Shield UI Chart

50 %
50 %
advertisement
Information about Shield UI Chart
Technology

Published on February 17, 2014

Author: JStoikov

Source: slideshare.net

advertisement

JavaScript Chart Shield UI Component

Chart

Getting Started In order to take advantage of the functionalities offered by our chart component, you will need to: 1. Include references to all required scripts. 2. Add the control declaration along with the desired properties. This approach is demonstrated in the following example. It uses a different path to load the required scripts, but the logic remains the same. <!DOCTYPE html> <html> 1<head> 2<title>Shield Chart</title> 3<meta charset="utf-8" /> 4 5<link rel="stylesheet" type="text/css" 6href="css/shieldui-all.min.css" /> 7<script src="js/jquery-1.10.2.min.js" 8type="text/javascript"></script> 9<script src="js/shieldui-all.min.js" 10type="text/javascript"></script> 11 12</head> 13<body> 14 15<div id="container" style="width:600px; 16height:400px;"></div> 17 18<script type="text/javascript"> 19$(document).ready(function () { 20 $("#container").shieldChart({ 21 dataSeries: [ 22 { 23 seriesType: 'pie', 24 applyAnimation: false, 25 data: [1, 3, 4, 5] 26 } 27 ] 28 }); 29}); 30</script> 31 </body> </html>

JavaScript API A chart component is initialized with the shieldChart constructor, passing it a dictionary of properties as shown below: For changing the theme, one should destroy and re-initialize the chart component as the following snippet shows: <script type="text/javascript"> 1 $('#container').shieldChart({ 2 axisX: { 3 drawColor: "red" 4 }, 5 exportOptions: { 6 image: true, 7 print: false 8 }, 9 tooltipSettings: { 10 enabled: false, 11 axisMarkers: { 12 enabled: true, 13 mode: 'xy', 14 color: 'red', 15 width: 1, 16 zIndex: 3 17 } 18 }, 19 seriesSettings: { 20 pie: { 21 addToLegend: true 22 } 23 }, 24 dataSeries: [ 25 { 26 collectionAlias: "Annual 27Report", 28 seriesType: "pie", 29 data: [2, 1, 3, 3, null, 5, 302, 7, 1, 4, 3, 5] 31 } 32 ], 33 theme: "dark" 34 }); </script>

Resources • Examples • https://demos.shieldui.com/web/areachart/basic-usage Documentation: https://www.shieldui.com/documentation/javas cript.chart

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

jQuery Plugins and JavaScript UI Framework | Shield UI

JavaScript UI framework, implemented with the latest HTML5 and jQuery technologies. Server-side wrappers for ASP.NET, ASP.NET MVC and Java Apache Wicket.
Read more

JavaScript Chart - Shield UI

The JavaScript Chart component by Shield UI is a fast, feature-rich and highly-customizable control for rendering multiple types of graphical ...
Read more

Shield UI Demos

Shield UI Demos - Shield UI Javascript and HTML 5 Interactive Demos. Explore the powerful Chart, flexible Grid and many other UI components for rapid ...
Read more

JavaScript Area Chart Basic Usage - Shield UI

JavaScript Area Chart Basic Usage - This example demonstrates the basic usage of the Shield UI Chart with area series. Area charts are used for displaying ...
Read more

c# - shield ui chart: generate series dynamically? - Stack ...

Is there a way to add series to a chart without knowing ahead of time how many series will be in it? For example I want to graph something on the X axis by ...
Read more

Shield UI | Facebook

Shield UI, Seattle, Washington. 1,031 likes · 4 talking about this. Shield UI is a private company for cutting edge HTML5 tool sets.
Read more

Shield UI Charts | Comparison tables - SocialCompare

Shield UI Charts; Website: https://www.shieldui.com: Demo web link: https://demos.shieldui.com: Like: 6 Likes: Open source: No: Latest version: 1.7.1 ...
Read more

shieldui - Relating two shield UI ASP.NET Charts - Stack ...

I want to create two related Shield UI ASP.NET charts. When the users clicks on the first one, the data on the second one to be changed. I looked at the ...
Read more

About ShieldUI Chart for ASP.NET - ComponentSource

Search Components, Applications, Add-ins and Cloud Services. Search
Read more

ShieldUI Chart for ASP.NET Compatibility - ComponentSource

Search Components, Applications, Add-ins and Cloud Services. Search
Read more