v18.2.0.44
This commit is contained in:
SyncfusionInstall
Родитель
7d3fa24769
Коммит
524f7760b0
|
|
@ -0,0 +1,97 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:accordion id="basicAccordion">
|
||||
<ej:accordion-accordionItem-contentTemplate>
|
||||
<h3>
|
||||
<a href="#">Inbox</a>
|
||||
</h3>
|
||||
<div>
|
||||
<div class="emp-list">
|
||||
<img src="Content/images/Employees/3.png" alt="employee" />
|
||||
<div class="time-panel">7:30</div>
|
||||
<b class="headername">Catriona</b><br />
|
||||
All WinRT controls are optimized for touch, supporting common gestures: zooming, panning, selecting, double-tapping, rotating, resizing.
|
||||
</div>
|
||||
<div class="emp-list">
|
||||
<img src="Content/images/Employees/6.png" alt="employee" />
|
||||
<div class="time-panel">5:33</div>
|
||||
<b class="headername">John Linden</b><br />
|
||||
All the components in the ASP.NET MVC have been built from the ground up with performance in mind and are extremely lightweight.
|
||||
</div>
|
||||
<div class="emp-list">
|
||||
<img src="Content/images/Employees/8.png" alt="employee" />
|
||||
<div class="time-panel">2:10</div>
|
||||
<b class="headername">Louis</b><br />
|
||||
Big data is a broad term for data sets so large or complex that traditional data processing applications are inadequate. Challenges include analysis, capture, data curation, search, sharing, storage, transfer, visualization, querying and information privacy.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Sent</a>
|
||||
</h3>
|
||||
<div>
|
||||
<div class="emp-list">
|
||||
<img src="Content/images/Employees/8.png" alt="employee" />
|
||||
<div class="time-panel">3:55</div>
|
||||
<b class="headername">Louis</b><br />
|
||||
Big data is a broad term for data sets so large or complex that traditional data processing applications are inadequate. Challenges include analysis, capture, data curation, search, sharing, storage, transfer, visualization, querying and information privacy.
|
||||
</div>
|
||||
<div class="emp-list">
|
||||
<img src="Content/images/Employees/6.png" alt="employee" />
|
||||
<div class="time-panel">6:47</div>
|
||||
<b class="headername">John Linden</b><br />
|
||||
Cloud computing, also known as 'on-demand computing', is a kind of Internet-based computing, where shared resources, data and information are provided to computers and other devices on-demand.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Trash</a>
|
||||
</h3>
|
||||
<div>
|
||||
<div class="emp-list">
|
||||
<img src="Content/images/Employees/3.png" alt="employee" />
|
||||
<div class="time-panel">8:30</div>
|
||||
<b class="headername">Catriona</b><br />
|
||||
With our sophisticated support system, built from the ground up to support all type of customers, you will have a streamlined experience working with our support team.
|
||||
</div>
|
||||
</div>
|
||||
</ej:accordion-accordionItem-contentTemplate>
|
||||
|
||||
</ej:accordion>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
#basicAccordion img {
|
||||
float: left;
|
||||
height: 40px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
.emp-list {
|
||||
border-bottom: 1px solid #BBBCBB;
|
||||
margin-bottom: 9px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
.emp-list:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.time-panel {
|
||||
float: right;
|
||||
color: #2382C3;
|
||||
}
|
||||
|
||||
.headername {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:accordion id="iconAccordion">
|
||||
<ej:accordion-customIcon header="header-close" selectedHeader="header-expand" ></ej:accordion-customIcon>
|
||||
<ej:accordion-accordionItem-contentTemplate>
|
||||
<h3>
|
||||
<div class="logos volkswagan"></div>
|
||||
<a href="#">Volkswagen</a>
|
||||
</h3>
|
||||
<div>
|
||||
Volkswagen is a German automobile manufacturer headquartered in Wolfsburg, Lower Saxony, Germany.
|
||||
Volkswagen is the original and top-selling marquee of the Volkswagen Group, the biggest German automaker and the third largest automaker in the world.
|
||||
</div>
|
||||
<h3>
|
||||
<div class="logos mitsubishi"></div>
|
||||
<a href="#">Mitsubishi</a>
|
||||
</h3>
|
||||
<div>
|
||||
The Mitsubishi Group is a group of autonomous Japanese multinational companies covering a range of businesses which share the Mitsubishi brand,
|
||||
trademark, and legacy.The Mitsubishi group of companies form a loose entity, the Mitsubishi Keiretsu, which is often referenced in Japanese and US media and official reports.
|
||||
</div>
|
||||
<h3>
|
||||
<div class="logos benz"></div>
|
||||
<a href="#">Mercedes-Benz</a>
|
||||
</h3>
|
||||
<div>
|
||||
Mercedes-Benz is a multinational division of the German manufacturer Daimler AG, and the brand is used for luxury automobiles, buses, coaches, and trucks.
|
||||
Mercedes-Benz is headquartered in Stuttgart, Baden-Württemberg, Germany.The name first appeared in 1926 under Daimler-Benz but traces its origins
|
||||
to Daimler-Motormen-Gesell shaft's 1901 Mercedes and to Karl Benz's 1886 Benz Patent Motorwagen, which is widely regarded as the first automobile.
|
||||
</div>
|
||||
|
||||
|
||||
</ej:accordion-accordionItem-contentTemplate>
|
||||
|
||||
</ej:accordion>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
#iconAccordion img {
|
||||
float: left;
|
||||
margin: -7px 1px 0 -13px;
|
||||
}
|
||||
|
||||
.header-expand {
|
||||
background-image: url(Content/images/ui-icons/ui-icons-active.png);
|
||||
background-position: -187px -60px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: right !important;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.header-close {
|
||||
background-image: url(Content/images/ui-icons/ui-icons-default.png);
|
||||
background-position: -161px -60px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: right !important;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.e-acrdn-header:hover .header-expand {
|
||||
background-image: url(Content/images/ui-icons/ui-icons-active.png);
|
||||
background-position: -187px -60px;
|
||||
}
|
||||
|
||||
.e-acrdn-header:hover .header-close {
|
||||
background-image: url(Content/images/ui-icons/ui-icons-active.png);
|
||||
background-position: -161px -60px;
|
||||
}
|
||||
|
||||
.logos {
|
||||
float: left;
|
||||
height: 35px;
|
||||
margin: -6px 1px 2px -15px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
#iconAccordion .e-select .logos {
|
||||
background-image: url(Content/images/accordion/grey_logos.png);
|
||||
}
|
||||
|
||||
#iconAccordion .e-active .logos {
|
||||
background-image: url(Content/images/accordion/white_logos.png);
|
||||
}
|
||||
|
||||
#iconAccordion .e-select:hover div {
|
||||
background-image: url(Content/images/accordion/white_logos.png) !important;
|
||||
}
|
||||
|
||||
.logos.volkswagan {
|
||||
background-position: 0 -170px;
|
||||
}
|
||||
|
||||
.logos.mitsubishi {
|
||||
background-position: 0 -85px;
|
||||
}
|
||||
|
||||
.logos.benz {
|
||||
background-position: 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:accordion id="KeyAccordion" allowKeyboardNavigation="true">
|
||||
<ej:accordion-accordionItem-contentTemplate>
|
||||
<h3>
|
||||
<a href="#">Twitter</a>
|
||||
</h3>
|
||||
<div>
|
||||
Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
|
||||
Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
|
||||
Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Facebook</a>
|
||||
</h3>
|
||||
<div>
|
||||
Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">WhatsApp</a>
|
||||
</h3>
|
||||
<div>
|
||||
WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
|
||||
As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
|
||||
WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
|
||||
</div>
|
||||
</ej:accordion-accordionItem-contentTemplate>
|
||||
|
||||
</ej:accordion>
|
||||
</div>
|
||||
|
||||
<div id="property-window" class="box wide">
|
||||
<div class="prop-grid keyboard">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + j
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Focuses the control.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Up
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected previous item.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Left
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected previous item.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Down
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected next item.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Right
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected next item.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Home
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected first item.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
End
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected last item.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.altKey && e.keyCode === 74) {
|
||||
$("#KeyAccordion").focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:accordion id="multiAccordion" enableMultipleOpen="true">
|
||||
<ej:accordion-accordionItem-contentTemplate>
|
||||
<h3>
|
||||
<a href="#">ASP.NET</a>
|
||||
</h3>
|
||||
<div>
|
||||
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled, event-driven programming model that improves performance and enables the separation of application logic and user interface.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">ASP.NET MVC</a>
|
||||
</h3>
|
||||
<div>
|
||||
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Javascript</a>
|
||||
</h3>
|
||||
<div>
|
||||
JavaScript (JS) is an interpreted computer programming language.
|
||||
It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.
|
||||
</div>
|
||||
</ej:accordion-accordionItem-contentTemplate>
|
||||
|
||||
</ej:accordion>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:accordion id="nestedAccordion" >
|
||||
<ej:accordion-accordionItem-contentTemplate>
|
||||
<h3>
|
||||
<a href="#">Pizza Menu</a>
|
||||
</h3>
|
||||
<div>
|
||||
That is the reason why we offer a variety of toppings and crusts and a wide array of choices made from natural ingredients, balancing a nutritional diet with splendid taste.
|
||||
<ej:accordion id="pizzaMenu" collapsible="true" >
|
||||
<ej:accordion-accordionItem-contentTemplate>
|
||||
<h3>
|
||||
<a href="#">GARDEN FRESH (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="Content/images/accordion/garden-veggie.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $50
|
||||
<br />
|
||||
Ingredients : cheese, onions, green capsicums & tomatoes.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">CORN & SPINACH (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="Content/images/accordion/corn-and-spinach-05.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $70
|
||||
<br />
|
||||
Ingredients : cheese, sweet corn & green capsicums.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">CHICKEN DELITE (Non-veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="Content/images/accordion/chicken-delite.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $100
|
||||
<br />
|
||||
Ingredients : cheese, chicken chunks, onions & pineapple chunks.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">KEEMA LA JAWAB (Non-veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="Content/images/accordion/chicken-delite.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $95
|
||||
<br />
|
||||
Ingredients : lamb keema, onions, garlic & tandoori seasoning.
|
||||
</div>
|
||||
</div>
|
||||
</ej:accordion-accordionItem-contentTemplate>
|
||||
</ej:accordion>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Pasta Menu</a>
|
||||
</h3>
|
||||
<div>
|
||||
Pasta cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.
|
||||
<ej:accordion id="pastaMenu" collapsible="true" >
|
||||
<ej:accordion-accordionItem-contentTemplate>
|
||||
<h3>
|
||||
<a href="#">ZESTY MUSHROOMS AND TOMATO (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="Content/images/accordion/zesty-mushroons-and-tomatoes.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $30
|
||||
<br />
|
||||
Ingredients : cheese, onions, green capsicums & tomatoes.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">CORN & SPINACH (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="Content/images/accordion/corn-and-spinach-05.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $35
|
||||
<br />
|
||||
Ingredients : sautered spinach mix, sweet corn, parsley & mozarella cheese.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">BAKED CHICKEN AND CHEESE (Non-veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="Content/images/accordion/baked-chicken-and-cheese.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $55
|
||||
<br />
|
||||
Ingredients : grilled chicken, corn and olives.
|
||||
</div>
|
||||
</div>
|
||||
</ej:accordion-accordionItem-contentTemplate>
|
||||
</ej:accordion>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Sandwizza Menu</a>
|
||||
</h3>
|
||||
<div>
|
||||
Sandwizza cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.
|
||||
<ej:accordion id="sandMenu" collapsible="true" >
|
||||
<ej:accordion-accordionItem-contentTemplate>
|
||||
<h3>
|
||||
<a href="#">GARDEN VEGGIE (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="Content/images/accordion/garden-veggie.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $30
|
||||
<br />
|
||||
Ingredients : onions, garden-veggies & tomatoes.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">PANEER TIKKA (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="Content/images/accordion/paneer-tikka.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $34
|
||||
<br />
|
||||
Ingredients : onions, paneer & tomatoes.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">CHICKEN TIKKA (Non-veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="Content/images/accordion/chicken-tikka.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $64
|
||||
<br />
|
||||
Ingredients : onions, grilled chicken, chicken salami & tomatoes.
|
||||
</div>
|
||||
</div>
|
||||
</ej:accordion-accordionItem-contentTemplate>
|
||||
</ej:accordion>
|
||||
</div>
|
||||
</ej:accordion-accordionItem-contentTemplate>
|
||||
|
||||
</ej:accordion>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:accordion id="hoverAccordion" events="mouseover">
|
||||
<ej:accordion-accordionItem-contentTemplate>
|
||||
<h3>
|
||||
<a href="#">ASP.NET</a>
|
||||
</h3>
|
||||
<div>
|
||||
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled, event-driven programming model that improves performance and enables the separation of application logic and user interface.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">ASP.NET MVC</a>
|
||||
</h3>
|
||||
<div>
|
||||
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Javascript</a>
|
||||
</h3>
|
||||
<div>
|
||||
JavaScript (JS) is an interpreted computer programming language.
|
||||
It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.
|
||||
</div>
|
||||
</ej:accordion-accordionItem-contentTemplate>
|
||||
|
||||
</ej:accordion>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<%@ page language="java" contentType="text/html; charset=utf-8"
|
||||
pageEncoding="utf-8"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:accordion id="rtlAccordion" enableRTL="true">
|
||||
<ej:accordion-accordionItem-contentTemplate>
|
||||
<h3>
|
||||
<a href="#">سكريبت</a>
|
||||
</h3>
|
||||
<div>
|
||||
جافا سكريبت (JS) هو تفسير الكمبيوتر لغة البرمجة.
|
||||
تم تنفيذ أصلا كجزء من متصفحات الويب بحيث البرامج النصية من جانب العميل يمكن أن تتفاعل مع المستخدم، والسيطرة على المتصفح،
|
||||
التواصل بشكل غير متزامن، وتغيير محتوى الوثيقة التي تم عرضها. [5] وفي الآونة الأخيرة، ومع ذلك،
|
||||
أصبح من الشائع في كل من تطوير اللعبة وإنشاء تطبيقات سطح المكتب.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">C شارب (C #)</a>
|
||||
</h3>
|
||||
<div>
|
||||
يقصد به أن تكون بسيطة وعصرية، لأغراض عامة، لغة البرمجة وجوه المنحى C #.
|
||||
ويقود فريق تطويره بواسطة Anders Hejlsberg. أحدث إصدار هو C # 5.0، والذي صدر في 15 أغسطس 2012.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">البصرية الأساسية</a>
|
||||
</h3>
|
||||
<div>
|
||||
يتم تثبيت مترجم سطر الأوامر، VBC.EXE، كجزء من مجانية. NET الإطار SDK.
|
||||
ويشمل أيضا أحادية مترجم VB.NET سطر الأوامر. أحدث إصدار هو VB 2012، والذي صدر في 15 أغسطس 2012.
|
||||
</div>
|
||||
</ej:accordion-accordionItem-contentTemplate>
|
||||
|
||||
</ej:accordion>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList"%>
|
||||
<%@ page session="false" import="java.util.Iterator"%>
|
||||
<%@ page import="datasource.CarDataSource"%>
|
||||
<%@ page import="datasource.GetCarDataSource"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<%
|
||||
GetCarDataSource obj =new GetCarDataSource();
|
||||
Object data = obj.getData1();
|
||||
request.setAttribute("CarDataSource", data);
|
||||
%>
|
||||
|
||||
<ej:autocomplete id="auto" width="300px" watermarkText="Select a car" dataSource="${CarDataSource}" ></ej:autocomplete>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="property-window" class="box wide">
|
||||
|
||||
<div class="prop-grid">
|
||||
<div class="row" style="width:100%">
|
||||
<div class="col-md-6" style="width:45%; float:left">
|
||||
<ej:toggleButton id="toggle" defaultText="Disable" activeText="Enable" click="changeState" width="107px"></ej:toggleButton>
|
||||
<label for="toggle">Toggle</label>
|
||||
</div>
|
||||
<div class="col-md-6" style="width:45%; float:right">
|
||||
<ej:button id="btn" width="107px" click="currentValue" text="GetValue" ></ej:button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
function changeState(args) {
|
||||
var autocomplete = $('#auto').ejAutocomplete("instance");
|
||||
if (args.isChecked) autocomplete.disable();
|
||||
else autocomplete.enable();
|
||||
}
|
||||
function currentValue(args) {
|
||||
var autocomplete = $('#auto').ejAutocomplete("instance");
|
||||
alert("Current value is : " + autocomplete.getValue());
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList"%>
|
||||
<%@ page session="false" import="java.util.Iterator"%>
|
||||
<%@ page import="datasource.CarDataSource"%>
|
||||
<%@ page import="datasource.GetCarDataSource"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<%
|
||||
GetCarDataSource obj =new GetCarDataSource();
|
||||
Object data = obj.getData1();
|
||||
request.setAttribute("CarDataSource", data);
|
||||
request.setAttribute("autofill", true);
|
||||
%>
|
||||
|
||||
<ej:autocomplete id="auto" width="300px" watermarkText="Select a car" enableAutoFill="${autofill}" dataSource="${CarDataSource}" ></ej:autocomplete>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
<%@ page session="false" import="java.util.ArrayList"%>
|
||||
<%@ page session="false" import="java.util.Iterator"%>
|
||||
<%@ page import="datasource.CarDataSource"%>
|
||||
<%@ page import="datasource.GetCarDataSource"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<%
|
||||
GetCarDataSource obj =new GetCarDataSource();
|
||||
Object data = obj.getData1();
|
||||
request.setAttribute("CarDataSource", data);
|
||||
%>
|
||||
<ej:autocomplete id="auto" width="300px" watermarkText="Select a car" dataSource="${CarDataSource}" >
|
||||
|
||||
|
||||
</ej:autocomplete>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList"%>
|
||||
<%@ page session="false" import="java.util.Iterator"%>
|
||||
<%@ page import="datasource.CarDataSource"%>
|
||||
<%@ page import="datasource.GetCarDataSource"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<%
|
||||
GetCarDataSource obj =new GetCarDataSource();
|
||||
Object data = obj.getData1();
|
||||
request.setAttribute("CarDataSource", data);
|
||||
request.setAttribute("popup", true);
|
||||
%>
|
||||
<span class="txt">Using Delimiter</span>
|
||||
<ej:autocomplete id="auto1" width="300px" multiSelectMode="delimiter" showPopupButton="${popup}" dataSource="${CarDataSource}" ></ej:autocomplete>
|
||||
|
||||
<span class="txt">Using VisualMode</span>
|
||||
<ej:autocomplete id="auto2" width="300px" multiSelectMode="visualmode" showPopupButton="${popup}" dataSource="${CarDataSource}" ></ej:autocomplete>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList"%>
|
||||
<%@ page session="false" import="java.util.Iterator"%>
|
||||
<%@ page import="datasource.CarDataSource"%>
|
||||
<%@ page import="datasource.GetCarDataSource"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<%
|
||||
GetCarDataSource obj =new GetCarDataSource();
|
||||
Object data = obj.getData1();
|
||||
request.setAttribute("CarDataSource", data);
|
||||
request.setAttribute("rtlmode", true);
|
||||
%>
|
||||
|
||||
<ej:autocomplete id="auto" width="300px" watermarkText="Select a car" enableRTL="${rtlmode}" dataSource="${CarDataSource}" ></ej:autocomplete>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode6" barHeight="80" text="01234567" displayText="true" symbologyType="Codabar"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode5" barHeight="80" text="01234567" displayText="true" symbologyType="Code11"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode10" barHeight="80" text="SYNCFUSION" displayText="true" symbologyType="Code128A"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode11" barHeight="80" text="SYNCFUSION" displayText="true" symbologyType="Code128B"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode12" barHeight="80" text="01234567" displayText="true" symbologyType="Code128C"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode7" barHeight="80" text="01234567" displayText="true" symbologyType="Code32"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode3" barHeight="80" text="SYNCFUSION" displayText="true" symbologyType="Code39"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode4" barHeight="80" text="SYNCFUSION" displayText="true" symbologyType="Code39Extended"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode8" barHeight="80" text="SYNCFUSION" displayText="true" symbologyType="Code93"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode9" barHeight="80" text="SYNCFUSION" displayText="true" symbologyType="Code93Extended"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode2" text="SYNCFUSION" displayText="true" symbologyType="dataMatrix"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<ej:barcode id="ejBarcode1" text="//www.syncfusion.com" displayText="true" symbologyType="QRBarcode"></ej:barcode>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="cols-sample-area" style="border: 0px solid white !important;background:transparent !important">
|
||||
<ej:bulletGraph id="bulletgraph1" load="loadBulletTheme"
|
||||
isResponsive="=true">
|
||||
<ej:bulletGraph-tooltipSettings visible="true"></ej:bulletGraph-tooltipSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings minimum="0" maximum="10" interval="1">
|
||||
<ej:bulletGraph-quantitativeScaleSettings-location x="110" y="10"></ej:bulletGraph-quantitativeScaleSettings-location>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featuredMeasureSettings width="6"></ej:bulletGraph-quantitativeScaleSettings-featuredMeasureSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-comparativeMeasureSettings width="5"></ej:bulletGraph-quantitativeScaleSettings-comparativeMeasureSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasures>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasure value="8" comparativeMeasureValue="7" category=""></ej:bulletGraph-quantitativeScaleSettings-featureMeasure>
|
||||
</ej:bulletGraph-quantitativeScaleSettings-featureMeasures>
|
||||
</ej:bulletGraph-quantitativeScaleSettings>
|
||||
<ej:bulletGraph-qualitativeRanges>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="4"></ej:bulletGraph-qualitativeRange>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="7"></ej:bulletGraph-qualitativeRange>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="10"></ej:bulletGraph-qualitativeRange>
|
||||
</ej:bulletGraph-qualitativeRanges>
|
||||
<ej:bulletGraph-captionSettings textAngle="0" text="Revenue YTD" >
|
||||
<ej:bulletGraph-captionSettings-location x="17" y="20"></ej:bulletGraph-captionSettings-location>
|
||||
<ej:bulletGraph-captionSettings-font fontFamily="Segoe UI" fontStyle="normal" fontWeight="normal" opacity="1" size="12px"> </ej:bulletGraph-captionSettings-font>
|
||||
<ej:bulletGraph-captionSettings-subTitle textAngle="0" text="$ in Thousands">
|
||||
<ej:bulletGraph-captionSettings-subTitle-location x="10" y="35"></ej:bulletGraph-captionSettings-subTitle-location>
|
||||
<ej:bulletGraph-captionSettings-subTitle-font fontFamily="Segoe UI" fontStyle="normal" fontWeight="normal" opacity="1" size="12px"></ej:bulletGraph-captionSettings-subTitle-font>
|
||||
</ej:bulletGraph-captionSettings-subTitle>
|
||||
</ej:bulletGraph-captionSettings>
|
||||
</ej:bulletGraph>
|
||||
|
||||
<ej:bulletGraph id="bulletgraph2" load="loadBulletTheme"
|
||||
isResponsive="=true">
|
||||
<ej:bulletGraph-tooltipSettings visible="true"></ej:bulletGraph-tooltipSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings minimum="-10" maximum="10" interval="2" minorTicksPerInterval="4" tickPosition="far">
|
||||
<ej:bulletGraph-quantitativeScaleSettings-location x="110" y="10"></ej:bulletGraph-quantitativeScaleSettings-location>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featuredMeasureSettings width="6"></ej:bulletGraph-quantitativeScaleSettings-featuredMeasureSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-comparativeMeasureSettings width="5"></ej:bulletGraph-quantitativeScaleSettings-comparativeMeasureSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasures>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasure value="8" comparativeMeasureValue="7" category=""></ej:bulletGraph-quantitativeScaleSettings-featureMeasure>
|
||||
</ej:bulletGraph-quantitativeScaleSettings-featureMeasures>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-labelSettings position="below" offset="14" size="10" labelSuffix=" %"></ej:bulletGraph-quantitativeScaleSettings-labelSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-majorTickSettings width="1" size="13"></ej:bulletGraph-quantitativeScaleSettings-majorTickSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-minorTickSettings width="1" size="5"></ej:bulletGraph-quantitativeScaleSettings-minorTickSettings>
|
||||
</ej:bulletGraph-quantitativeScaleSettings>
|
||||
<ej:bulletGraph-qualitativeRanges>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="-3" rangeStroke="#61a301"></ej:bulletGraph-qualitativeRange>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="4" rangeStroke="#fcda21"></ej:bulletGraph-qualitativeRange>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="10" rangeStroke="#d61e3f"></ej:bulletGraph-qualitativeRange>
|
||||
</ej:bulletGraph-qualitativeRanges>
|
||||
<ej:bulletGraph-captionSettings text="Profit" >
|
||||
<ej:bulletGraph-captionSettings-location x="60" y="25"></ej:bulletGraph-captionSettings-location>
|
||||
<ej:bulletGraph-captionSettings-font fontFamily="Segoe UI" fontStyle="normal" fontWeight="normal" opacity="1" size="12px"> </ej:bulletGraph-captionSettings-font>
|
||||
</ej:bulletGraph-captionSettings>
|
||||
</ej:bulletGraph>
|
||||
|
||||
<ej:bulletGraph id="bulletgraph3" load="loadBulletTheme"
|
||||
isResponsive="=true">
|
||||
<ej:bulletGraph-tooltipSettings visible="true"></ej:bulletGraph-tooltipSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings minimum="-10" maximum="10" interval="2" minorTicksPerInterval="4" tickPosition="far">
|
||||
<ej:bulletGraph-quantitativeScaleSettings-location x="110" y="10"></ej:bulletGraph-quantitativeScaleSettings-location>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featuredMeasureSettings width="6"></ej:bulletGraph-quantitativeScaleSettings-featuredMeasureSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-comparativeMeasureSettings width="5"></ej:bulletGraph-quantitativeScaleSettings-comparativeMeasureSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasures>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasure value="-2" comparativeMeasureValue="-2" category=""></ej:bulletGraph-quantitativeScaleSettings-featureMeasure>
|
||||
</ej:bulletGraph-quantitativeScaleSettings-featureMeasures>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-labelSettings position="below" offset="14" size="10" labelSuffix=" %"></ej:bulletGraph-quantitativeScaleSettings-labelSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-majorTickSettings width="1" size="13" stroke="gray"></ej:bulletGraph-quantitativeScaleSettings-majorTickSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-minorTickSettings width="1" size="5" stroke="gray"></ej:bulletGraph-quantitativeScaleSettings-minorTickSettings>
|
||||
</ej:bulletGraph-quantitativeScaleSettings>
|
||||
<ej:bulletGraph-qualitativeRanges>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="-4"></ej:bulletGraph-qualitativeRange>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="4"></ej:bulletGraph-qualitativeRange>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="10"></ej:bulletGraph-qualitativeRange>
|
||||
</ej:bulletGraph-qualitativeRanges>
|
||||
<ej:bulletGraph-captionSettings textAngle="0" text="Expenses" >
|
||||
<ej:bulletGraph-captionSettings-location x="38" y="25"></ej:bulletGraph-captionSettings-location>
|
||||
<ej:bulletGraph-captionSettings-font fontFamily="Segoe UI" fontStyle="normal" fontWeight="normal" opacity="1" size="12px"> </ej:bulletGraph-captionSettings-font>
|
||||
</ej:bulletGraph-captionSettings>
|
||||
</ej:bulletGraph>
|
||||
|
||||
<ej:bulletGraph id="bulletgraph4" load="loadBulletTheme"
|
||||
isResponsive="=true">
|
||||
<ej:bulletGraph-tooltipSettings visible="true"></ej:bulletGraph-tooltipSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings minimum="0" maximum="10" interval="1" minorTicksPerInterval="4" tickPosition="far">
|
||||
<ej:bulletGraph-quantitativeScaleSettings-location x="105" y="10"></ej:bulletGraph-quantitativeScaleSettings-location>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featuredMeasureSettings width="6"></ej:bulletGraph-quantitativeScaleSettings-featuredMeasureSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-comparativeMeasureSettings width="5"></ej:bulletGraph-quantitativeScaleSettings-comparativeMeasureSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasures>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasure value="8" comparativeMeasureValue="7" category=""></ej:bulletGraph-quantitativeScaleSettings-featureMeasure>
|
||||
</ej:bulletGraph-quantitativeScaleSettings-featureMeasures>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-labelSettings position="below" offset="14" size="10" labelPrefix="$ " labelSuffix=" K"></ej:bulletGraph-quantitativeScaleSettings-labelSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-majorTickSettings width="1" size="13"></ej:bulletGraph-quantitativeScaleSettings-majorTickSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-minorTickSettings width="1" size="5"></ej:bulletGraph-quantitativeScaleSettings-minorTickSettings>
|
||||
</ej:bulletGraph-quantitativeScaleSettings>
|
||||
<ej:bulletGraph-qualitativeRanges>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="4" rangeStroke="#61a301" rangeOpacity="1"></ej:bulletGraph-qualitativeRange>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="7" rangeStroke="#fcda21" rangeOpacity="1"></ej:bulletGraph-qualitativeRange>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="10" rangeStroke="#d61e3f" rangeOpacity="1"></ej:bulletGraph-qualitativeRange>
|
||||
</ej:bulletGraph-qualitativeRanges>
|
||||
<ej:bulletGraph-captionSettings textAngle="0" text="Revenue YTD" >
|
||||
<ej:bulletGraph-captionSettings-location x="17" y="20"></ej:bulletGraph-captionSettings-location>
|
||||
<ej:bulletGraph-captionSettings-font fontFamily="Segoe UI" fontStyle="normal" fontWeight="normal" opacity="1" size="12px"> </ej:bulletGraph-captionSettings-font>
|
||||
<ej:bulletGraph-captionSettings-subTitle textAngle="0" text="$ in Thousands">
|
||||
<ej:bulletGraph-captionSettings-subTitle-location x="10" y="35"></ej:bulletGraph-captionSettings-subTitle-location>
|
||||
<ej:bulletGraph-captionSettings-subTitle-font fontFamily="Segoe UI" fontStyle="normal" fontWeight="normal" opacity="1" size="12px"></ej:bulletGraph-captionSettings-subTitle-font>
|
||||
</ej:bulletGraph-captionSettings-subTitle>
|
||||
</ej:bulletGraph-captionSettings>
|
||||
</ej:bulletGraph>
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %> </head>
|
||||
|
||||
<div class="cols-sample-area" style="border: 0px solid white !important;background:transparent !important">
|
||||
|
||||
<ej:bulletGraph id="bulletgraph" load="loadBulletTheme"
|
||||
isResponsive="=true" qualitativeRangeSize="320" height="400">
|
||||
<ej:bulletGraph-tooltipSettings visible="true"></ej:bulletGraph-tooltipSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-location x="110" y="25"></ej:bulletGraph-quantitativeScaleSettings-location>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasures>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasure value="9" comparativeMeasureValue="7" category="2001"></ej:bulletGraph-quantitativeScaleSettings-featureMeasure>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasure value="9" comparativeMeasureValue="5" category="2002"></ej:bulletGraph-quantitativeScaleSettings-featureMeasure>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasure value="9" comparativeMeasureValue="6" category="2003"></ej:bulletGraph-quantitativeScaleSettings-featureMeasure>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasure value="9" comparativeMeasureValue="8" category="2004"></ej:bulletGraph-quantitativeScaleSettings-featureMeasure>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasure value="9" comparativeMeasureValue="5" category="2005"></ej:bulletGraph-quantitativeScaleSettings-featureMeasure>
|
||||
<ej:bulletGraph-quantitativeScaleSettings-featureMeasure value="9" comparativeMeasureValue="6" category="2006"></ej:bulletGraph-quantitativeScaleSettings-featureMeasure>
|
||||
</ej:bulletGraph-quantitativeScaleSettings-featureMeasures>
|
||||
</ej:bulletGraph-quantitativeScaleSettings>
|
||||
<ej:bulletGraph-qualitativeRanges>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="4"></ej:bulletGraph-qualitativeRange>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="7"></ej:bulletGraph-qualitativeRange>
|
||||
<ej:bulletGraph-qualitativeRange rangeEnd="10"></ej:bulletGraph-qualitativeRange>
|
||||
</ej:bulletGraph-qualitativeRanges>
|
||||
<ej:bulletGraph-captionSettings textAngle="-90" text="Revenue YTD" >
|
||||
<ej:bulletGraph-captionSettings-location x="40" y="210"></ej:bulletGraph-captionSettings-location>
|
||||
<ej:bulletGraph-captionSettings-subTitle textAngle="-90" text="$ in Thousands">
|
||||
<ej:bulletGraph-captionSettings-subTitle-location x="55" y="210"></ej:bulletGraph-captionSettings-subTitle-location>
|
||||
</ej:bulletGraph-captionSettings-subTitle>
|
||||
</ej:bulletGraph-captionSettings>
|
||||
</ej:bulletGraph>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
|
||||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<div class="frame">
|
||||
<br /> Hobbies <br /> <br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
|
||||
<ej:checkBox id="check1"></ej:checkBox>
|
||||
<label for="check1" class="clslab">Music</label></td>
|
||||
<td class="chkrad">
|
||||
<ej:checkBox id="Checkbox3" ></ej:checkBox>
|
||||
<label for="Checkbox3" class="clslab">Sports</label></td>
|
||||
<td class="chkrad">
|
||||
<ej:checkBox id="Checkbox4" ></ej:checkBox>
|
||||
<label for="Checkbox4" class="clslab">Bike Riding</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
<br /> <br /> Favorite Search Engines <br /> <br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad"> <ej:checkBox id="Checkbox1" ></ej:checkBox>
|
||||
<label for="Checkbox1" class="clslab">Google</label></td>
|
||||
<td class="chkrad"> <ej:checkBox id="Checkbox5" ></ej:checkBox>
|
||||
<label for="Checkbox5" class="clslab">Yahoo</label></td>
|
||||
<td class="chkrad"> <ej:checkBox id="Checkbox6" ></ej:checkBox>
|
||||
<label for="Checkbox6" class="clslab">Bing</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
<br /> <br /> Favorite Social networks <br /> <br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad"><ej:checkBox id="Checkbox2"></ej:checkBox>
|
||||
<label for="Checkbox2" class="clslab">Facebook</label></td>
|
||||
<td class="chkrad"><ej:checkBox id="Checkbox7"></ej:checkBox>
|
||||
<label for="Checkbox7" class="clslab">GPlus</label></td>
|
||||
<td class="chkrad"><ej:checkBox id="Checkbox8"></ej:checkBox>
|
||||
<label for="Checkbox8" class="clslab">Twitter</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btn_label">Normal</td>
|
||||
<td class="btnsht"><ej:button id="buttonnormal" size="normal"
|
||||
text="Normal" showRoundedCorner="true"></ej:button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Mini</td>
|
||||
<td class="btnsht"><ej:button id="buttonmin" size="mini"
|
||||
text="Mini" showRoundedCorner="true"></ej:button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Small</td>
|
||||
<td class="btnsht"><ej:button id="buttonsmall" size="small"
|
||||
text="Small" showRoundedCorner="true"></ej:button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Medium</td>
|
||||
<td class="btnsht"><ej:button id="buttonmedium" size="medium"
|
||||
text="Medium" showRoundedCorner="true"></ej:button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Large</td>
|
||||
<td class="btnsht"><ej:button id="buttonlarge" size="large"
|
||||
text="large" showRoundedCorner="true"></ej:button></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
table {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
td.btn_label {
|
||||
padding: 0 19px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btn_label">Button</td>
|
||||
<td class="btnsht">
|
||||
<ej:button id="Button" click="btnClick" enableRTL="true" size="large" create="btnLoad" text="click"></ej:button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Toggle Button</td>
|
||||
<td class="btnsht">
|
||||
<ej:toggleButton id="groupbutton" size="large" defaultText="Save" showRoundedCorner="true" activeText="Delete" create="tglebtnLoad" click="tglebtnClick" change="tglebtnChange"></ej:toggleButton>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Split Button</td>
|
||||
<td class="btnsht">
|
||||
<ej:splitButton id="mini" showRoundedCorner="true" size="large" text="Save" beforeOpen="onFocusIn" create="spltbtnLoad" itemSelected="" close="spltbtnClosed" open="spltbtnOpened" itemMouseOver="spltbtnitmHover" itemMouseOut="spltbtnitmOut" click="spltbtnClick">
|
||||
<ej:splitButton-splitButtonItems>
|
||||
<ej:splitButton-splitButtonItem text="Open"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Save"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Delete"></ej:splitButton-splitButtonItem>
|
||||
</ej:splitButton-splitButtonItems>
|
||||
</ej:splitButton>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Group Button</td>
|
||||
<td class="btnsht">
|
||||
<ej:groupButton id="groupBtn" showRoundedCorner="true" height="45px" select="grpbtnSelect" keyPress="grpbtnKeyPress" beforeSelect="grpbtnBeforeSelect" create="grpbtnLoad">
|
||||
<ej:groupButton-groupButtonItems>
|
||||
<ej:groupButton-groupButtonItem id="groupbtn1" text="Day"></ej:groupButton-groupButtonItem>
|
||||
<ej:groupButton-groupButtonItem id="groupbtn2" text="Work Week"></ej:groupButton-groupButtonItem>
|
||||
<ej:groupButton-groupButtonItem id="groupbtn3" text="Week"></ej:groupButton-groupButtonItem>
|
||||
<ej:groupButton-groupButtonItem id="groupbtn4" text="Month"></ej:groupButton-groupButtonItem>
|
||||
<ej:groupButton-groupButtonItem id="groupbtn5" text="Year"></ej:groupButton-groupButtonItem>
|
||||
</ej:groupButton-groupButtonItems>
|
||||
</ej:groupButton>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="Logger" class="box">
|
||||
<h4>Event Trace</h4>
|
||||
<div class="EventLog" id="EventLog"></div>
|
||||
<div>
|
||||
<ej:button id="clearBtn" click="clearLog" size="small" text="Clear"></ej:button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Client side Events
|
||||
function btnLoad(e) {
|
||||
jQuery.addEventLog("Button has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function btnClick(e) {
|
||||
jQuery.addEventLog("Button has been <span class='eventTitle'>clicked</span>.");
|
||||
}
|
||||
function tglebtnLoad(e) {
|
||||
jQuery.addEventLog("ToggleButton has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function grpbtnLoad(e) {
|
||||
jQuery.addEventLog("Group Button has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function tglebtnChange(e) {
|
||||
jQuery.addEventLog("ToggleButton value has been <span class='eventTitle'>changed</span> to " + e.isChecked + ".");
|
||||
}
|
||||
function spltbtnLoad(e) {
|
||||
jQuery.addEventLog("SplitButton has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function spltbtnClick(e) {
|
||||
jQuery.addEventLog("SplitButton has been <span class='eventTitle'>clicked</span>.");
|
||||
}
|
||||
function onFocusIn(e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>BeforeOpened</span>. ");
|
||||
}
|
||||
function spltbtnOpened(e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>Opened</span>. ");
|
||||
}
|
||||
function spltbtnClosed(e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>Closed</span>.");
|
||||
}
|
||||
function spltbtnitmHover(e) {
|
||||
jQuery.addEventLog("SplitButton item <span class='eventTitle'>hovered-in</span>.");
|
||||
}
|
||||
function spltbtnitmOut(e) {
|
||||
jQuery.addEventLog("SplitButton item <span class='eventTitle'>hovered-out</span>.");
|
||||
}
|
||||
function spltbtnitmSelected(e) {
|
||||
jQuery.addEventLog(e.text + " item has been <span class='eventTitle'>selected</span>.");
|
||||
}
|
||||
function grpbtnBeforeSelect(args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>BeforeActive</span> event is fired for Index " + args.index + ".");
|
||||
}
|
||||
function grpbtnSelect(args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>Active</span> event is fired for Index " + args.index + ".");
|
||||
}
|
||||
function grpbtnKeyPress(args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>Focus</span> Changed to the index" + args.index + ".");
|
||||
}
|
||||
function clearLog() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
table {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
td.btn_label {
|
||||
padding: 0 19px;
|
||||
}
|
||||
#txt {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<label id="txt">Appointment View</label>
|
||||
<div class="element">
|
||||
<ej:groupButton id="grup" height="45px" width="100%">
|
||||
<ej:groupButton-groupButtonItems>
|
||||
<ej:groupButton-groupButtonItem id="groupbtn1" text="Day"></ej:groupButton-groupButtonItem>
|
||||
<ej:groupButton-groupButtonItem id="groupbtn2" text="Work Week"></ej:groupButton-groupButtonItem>
|
||||
<ej:groupButton-groupButtonItem id="groupbtn3" text="Week"></ej:groupButton-groupButtonItem>
|
||||
<ej:groupButton-groupButtonItem id="groupbtn4" text="Month"></ej:groupButton-groupButtonItem>
|
||||
<ej:groupButton-groupButtonItem id="groupbtn5" text="Year"></ej:groupButton-groupButtonItem>
|
||||
</ej:groupButton-groupButtonItems>
|
||||
</ej:groupButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
|
||||
|
||||
.cols-sample-area {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
#txt {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
|
||||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<div class="radioalign">
|
||||
<br />
|
||||
<div class="btn_label">Category</div>
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad"><ej:radioButton id="Radio1" name="small"
|
||||
checked="true"></ej:radioButton> <label for="Radio1"
|
||||
class="clslab">Fresher</label></td>
|
||||
<td class="chkrad" colspan="2"><ej:radioButton id="Radio3"
|
||||
name="small"></ej:radioButton> <label for="Radio3" class="clslab">Experienced</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
<br /> <br /> <span class="btn_label">Experienced</span> <br /> <br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad"><ej:radioButton id="Radio2" name="medium"></ej:radioButton>
|
||||
<label for="Radio2" class="clslab">1+ years</label></td>
|
||||
<td class="chkrad"><ej:radioButton id="Radio4" name="medium"></ej:radioButton><label
|
||||
for="Radio4" class="clslab">2.5+years</label></td>
|
||||
<td class="chkrad"><ej:radioButton id="Radio5" name="medium"
|
||||
checked="true"></ej:radioButton><label for="Radio5"
|
||||
class="clslab">5+years</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.control {
|
||||
margin-left: 35%;
|
||||
}
|
||||
|
||||
.btn_label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
|
||||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btn_label">Normal</td>
|
||||
<td class="btnsht">
|
||||
<div class="spltspan">
|
||||
<ej:splitButton id="normal" showRoundedCorner="true" size="normal"
|
||||
contentType="imageonly" prefixIcon="e-icon e-mediaplay">
|
||||
<ej:splitButton-splitButtonItems>
|
||||
<ej:splitButton-splitButtonItem text="User"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Guest"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Admin"></ej:splitButton-splitButtonItem>
|
||||
</ej:splitButton-splitButtonItems>
|
||||
</ej:splitButton>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Mini</td>
|
||||
<td class="btnsht"><ej:splitButton id="mini"
|
||||
showRoundedCorner="true" size="mini" text="Login">
|
||||
<ej:splitButton-splitButtonItems>
|
||||
<ej:splitButton-splitButtonItem text="User"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Guest"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Admin"></ej:splitButton-splitButtonItem>
|
||||
</ej:splitButton-splitButtonItems>
|
||||
</ej:splitButton></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Small</td>
|
||||
<td class="btnsht"><ej:splitButton id="small"
|
||||
showRoundedCorner="true" size="small" text="Login">
|
||||
<ej:splitButton-splitButtonItems>
|
||||
<ej:splitButton-splitButtonItem text="User"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Guest"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Admin"></ej:splitButton-splitButtonItem>
|
||||
</ej:splitButton-splitButtonItems>
|
||||
</ej:splitButton></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Medium</td>
|
||||
<td class="btnsht"><ej:splitButton id="medium"
|
||||
showRoundedCorner="true" size="medium" text="Login">
|
||||
<ej:splitButton-splitButtonItems>
|
||||
<ej:splitButton-splitButtonItem text="User"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Guest"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Admin"></ej:splitButton-splitButtonItem>
|
||||
</ej:splitButton-splitButtonItems>
|
||||
</ej:splitButton></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Large</td>
|
||||
<td class="btnsht"><ej:splitButton id="large"
|
||||
showRoundedCorner="true" size="large" text="Login"
|
||||
contentType="textandimage" prefixIcon="e-icon e-login">
|
||||
<ej:splitButton-splitButtonItems>
|
||||
<ej:splitButton-splitButtonItem text="User"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Guest"></ej:splitButton-splitButtonItem>
|
||||
<ej:splitButton-splitButtonItem text="Admin"></ej:splitButton-splitButtonItem>
|
||||
</ej:splitButton-splitButtonItems>
|
||||
</ej:splitButton></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
td.btn_label {
|
||||
padding: 0 19px;
|
||||
}
|
||||
|
||||
.spltspan {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
|
||||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btn_label">Normal</td>
|
||||
<td class="btnsht">
|
||||
<label for="check11">Toggle</label>
|
||||
<ej:toggleButton id="check11" showRoundedCorner="true" size="normal" contentType="imageonly" defaultPrefixIcon="e-icon e-mediaplay" activePrefixIcon="e-icon e-mediapause e-uiLight"></ej:toggleButton>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Mini</td>
|
||||
<td class="btnsht">
|
||||
<label for="check12">Toggle</label>
|
||||
<ej:toggleButton id="check12" showRoundedCorner="true" size="mini" defaultText="play" activeText="Pause"></ej:toggleButton>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Small</td>
|
||||
<td class="btnsht">
|
||||
<label for="check13">Toggle</label>
|
||||
<ej:toggleButton id="check13" showRoundedCorner="true" size="small" defaultText="play" activeText="Pause"></ej:toggleButton>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Medium</td>
|
||||
<td class="btnsht">
|
||||
<label for="check14">Toggle</label>
|
||||
<ej:toggleButton id="check14" showRoundedCorner="true" size="medium" defaultText="play" activeText="Pause"></ej:toggleButton>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Large</td>
|
||||
<td class="btnsht">
|
||||
<label for="check15">Toggle</label>
|
||||
<ej:toggleButton id="check15" showRoundedCorner="true" size="large" defaultText="play" activeText="Pause" contentType="textandimage" defaultPrefixIcon="e-icon e-mediaplay" activePrefixIcon="e-icon e-mediapause"></ej:toggleButton>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
td.btn_label {
|
||||
padding: 0 19px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
|
||||
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important margin:none !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData6();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload" enable3D="true" enableRotation="false" sideBySideSeriesPlacement="true" rotation="20">
|
||||
<ej:chart-primaryXAxis>
|
||||
<ej:chart-primaryXAxis-title text="Minerals"></ej:chart-primaryXAxis-title>
|
||||
</ej:chart-primaryXAxis>
|
||||
<ej:chart-legend position="top"></ej:chart-legend>
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series name="Gold" dataSource="${DataSource2}" xName="Year" yName="XName"></ej:chart-series>
|
||||
<ej:chart-series name="Silver" dataSource="${DataSource2}" xName="Year" yName="YName"></ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-commonSeriesOptions type="column" enableAnimation="true">
|
||||
|
||||
<ej:chart-commonSeriesOptions-tooltip visible="true" format="#point.x# : #point.y#mg"></ej:chart-commonSeriesOptions-tooltip>
|
||||
|
||||
</ej:chart-commonSeriesOptions>
|
||||
<ej:chart-title text="Fruit Nutrients"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData4();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload" depth="30" tilt="-30" rotation="-30" perspectiveAngle="90" enable3D="true" enableRotation="false">
|
||||
<ej:chart-legend visible="false"></ej:chart-legend>
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series dataSource="${DataSource2}" explodeIndex="0" xName="Year" yName="XName" startAngle="145"></ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-commonSeriesOptions type="pie" labelPosition="outside" enableAnimation="true">
|
||||
|
||||
<ej:chart-commonSeriesOptions-tooltip visible="true" format="#point.x# : #point.y#"></ej:chart-commonSeriesOptions-tooltip>
|
||||
|
||||
</ej:chart-commonSeriesOptions>
|
||||
<ej:chart-title text="Expenditure shares on a child"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
sender.model.primaryYAxis.labelFormat = "{value}%";
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData3();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload">
|
||||
|
||||
<ej:chart-primaryYAxis>
|
||||
<ej:chart-primaryYAxis-range min="3" max="12" interval="1"></ej:chart-primaryYAxis-range>
|
||||
<ej:chart-primaryYAxis-title text="Year"></ej:chart-primaryYAxis-title>
|
||||
</ej:chart-primaryYAxis>
|
||||
|
||||
<ej:chart-primaryXAxis labelIntersectAction="hide">
|
||||
<ej:chart-primaryXAxis-range min="2005" max="2012" interval="1"></ej:chart-primaryXAxis-range>
|
||||
<ej:chart-primaryXAxis-title text="Percentage"></ej:chart-primaryXAxis-title>
|
||||
</ej:chart-primaryXAxis>
|
||||
<ej:chart-legend visible="false"></ej:chart-legend>
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series name="Gold" dataSource="${DataSource2}" xName="Year" yName="YName"></ej:chart-series>
|
||||
<ej:chart-series name="Silver" dataSource="${DataSource2}" xName="Year" yName="YName1"></ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-commonSeriesOptions type="bar" enableAnimation="true">
|
||||
|
||||
<ej:chart-commonSeriesOptions-tooltip visible="false"></ej:chart-commonSeriesOptions-tooltip>
|
||||
<ej:chart-commonSeriesOptions-marker>
|
||||
<ej:chart-commonSeriesOptions-marker-dataLabel visible="true"></ej:chart-commonSeriesOptions-marker-dataLabel>
|
||||
</ej:chart-commonSeriesOptions-marker>
|
||||
|
||||
</ej:chart-commonSeriesOptions>
|
||||
<ej:chart-title text="Unemployment rate (%)"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
sender.model.primaryYAxis.labelFormat = "{value}%";
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData9();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload">
|
||||
|
||||
<ej:chart-primaryYAxis>
|
||||
<ej:chart-primaryYAxis-range min="-2" max="16" interval="2"></ej:chart-primaryYAxis-range>
|
||||
<ej:chart-primaryYAxis-title text="GDP Growth Rate"></ej:chart-primaryYAxis-title>
|
||||
</ej:chart-primaryYAxis>
|
||||
<ej:chart-primaryXAxis>
|
||||
<ej:chart-primaryXAxis-title text="Literacy Rate"></ej:chart-primaryXAxis-title>
|
||||
<ej:chart-primaryXAxis-range min="60" max="100" interval="5"></ej:chart-primaryXAxis-range>
|
||||
</ej:chart-primaryXAxis>
|
||||
<ej:chart-legend visible="false"></ej:chart-legend>
|
||||
<ej:chart-seriesCollection>
|
||||
|
||||
<ej:chart-series dataSource="${DataSource2}" xName="XName" pointColorMappingName="Year" size="YName1" name="pound" yName="YName"></ej:chart-series>
|
||||
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-commonSeriesOptions type="bubble" enableAnimation="true">
|
||||
|
||||
<ej:chart-commonSeriesOptions-tooltip visible="false"></ej:chart-commonSeriesOptions-tooltip>
|
||||
|
||||
</ej:chart-commonSeriesOptions>
|
||||
<ej:chart-title text="World Countries Details"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
sender.model.series[0].opacity="0.7";
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData11();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload">
|
||||
|
||||
|
||||
<ej:chart-primaryXAxis intervalType="years" valueType="datetime">
|
||||
<ej:chart-primaryXAxis-title text="Date"></ej:chart-primaryXAxis-title>
|
||||
</ej:chart-primaryXAxis>
|
||||
|
||||
<ej:chart-primaryYAxis labelIntersectAction="hide">
|
||||
<ej:chart-primaryYAxis-range min="0" max="250" interval="50"></ej:chart-primaryYAxis-range>
|
||||
</ej:chart-primaryYAxis>
|
||||
|
||||
<ej:chart-legend visible="false"></ej:chart-legend>
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series type="candle" dataSource="${DataSource2}" xName="Year" high="XName" low="YName" open="YName1" close="YName2" ></ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-title text="Foreign Exchange Rate Analysis"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData2();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload">
|
||||
|
||||
|
||||
|
||||
|
||||
<ej:chart-primaryYAxis>
|
||||
<ej:chart-primaryYAxis-range min="0" max="80" interval="20"></ej:chart-primaryYAxis-range>
|
||||
</ej:chart-primaryYAxis>
|
||||
<ej:chart-primaryXAxis>
|
||||
<ej:chart-primaryXAxis-axisLine visible="true"></ej:chart-primaryXAxis-axisLine>
|
||||
</ej:chart-primaryXAxis>
|
||||
<ej:chart-legend position="top"></ej:chart-legend>
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series name="Gold" dataSource="${DataSource2}" xName="Year" yName="YName"></ej:chart-series>
|
||||
<ej:chart-series name="Silver" dataSource="${DataSource2}" xName="Year" yName="YName1"></ej:chart-series>
|
||||
<ej:chart-series name="Bronze" dataSource="${DataSource2}" xName="Year" yName="YName2"></ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-commonSeriesOptions type="column" enableAnimation="true">
|
||||
|
||||
<ej:chart-commonSeriesOptions-tooltip visible="true" format="#point.x# : #point.y#"></ej:chart-commonSeriesOptions-tooltip>
|
||||
|
||||
</ej:chart-commonSeriesOptions>
|
||||
<ej:chart-title text="Olympic Medals"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData10();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload">
|
||||
|
||||
<ej:chart-primaryYAxis>
|
||||
<ej:chart-primaryYAxis-range min="0" max="160" interval="20"></ej:chart-primaryYAxis-range>
|
||||
<ej:chart-primaryYAxis-title text="Unit Sold"></ej:chart-primaryYAxis-title>
|
||||
</ej:chart-primaryYAxis>
|
||||
|
||||
<ej:chart-primaryXAxis labelIntersectAction="hide">
|
||||
<ej:chart-primaryXAxis-title text="Month"></ej:chart-primaryXAxis-title>
|
||||
</ej:chart-primaryXAxis>
|
||||
|
||||
<ej:chart-legend visible="true" shape="seriesType">
|
||||
|
||||
<ej:chart-legend-itemStyle width="15" height="15"></ej:chart-legend-itemStyle>
|
||||
|
||||
</ej:chart-legend>
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series name="Unit Sold" type="column" enableAnimation="true" fill="#69D2E7" dataSource="${DataSource2}" xName="Year" yName="XName">
|
||||
|
||||
<ej:chart-series-tooltip visible="true" format="#point.x# <br/> Unit Sold : #point.y# <br/>"></ej:chart-series-tooltip>
|
||||
|
||||
|
||||
|
||||
</ej:chart-series>
|
||||
<ej:chart-series name="Total Transaction" type="line" enableAnimation="true" dataSource="${DataSource2}" xName="Year" yName="YName">
|
||||
|
||||
<ej:chart-series-marker visible="true" shape="circle"></ej:chart-series-marker>
|
||||
<ej:chart-series-border width="2"></ej:chart-series-border>
|
||||
<ej:chart-series-tooltip visible="true" format="#point.x# <br/> Profit : #point.y# <br/>"></ej:chart-series-tooltip>
|
||||
|
||||
|
||||
</ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
|
||||
<ej:chart-title text="Sales Report"></ej:chart-title>
|
||||
|
||||
</ej:chart>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload">
|
||||
|
||||
<ej:chart-primaryYAxis>
|
||||
<ej:chart-primaryYAxis-range min="25" max="50" interval="5"></ej:chart-primaryYAxis-range>
|
||||
</ej:chart-primaryYAxis>
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series name="India" dataSource="${DataSource2}" xName="XName" yName="YName"></ej:chart-series>
|
||||
<ej:chart-series name="Germany" dataSource="${DataSource2}" xName="XName" yName="YName1"></ej:chart-series>
|
||||
<ej:chart-series name="England" dataSource="${DataSource2}" xName="XName" yName="YName2"></ej:chart-series>
|
||||
<ej:chart-series name="France" dataSource="${DataSource2}" xName="XName" yName="YName3"></ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-commonSeriesOptions type="line" enableAnimation="true">
|
||||
<ej:chart-commonSeriesOptions-tooltip visible="true"></ej:chart-commonSeriesOptions-tooltip>
|
||||
<ej:chart-commonSeriesOptions-marker visible="true" shape="circle">
|
||||
<ej:chart-commonSeriesOptions-marker-size height="7" width="7"></ej:chart-commonSeriesOptions-marker-size>
|
||||
</ej:chart-commonSeriesOptions-marker>
|
||||
<ej:chart-commonSeriesOptions-border width="2"></ej:chart-commonSeriesOptions-border>
|
||||
|
||||
</ej:chart-commonSeriesOptions>
|
||||
<ej:chart-title text="Efficiency of oil-fired power production"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
sender.model.primaryYAxis.labelFormat = "{value}%";
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<ej:chart id="livechart" isResponsive="true" enableCanvasRendering="true" load="onchartload">
|
||||
|
||||
<ej:chart-primaryYAxis>
|
||||
<ej:chart-primaryYAxis-range min="0" max="50" interval="10"></ej:chart-primaryYAxis-range>
|
||||
</ej:chart-primaryYAxis>
|
||||
<ej:chart-primaryXAxis>
|
||||
<ej:chart-primaryXAxis-majorGridLines visible="false"></ej:chart-primaryXAxis-majorGridLines>
|
||||
</ej:chart-primaryXAxis>
|
||||
<ej:chart-legend visible="false"></ej:chart-legend>
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series type="line" enableAnimation="false" fill="#E46455"></ej:chart-series>
|
||||
<ej:chart-series type="line" enableAnimation="false"></ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-title text="Olympic Medals"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
|
||||
|
||||
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
var chartobj = this;
|
||||
var num = 100, data = [], data1 = [];
|
||||
var i;
|
||||
var value = 10;
|
||||
var chartData=null;
|
||||
var chartData1 = null
|
||||
var value1 = 15;
|
||||
for (i = 0; i < num; i++) {
|
||||
if (Math.random() > .5) {
|
||||
if (value < 45)
|
||||
value += Math.random() * 2.0;
|
||||
else
|
||||
value -= 2.0;
|
||||
|
||||
|
||||
if (value1 < 40)
|
||||
value1 += Math.random() * 1.8;
|
||||
else
|
||||
value1 -= 2.0;
|
||||
}
|
||||
else {
|
||||
if (value > 5)
|
||||
value -= Math.random() * 2.0;
|
||||
else
|
||||
value += 2.0;
|
||||
|
||||
if (value1 > 5)
|
||||
value1 -= Math.random() * 1.8;
|
||||
else
|
||||
value1 += 2.0;
|
||||
}
|
||||
data[i] = {
|
||||
x: i.toString(), y: value
|
||||
};
|
||||
data1[i] = {
|
||||
x: i.toString(), y: value1+10
|
||||
};
|
||||
}
|
||||
chartData = data;
|
||||
chartData1 = data1;
|
||||
sender.model.series[0].points = chartData;
|
||||
sender.model.series[1].points = chartData1;
|
||||
|
||||
|
||||
var interval = setInterval((count) => {
|
||||
|
||||
var chartobj = jQuery("#livechart").data("ejChart");
|
||||
if (Math.random() > .5) {
|
||||
if (value < 45)
|
||||
value += Math.random() * 2.0;
|
||||
else
|
||||
value -= 2.0;
|
||||
|
||||
|
||||
if (value1 < 40)
|
||||
value1 += Math.random() * 1.8;
|
||||
else
|
||||
value1 -= 2.0;
|
||||
}
|
||||
else {
|
||||
if (value > 5)
|
||||
value -= Math.random() * 2.0;
|
||||
else
|
||||
value += 2.0;
|
||||
|
||||
if (value1 > 5)
|
||||
value1 -= Math.random() * 1.8;
|
||||
else
|
||||
value1 += 2.0;
|
||||
}
|
||||
chartData.push({ x: i.toString(), y: value });
|
||||
chartData1.push({ x: i.toString(), y: value1+10 });
|
||||
i++;
|
||||
chartData.shift();
|
||||
chartData1.shift();
|
||||
if(chartobj && chartobj.model){
|
||||
chartobj.model.series[0].points = chartData;
|
||||
chartobj.model.series[1].points = chartData1;
|
||||
chartobj.redraw();
|
||||
}
|
||||
else{
|
||||
clearInterval(interval);
|
||||
}
|
||||
|
||||
|
||||
}, 50);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData5();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload">
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series name="Expenses" dataSource="${DataSource2}" xName="Year" yName="XName">
|
||||
|
||||
<ej:chart-series-marker>
|
||||
<ej:chart-series-marker-dataLabel visible="true" shape="none">
|
||||
<ej:chart-series-marker-dataLabel-connectorLine type="bezier">
|
||||
</ej:chart-series-marker-dataLabel-connectorLine>
|
||||
<ej:chart-series-marker-dataLabel-font size="20px">
|
||||
</ej:chart-series-marker-dataLabel-font>
|
||||
</ej:chart-series-marker-dataLabel>
|
||||
</ej:chart-series-marker>
|
||||
|
||||
</ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-commonSeriesOptions type="pie" labelPosition="inside" enableSmartLabels="true" enableAnimation="true">
|
||||
<ej:chart-commonSeriesOptions-border color="white" width="2"></ej:chart-commonSeriesOptions-border>
|
||||
|
||||
</ej:chart-commonSeriesOptions>
|
||||
<ej:chart-legend visible="false"></ej:chart-legend>
|
||||
<ej:chart-title text="Expenditures"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
sender.model.series[0].marker.dataLabel.textMappingName = "Text";
|
||||
sender.model.series[0].marker.dataLabel.font.color="white";
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData7();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload">
|
||||
|
||||
<ej:chart-primaryYAxis>
|
||||
<ej:chart-primaryYAxis-range min="15" max="90" interval="15"></ej:chart-primaryYAxis-range>
|
||||
</ej:chart-primaryYAxis>
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series name="Line" dataSource="${DataSource2}" xName="Year" yName="XName">
|
||||
<ej:chart-series-marker visible="true"></ej:chart-series-marker>
|
||||
|
||||
</ej:chart-series>
|
||||
<ej:chart-series name="Column" dataSource="${DataSource2}" xName="Year" yName="YName"></ej:chart-series>
|
||||
<ej:chart-series name="Area" dataSource="${DataSource2}" xName="Year" yName="YName1">
|
||||
<ej:chart-series-marker visible="true"></ej:chart-series-marker>
|
||||
|
||||
</ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-commonSeriesOptions type="polar" enableAnimation="true">
|
||||
|
||||
<ej:chart-commonSeriesOptions-tooltip visible="true"></ej:chart-commonSeriesOptions-tooltip>
|
||||
|
||||
</ej:chart-commonSeriesOptions>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
|
||||
sender.model.series[0].zOrder=2;
|
||||
sender.model.series[1].zOrder=1;
|
||||
sender.model.series[1].drawType="column";
|
||||
sender.model.series[2].zOrder=0;
|
||||
sender.model.series[2].drawType="area";
|
||||
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<%@ page import="datasource.ChartDataSource" %>
|
||||
<%@ page import="datasource.GetChartDataSource" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
<%
|
||||
GetChartDataSource obj2 = new GetChartDataSource();
|
||||
ArrayList<ChartDataSource> data2 = obj2.getData8();
|
||||
request.setAttribute("DataSource2",data2);
|
||||
%>
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload">
|
||||
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series name="Website" dataSource="${DataSource2}" xName="Year" yName="XName"></ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-commonSeriesOptions type="pyramid" enableSmartLabels="true" enableAnimation="true">
|
||||
|
||||
<ej:chart-commonSeriesOptions-tooltip visible="true"></ej:chart-commonSeriesOptions-tooltip>
|
||||
<ej:chart-commonSeriesOptions-marker>
|
||||
<ej:chart-commonSeriesOptions-marker-dataLabel visible="true" shape="none">
|
||||
<ej:chart-commonSeriesOptions-marker-dataLabel-font size="12px" fontWeight="lighter"></ej:chart-commonSeriesOptions-marker-dataLabel-font>
|
||||
</ej:chart-commonSeriesOptions-marker-dataLabel>
|
||||
</ej:chart-commonSeriesOptions-marker>
|
||||
|
||||
|
||||
</ej:chart-commonSeriesOptions>
|
||||
<ej:chart-title text="Web Site Visitor"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
sender.model.primaryYAxis.labelFormat = "{value}%";
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %>
|
||||
<body>
|
||||
<div style="border: 0px solid white !important;background:transparent !important">
|
||||
|
||||
|
||||
<ej:chart id="container" isResponsive="true" load="onchartload">
|
||||
|
||||
<ej:chart-primaryXAxis labelFormat="yyyy">
|
||||
<ej:chart-primaryXAxis-range interval="4"></ej:chart-primaryXAxis-range>
|
||||
</ej:chart-primaryXAxis>
|
||||
<ej:chart-legend visible="false"></ej:chart-legend>
|
||||
<ej:chart-zooming enable="true" enableMouseWheel="true"></ej:chart-zooming>
|
||||
<ej:chart-seriesCollection>
|
||||
<ej:chart-series name="Server"></ej:chart-series>
|
||||
</ej:chart-seriesCollection>
|
||||
<ej:chart-commonSeriesOptions type="line" enableAnimation="true">
|
||||
|
||||
<ej:chart-commonSeriesOptions-tooltip visible="false" format="#point.x# : #point.y#"></ej:chart-commonSeriesOptions-tooltip>
|
||||
|
||||
</ej:chart-commonSeriesOptions>
|
||||
<ej:chart-title text="Server CPU Load"></ej:chart-title>
|
||||
</ej:chart>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
sender.model.primaryYAxis.labelFormat="{value}%";
|
||||
var data = GetData();
|
||||
sender.model.series[0].dataSource = data.Open;
|
||||
sender.model.series[0].xName = "XValue";
|
||||
sender.model.series[0].yName = "YValue";
|
||||
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
||||
var model = sender.model,
|
||||
seriesLength = model.series.length;
|
||||
model.title.enableTrim = true;
|
||||
model.elementSpacing = 5;
|
||||
model.legend.visible = false;
|
||||
model.size.height = null;
|
||||
model.size.width = null;
|
||||
for (var i=0; i< seriesLength; i++){
|
||||
if (!model.series[i].marker)
|
||||
model.series[i].marker = {};
|
||||
if (!model.series[i].marker.size)
|
||||
model.series[i].marker.size = {};
|
||||
model.series[i].marker.size.width = 6;
|
||||
model.series[i].marker.size.height = 6;
|
||||
}
|
||||
model.primaryXAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryXAxis.title)
|
||||
model.primaryXAxis.title.text = "";
|
||||
model.primaryXAxis.edgeLabelPlacement = "hide";
|
||||
model.primaryYAxis.labelIntersectAction = "rotate45";
|
||||
if (model.primaryYAxis.title)
|
||||
model.primaryYAxis.title.text = "";
|
||||
model.primaryYAxis.edgeLabelPlacement = "hide";
|
||||
if (model.axes) {
|
||||
for (var j=0; j< model.axes.length; j++){
|
||||
model.axes[j].labelIntersectAction = "rotate45";
|
||||
if (model.axes[j].title)
|
||||
model.axes[j].title.text = "";
|
||||
model.axes[j].edgeLabelPlacement = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function GetData() {
|
||||
var series1 = [];
|
||||
var value = 100;
|
||||
for (var i = 1; i < 250; i++) {
|
||||
if (Math.random() > .5) {
|
||||
value += Math.random();
|
||||
} else {
|
||||
value -= Math.random();
|
||||
}
|
||||
var point = { XValue: new Date(1970, i + 2, i), YValue: value };
|
||||
series1.push(point);
|
||||
}
|
||||
var data = { Open: series1 };
|
||||
return data;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.cols-sample-area{
|
||||
width:80%;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList"%>
|
||||
<%@ page session="false" import="java.util.Iterator"%>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cols-sample-area"
|
||||
style="border: 0px solid white !important;background:transparent !important">
|
||||
<ej:circularGauge id="circulargauge" readOnly="false" backgroundColor="transparent"
|
||||
value="80" minimum="0" maximum="120">
|
||||
|
||||
<ej:circularGauge-scales>
|
||||
<ej:circularGauge-scale showRanges="true" maximum="120" majorIntervalValue="20" minorIntervalValue="10" startAngle="122" sweepAngle="296" radius="130" showScaleBar="true" size="1">
|
||||
<ej:circularGauge-scale-pointers>
|
||||
<ej:circularGauge-scale-pointer showBackNeedle="true"
|
||||
backNeedleLength="20" length="95" width="7" value="80"></ej:circularGauge-scale-pointer>
|
||||
</ej:circularGauge-scale-pointers>
|
||||
<ej:circularGauge-scales-pointerCap radius="12"></ej:circularGauge-scales-pointerCap>
|
||||
<ej:circularGauge-scale-labels>
|
||||
<ej:circularGauge-scale-label color="#8c8c8c"></ej:circularGauge-scale-label>
|
||||
</ej:circularGauge-scale-labels>
|
||||
<ej:circularGauge-scale-ticks>
|
||||
<ej:circularGauge-scale-tick type="major" distanceFromScale="2"
|
||||
height="16" width="1" color="#8c8c8c"></ej:circularGauge-scale-tick>
|
||||
<ej:circularGauge-scale-tick type="minor" distanceFromScale="2"
|
||||
height="8" width="1" color="#8c8c8c"></ej:circularGauge-scale-tick>
|
||||
</ej:circularGauge-scale-ticks>
|
||||
<ej:circularGauge-scale-ranges>
|
||||
<ej:circularGauge-scale-range distanceFromScale="-30"
|
||||
startValue="0" endValue="70"></ej:circularGauge-scale-range>
|
||||
<ej:circularGauge-scale-range distanceFromScale="-30"
|
||||
startValue="70" endValue="110" backgroundColor="#fc0606">
|
||||
<ej:circularGauge-scales-ranges-border color="#fc0606"></ej:circularGauge-scales-ranges-border>
|
||||
</ej:circularGauge-scale-range>
|
||||
<ej:circularGauge-scale-range distanceFromScale="-30"
|
||||
startValue="110" endValue="120" backgroundColor="#f5b43f">
|
||||
<ej:circularGauge-scales-ranges-border color="#f5b43f"></ej:circularGauge-scales-ranges-border>
|
||||
</ej:circularGauge-scale-range>
|
||||
</ej:circularGauge-scale-ranges>
|
||||
</ej:circularGauge-scale>
|
||||
|
||||
</ej:circularGauge-scales>
|
||||
</ej:circularGauge>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld" %>
|
||||
<%@ page import="com.syncfusion.*" %>
|
||||
|
||||
<%@ page session="false" import="java.util.ArrayList" %>
|
||||
<%@ page session="false" import="java.util.Iterator" %> </head>
|
||||
<body>
|
||||
<div class="cols-sample-area" style="border: 0px solid white !important;background:transparent !important">
|
||||
<ej:circularGauge id="pointer" backgroundColor="#e0e0e0" drawLabels="drawLabels" drawPointers="drawpointers" enableAnimation="false" readOnly="true" height="350" width="350" radius="40">
|
||||
|
||||
<ej:circularGauge-scales>
|
||||
|
||||
<ej:circularGauge-scale showRanges="true" showTicks="false" showIndicators="true" startAngle="120" sweepAngle="300" radius="80" size="1"
|
||||
showScaleBar="false" minimum="0" maximum="100" majorIntervalValue="10" minorIntervalValue="10">
|
||||
|
||||
<ej:circularGauge-scales-border width="1"></ej:circularGauge-scales-border>
|
||||
|
||||
<ej:circularGauge-scale-customLabelsCollection>
|
||||
|
||||
<ej:circularGauge-scale-customLabels value="SPORTS" color="#333333">
|
||||
<ej:circularGauge-scales-customLabels-font fontFamily="Segoe UI" fontStyle="Bold" size="16px"></ej:circularGauge-scales-customLabels-font>
|
||||
<ej:circularGauge-scales-customLabels-position x="175" y="160"></ej:circularGauge-scales-customLabels-position>
|
||||
</ej:circularGauge-scale-customLabels>
|
||||
<ej:circularGauge-scale-customLabels value="Fan Ratio" color="#333333">
|
||||
<ej:circularGauge-scales-customLabels-font fontFamily="Segoe UI" size="14px"></ej:circularGauge-scales-customLabels-font>
|
||||
<ej:circularGauge-scales-customLabels-position x="175" y="175"></ej:circularGauge-scales-customLabels-position>
|
||||
</ej:circularGauge-scale-customLabels>
|
||||
<ej:circularGauge-scale-customLabels value="(in million)" color="#333333">
|
||||
<ej:circularGauge-scales-customLabels-font fontFamily="Segoe UI" size="10px"></ej:circularGauge-scales-customLabels-font>
|
||||
<ej:circularGauge-scales-customLabels-position x="175" y="190"></ej:circularGauge-scales-customLabels-position>
|
||||
</ej:circularGauge-scale-customLabels>
|
||||
|
||||
</ej:circularGauge-scale-customLabelsCollection>
|
||||
|
||||
<ej:circularGauge-scale-labels>
|
||||
|
||||
<ej:circularGauge-scale-label color="transparent"></ej:circularGauge-scale-label>
|
||||
|
||||
</ej:circularGauge-scale-labels>
|
||||
|
||||
<ej:circularGauge-scale-ranges>
|
||||
<ej:circularGauge-scale-range size= "20" distanceFromScale="-36" startValue="0" endValue="80" backgroundColor="#bc4b4b">
|
||||
<ej:circularGauge-scales-ranges-border color="#bc4b4b" width="2"></ej:circularGauge-scales-ranges-border>
|
||||
</ej:circularGauge-scale-range>
|
||||
<ej:circularGauge-scale-range size= "20" distanceFromScale="-66" startValue="0" endValue="70" backgroundColor="#21a56f">
|
||||
<ej:circularGauge-scales-ranges-border color="#21a56f" width="2"></ej:circularGauge-scales-ranges-border>
|
||||
</ej:circularGauge-scale-range>
|
||||
<ej:circularGauge-scale-range size= "20" distanceFromScale="-95" startValue="0" endValue="90" backgroundColor="#2bafbc">
|
||||
<ej:circularGauge-scales-ranges-border color="#2bafbc" width="2"></ej:circularGauge-scales-ranges-border>
|
||||
</ej:circularGauge-scale-range>
|
||||
</ej:circularGauge-scale-ranges>
|
||||
|
||||
|
||||
<ej:circularGauge-scale-pointers>
|
||||
<ej:circularGauge-scale-pointer imageUrl="Content/images/gauge/golfball.png" type="marker" markerType="image" value="80" distanceFromScale="1" placement="far" width="18" length="18" backgroundColor="transparent">
|
||||
<ej:circularGauge-scales-pointers-border width="0" color="transparent"></ej:circularGauge-scales-pointers-border>
|
||||
</ej:circularGauge-scale-pointer>
|
||||
<ej:circularGauge-scale-pointer imageUrl= "Content/images/gauge/basketball.png" type="marker" markerType="image" value="70" distanceFromScale="30" placement="far" width="18" length="18" backgroundColor="transparent">
|
||||
<ej:circularGauge-scales-pointers-border width="0" color="transparent"></ej:circularGauge-scales-pointers-border>
|
||||
</ej:circularGauge-scale-pointer>
|
||||
<ej:circularGauge-scale-pointer imageUrl= "Content/images/gauge/football.png" type="marker" markerType="image" value="90" distanceFromScale="59" placement="far" width="18" length="18" backgroundColor="transparent">
|
||||
<ej:circularGauge-scales-pointers-border width="0" color="transparent"></ej:circularGauge-scales-pointers-border>
|
||||
</ej:circularGauge-scale-pointer>
|
||||
|
||||
</ej:circularGauge-scale-pointers>
|
||||
<ej:circularGauge-scale-indicators>
|
||||
<ej:circularGauge-scale-indicator height="10" width="10" type="text">
|
||||
|
||||
<ej:circularGauge-scale-indicator-stateRanges>
|
||||
<ej:circularGauge-scale-indicator-stateRange startValue="0" endValue="100" text="" textColor="#8c8c8c"></ej:circularGauge-scale-indicator-stateRange>
|
||||
</ej:circularGauge-scale-indicator-stateRanges>
|
||||
</ej:circularGauge-scale-indicator>
|
||||
<ej:circularGauge-scale-indicator height="10" width="10" type="text">
|
||||
<ej:circularGauge-scale-indicator-stateRanges>
|
||||
<ej:circularGauge-scale-indicator-stateRange startValue="0" endValue="100" text="" textColor="#8c8c8c"></ej:circularGauge-scale-indicator-stateRange>
|
||||
</ej:circularGauge-scale-indicator-stateRanges>
|
||||
</ej:circularGauge-scale-indicator>
|
||||
<ej:circularGauge-scale-indicator height="10" width="10" type="text">
|
||||
<ej:circularGauge-scale-indicator-stateRanges>
|
||||
<ej:circularGauge-scale-indicator-stateRange startValue="0" endValue="100" text="" textColor="#8c8c8c"></ej:circularGauge-scale-indicator-stateRange>
|
||||
</ej:circularGauge-scale-indicator-stateRanges>
|
||||
</ej:circularGauge-scale-indicator>
|
||||
|
||||
</ej:circularGauge-scale-indicators>
|
||||
|
||||
</ej:circularGauge-scale>
|
||||
|
||||
</ej:circularGauge-scales>
|
||||
|
||||
</ej:circularGauge>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function drawLabels(args) {
|
||||
if (args.pointerValue != 100 && args.pointerValue != 0)
|
||||
args.style.textValue = "";
|
||||
}
|
||||
function drawpointers(args) {
|
||||
var i = args.pointer.index;
|
||||
args.model.scales[0].indicators[i].stateRanges[0].text = args.pointer.pointerValue.toString();
|
||||
args.model.scales[0].indicators[i].position.x = args.position.startX + 8;
|
||||
args.model.scales[0].indicators[i].position.y = args.position.startY + 25;
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<ej:colorPicker id="color" value="#278787" modelType="palette"></ej:colorPicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.control{
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.cols-sample-area {
|
||||
width: 95%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
|
||||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
<%@ page import="java.util.HashMap"%>
|
||||
<%@ page import="java.util.ArrayList"%>
|
||||
<%
|
||||
ArrayList<String> color=new ArrayList<String>();
|
||||
color.add("ff33ff");
|
||||
color.add("cc33ff");
|
||||
color.add("eaeaea");
|
||||
color.add("99ffff");
|
||||
color.add("ccccff");
|
||||
color.add("9999ff");
|
||||
color.add("ffffcc");
|
||||
color.add("cc33ff");
|
||||
color.add("ff33ff");
|
||||
color.add("eaeaea");
|
||||
%>
|
||||
|
||||
<div class="cols-sample-area ">
|
||||
<div class="control">
|
||||
<ej:colorPicker id="color" value="#aeaeae" palette="custompalette" modelType="palette" showSwitcher="flase" custom="<%=color %>"></ej:colorPicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.control{
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.cols-sample-area {
|
||||
width: 95%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
<div class="cols-sample-area ">
|
||||
<div class="control">
|
||||
<ej:colorPicker id="color" value="#6e4242"></ej:colorPicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.control{
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.cols-sample-area {
|
||||
width: 95%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
||||
pageEncoding="ISO-8859-1"%>
|
||||
<%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>
|
||||
<%@ page import="com.syncfusion.*"%>
|
||||
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<ej:colorPicker id="color" value="#eaefdc" select="onSelect"
|
||||
close="onClose" open="onOpen" change="onChange"></ej:colorPicker>
|
||||
</div>
|
||||
</div>
|
||||
<div id="Logger" class="box">
|
||||
<h4>Event Trace</h4>
|
||||
<div class="EventLog" id="EventLog"></div>
|
||||
<div>
|
||||
<ej:button id="clearBtn" click="clearLog" size="small" text="Clear"></ej:button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function clearLog() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
function onOpen(args) {
|
||||
jQuery.addEventLog("ColorPicker popup has been <span class='eventTitle'>Opened</span>. ");
|
||||
}
|
||||
function onClose(args) {
|
||||
jQuery.addEventLog("ColorPicker popup has been <span class='eventTitle'>Closed</span>.");
|
||||
}
|
||||
function onSelect(args) {
|
||||
jQuery.addEventLog("The value '" + args.value + "' has been <span class='eventTitle'>selected</span>.");
|
||||
}
|
||||
function onChange(args) {
|
||||
jQuery.addEventLog("The value has been <span class='eventTitle'>changed</span> to '" + args.value + "'.");
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.control{
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.cols-sample-area {
|
||||
width: 95%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,3 @@
|
|||
@import url("../ej.reportdesigner.core.bootstrap.min.css");
|
||||
@import url("ej.reportdesigner.theme.min.css");
|
||||
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,3 @@
|
|||
@import url("../ej.widgets.core.bootstrap.min.css");
|
||||
@import url("ej.theme.min.css");
|
||||
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 963 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 4.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 158 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 9.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 326 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.3 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#6B6B6B;}
|
||||
</style>
|
||||
<rect x="5" y="20" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="25" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="30" class="st0" width="26" height="1"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 598 B |
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#6B6B6B;}
|
||||
</style>
|
||||
<rect x="5" y="12" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="17" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="22" class="st0" width="26" height="1"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 598 B |
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#6B6B6B;}
|
||||
</style>
|
||||
<rect x="5" y="5" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="10" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="15" class="st0" width="26" height="1"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 597 B |
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#6B6B6B;}
|
||||
</style>
|
||||
<rect x="5" y="20" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="25" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="30" class="st0" width="16" height="1"/>
|
||||
<path class="st0" d="M22,6v9h-9V6H22 M23,5H12v11h11V5L23,5z"/>
|
||||
<polygon class="st0" points="18,6 17,6 17,15 18,15 18,6 "/>
|
||||
<polygon class="st0" points="22,10 13,10 13,11 22,11 22,10 "/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 784 B |
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#6B6B6B;}
|
||||
</style>
|
||||
<rect x="5" y="20" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="25" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="30" class="st0" width="16" height="1"/>
|
||||
<path class="st0" d="M15,6v9H6V6H15 M16,5H5v11h11V5L16,5z"/>
|
||||
<polygon class="st0" points="11,6 10,6 10,15 11,15 11,6 "/>
|
||||
<polygon class="st0" points="15,10 6,10 6,11 15,11 15,10 "/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 780 B |
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="36px" height="36px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#6B6B6B;}
|
||||
</style>
|
||||
<rect x="5" y="20" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="25" class="st0" width="26" height="1"/>
|
||||
<rect x="5" y="30" class="st0" width="16" height="1"/>
|
||||
<path class="st0" d="M30,6v9h-9V6H30 M31,5H20v11h11V5L31,5z"/>
|
||||
<polygon class="st0" points="26,6 25,6 25,15 26,15 26,6 "/>
|
||||
<polygon class="st0" points="30,10 21,10 21,11 30,11 30,10 "/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 784 B |
Двоичный файл не отображается.
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 366 KiB |
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 35 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.4 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#F0F2F4;}
|
||||
.st1{fill:#C4C4C4;}
|
||||
.st2{fill:#EAEAEA;}
|
||||
</style>
|
||||
<rect x="0.8" y="0.7" class="st0" width="43.5" height="43.7"/>
|
||||
<path class="st1" d="M34.6,28.5c-3.2,3-7.4,4.9-12.1,4.9s-8.9-1.9-12.1-4.9c-4.7,3.5-8.1,8.9-9.3,15.2h42.8
|
||||
C42.7,37.3,39.3,31.9,34.6,28.5z"/>
|
||||
<circle class="st1" cx="22.5" cy="16" r="10.4"/>
|
||||
<path class="st2" d="M45,45H0V0h45V45z M1,44h43V1H1V44z"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 760 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 9.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 20 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 20 KiB |
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче