v19.1.0.63
This commit is contained in:
buildautomation
Родитель
42d5eed052
Коммит
5c0208c747
|
|
@ -0,0 +1,256 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
$acr = new EJ\Accordion("APIAccordion");
|
||||
$acr->width("550px");
|
||||
|
||||
$acrItem = new EJ\Accordion\AccordionItem();
|
||||
$acrItem->text("London")->templateStart();
|
||||
?>
|
||||
<div>
|
||||
London is one of the most popular tourist destinations in the world for a reason. A cultural and historical hub, London has an excellent public transportation system that allows visitors to see all the fantastic sights without spending a ton of money on a rental car.
|
||||
</div>
|
||||
<?php
|
||||
$acrItem->templateEnd();
|
||||
$acr->AddItem($acrItem);
|
||||
$acrItem2 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem2->text("Paris")->templateStart();
|
||||
?>
|
||||
<div>
|
||||
Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism that oozes from every one of its beautiful corners.
|
||||
</div>
|
||||
<?php
|
||||
$acrItem2->templateEnd();
|
||||
$acr->AddItem($acrItem2);
|
||||
$acrItem3 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem3->text("Rome")->templateStart();
|
||||
?>
|
||||
<div>
|
||||
Rome is one of the world's most fascinating cities. The old adage that Rome was not built in a day — and that you won't see it in one or even in three — is true. For the intrepid traveler who can keep pace, here is a list of must-sees. But remember what the Romans say: "Even a lifetime isn't enough to see Rome."
|
||||
</div>
|
||||
<?php
|
||||
$acrItem3->templateEnd();
|
||||
$acr->AddItem($acrItem3);
|
||||
echo $acr->render();
|
||||
?>
|
||||
</div>
|
||||
<div id="property-window" class="box wide">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Active Index
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<?php
|
||||
$dropdownlist =new EJ\DropDownList("optActiveChange");
|
||||
echo $dropdownlist->targetID("ddlcontent1")->width("120px")->watermarkText("Select")->change("onActiveChange")->render();
|
||||
?>
|
||||
|
||||
<div id="ddlcontent1">
|
||||
<ul>
|
||||
<li>London</li>
|
||||
<li>Paris</li>
|
||||
<li>Rome</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
Disable Item
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<?php
|
||||
$dropdownlist =new EJ\DropDownList("optDisableChange");
|
||||
echo $dropdownlist->targetID("ddlcontent2")->width("120px")->showCheckbox(true)->watermarkText("Select")->change("onDisableChange")->render();
|
||||
?>
|
||||
|
||||
<div id="ddlcontent2">
|
||||
<ul>
|
||||
<li>London</li>
|
||||
<li>Paris</li>
|
||||
<li>Rome</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Enable Item
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<?php
|
||||
$dropdownlist =new EJ\DropDownList("optEnableChange");
|
||||
echo $dropdownlist->targetID("ddlcontent3")->width("120px")->value("content")->change("onEnableChange")->render();
|
||||
?>
|
||||
|
||||
<div id="ddlcontent3">
|
||||
<ul>
|
||||
<li>London</li>
|
||||
<li>Paris</li>
|
||||
<li>Rome</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Enable / Disable All
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<?php
|
||||
$button = new EJ\ToggleButton("btnEnableDisable");
|
||||
echo $button->size("normal") ->
|
||||
change("onEnaleDisableAll")-> defaultText("Disable All")-> activeText("Enable All")-> width("120px")->
|
||||
render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Show / Hide
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<?php
|
||||
$button = new EJ\ToggleButton("chkShowHide");
|
||||
echo $button->size("normal") ->
|
||||
change("onShowHide")-> defaultText("Hide")-> activeText("Show")-> width("120px")->
|
||||
render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Destroy
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<?php
|
||||
$button = new EJ\ToggleButton("chkDestroy");
|
||||
echo $button->size("normal") ->
|
||||
change("onDestoryRestore")-> defaultText("Destory")-> activeText("Restore")-> width("120px")->
|
||||
render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Height Adjust Mode
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<?php
|
||||
$dropdownlist =new EJ\DropDownList("optHeightAdjust");
|
||||
echo $dropdownlist->targetID("ddlcontent4")->width("120px")->value("content")->change("onHeightAdjust")->render();
|
||||
?>
|
||||
|
||||
<div id="ddlcontent4">
|
||||
<ul>
|
||||
<li>Fill</li>
|
||||
<li>Content</li>
|
||||
<li>Auto</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Close button
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<?php
|
||||
$button = new EJ\ToggleButton("chkCloseBtn");
|
||||
echo $button->size("normal") ->
|
||||
change("onShowHideCloseBtn")-> defaultText("Show")-> activeText("Hide")-> width("120px")->
|
||||
render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var acrdnObj, optDisable, optEnable, activeObj;
|
||||
$(function () {
|
||||
// declaration
|
||||
acrdnObj = $("#APIAccordion").data("ejAccordion");
|
||||
activeObj=$("#optActiveChange").data("ejDropDownList");
|
||||
optDisable = $("#optDisableChange").data("ejDropDownList");
|
||||
optEnable = $("#optEnableChange").data("ejDropDownList");
|
||||
});
|
||||
function onEnaleDisableAll(args) {
|
||||
if (acrdnObj) {
|
||||
if (args.isChecked){
|
||||
acrdnObj.disable();
|
||||
activeObj.disable();
|
||||
optDisable.disable();
|
||||
}
|
||||
else{
|
||||
acrdnObj.enable();
|
||||
activeObj.enable();
|
||||
optDisable.enable();
|
||||
}
|
||||
}
|
||||
}
|
||||
function onDestoryRestore(args) {
|
||||
if (args.isChecked) {
|
||||
acrdnObj.destroy();
|
||||
acrdnObj = null;
|
||||
}
|
||||
else {
|
||||
$("#APIAccordion").ejAccordion();
|
||||
acrdnObj = $("#APIAccordion").data("ejAccordion");
|
||||
}
|
||||
}
|
||||
function onActiveChange(args) {
|
||||
if (acrdnObj) {
|
||||
acrdnObj.option({ selectedItemIndex: args.value });
|
||||
$("#optDisableChange").ejDropDownList("clearText");
|
||||
$("#optEnableChange").ejDropDownList("clearText");
|
||||
}
|
||||
}
|
||||
function onDisableChange(args) {
|
||||
var arrIndex = [], uncheck = [];
|
||||
if (args.isChecked) arrIndex.push(parseInt(args.value));
|
||||
else uncheck.push(parseInt(args.value));
|
||||
if (acrdnObj) {
|
||||
acrdnObj.disableItems(arrIndex); acrdnObj.enableItems(uncheck);
|
||||
$("#optActiveChange").ejDropDownList("clearText");
|
||||
$("#optEnableChange").ejDropDownList("clearText");
|
||||
|
||||
}
|
||||
}
|
||||
function onEnableChange(args) {
|
||||
var arrayIndex = [], uncheck = [];
|
||||
if (args.isChecked) arrayIndex.push(parseInt(args.value));
|
||||
else uncheck.push(parseInt(args.value));
|
||||
if (acrdnObj) {
|
||||
acrdnObj.enableItems(arrayIndex); acrdnObj.disableItems(uncheck);
|
||||
$("#optActiveChange").ejDropDownList("clearText");
|
||||
$("#optDisableChange").ejDropDownList("clearText");
|
||||
}
|
||||
}
|
||||
function onShowHide(args) {
|
||||
if (acrdnObj) {
|
||||
if (args.isChecked)
|
||||
acrdnObj.show();
|
||||
else
|
||||
acrdnObj.hide();
|
||||
}
|
||||
}
|
||||
function onHeightAdjust(args) {
|
||||
if (acrdnObj) {
|
||||
acrdnObj.element.find(">.e-content").css("height", "");
|
||||
acrdnObj.option("heightAdjustMode", args.value);
|
||||
}
|
||||
}
|
||||
function onShowHideCloseBtn(args) {
|
||||
acrdnObj && acrdnObj.option("showCloseButton", args.isChecked);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
|
||||
<?php
|
||||
$acr = new EJ\Accordion("basicAccordion");
|
||||
$acr->width("550px");
|
||||
|
||||
$acrItem = new EJ\Accordion\AccordionItem();
|
||||
$acrItem->text("Inbox")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem->templateEnd();
|
||||
$acr->AddItem($acrItem);
|
||||
$acrItem2 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem2->text("Sent")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem2->templateEnd();
|
||||
$acr->AddItem($acrItem2);
|
||||
$acrItem3 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem3->text("Trash")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem3->templateEnd();
|
||||
$acr->AddItem($acrItem3);
|
||||
echo $acr->render();
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width:600px;
|
||||
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,91 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
$acr = new EJ\Accordion("eventAccordion");
|
||||
$acr->width("550px")->create("onCreate")->beforeActivate("onBeforeActivate")->activate("onActivate")->beforeInactivate("onBeforeInActivate")->inActivate("onInActivate")->ajaxBeforeLoad("onBeforeLoad")->ajaxLoad("onLoad")->ajaxSuccess("onAjaxSuccess")->ajaxError("onError");
|
||||
|
||||
$acrItem = new EJ\Accordion\AccordionItem();
|
||||
$acrItem->text("ASP.NET")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem->templateEnd();
|
||||
$acr->AddItem($acrItem);
|
||||
$acrItem2 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem2->text("ASP.NET MVC")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem2->templateEnd();
|
||||
$acr->AddItem($acrItem2);
|
||||
$acrItem3 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem3->text("Javascript (Ajax Load)")->ajaxURL("Content/samplecontent/jscontent.html");
|
||||
$acr->AddItem($acrItem3);
|
||||
echo $acr->enableMultipleOpen(true)->render();
|
||||
?>
|
||||
|
||||
|
||||
</div>
|
||||
<div id="Logger" class="box">
|
||||
<h4>Event Trace</h4>
|
||||
<div class="EventLog" id="EventLog"></div>
|
||||
<div>
|
||||
<?php
|
||||
$clearBtn = new \EJ\Button("clearBtn");
|
||||
echo $clearBtn->size("small")->text("Clear")->click("onClear")->type("button")->render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function onCreate(args) {
|
||||
jQuery.addEventLog("Accordion has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function onBeforeActivate(args) {
|
||||
if (!ej.isNullOrUndefined(args.activeIndex))
|
||||
jQuery.addEventLog("<span class='eventTitle'>BeforeActiveClick</span> event is fired for Index " + args.activeIndex + ".");
|
||||
}
|
||||
function onActivate(args) {
|
||||
if (!ej.isNullOrUndefined(args.activeIndex))
|
||||
jQuery.addEventLog("<span class='eventTitle'>ActiveClick</span> event is fired for Index " + args.activeIndex + ".");
|
||||
}
|
||||
function onBeforeInActivate(args) {
|
||||
if (!ej.isNullOrUndefined(args.inActiveIndex))
|
||||
jQuery.addEventLog("Index " + args.inActiveIndex + " is on <span class='eventTitle'>BeforeInActive</span>.");
|
||||
}
|
||||
function onInActivate(args) {
|
||||
if (!ej.isNullOrUndefined(args.inActiveIndex))
|
||||
jQuery.addEventLog("Index " + args.inActiveIndex + " is on <span class='eventTitle'>inActive</span>.");
|
||||
}
|
||||
function onBeforeLoad(args) {
|
||||
jQuery.addEventLog("<span class='eventTitle'>BeforeLoad</span> event is fired.");
|
||||
}
|
||||
function onLoad(args) {
|
||||
jQuery.addEventLog("Ajax content is <span class='eventTitle'>loaded</span>.");
|
||||
}
|
||||
function onAjaxSuccess(args) {
|
||||
jQuery.addEventLog("Ajax content is loaded <span class='eventTitle'>successfully</span>.");
|
||||
}
|
||||
function onError(args) {
|
||||
jQuery.addEventLog("Ajax content is loaded with an <span class='eventTitle'>error</span>.");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
|
||||
<?php
|
||||
$acr = new EJ\Accordion("iconAccordion");
|
||||
$acr->width("550px")->create("onCreate")->beforeActivate("onBeforeActivate")->activate("onActivate")->beforeInactivate("onBeforeInActivate")->inActivate("onInActivate")->ajaxBeforeLoad("onBeforeLoad")->ajaxLoad("onLoad")->ajaxSuccess("onAjaxSuccess")->ajaxError("onError");
|
||||
|
||||
$acrItem = new EJ\Accordion\AccordionItem();
|
||||
$acrItem->text("Volkswagen")->headerIconClass("logos volkswagan")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem->templateEnd();
|
||||
$acr->AddItem($acrItem);
|
||||
$acrItem2 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem2->text("Mitsubishi")->headerIconClass("logos mitsubishi")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem2->templateEnd();
|
||||
$acr->AddItem($acrItem2);
|
||||
$acrItem3 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem3->text("Mercedes-Benz")->headerIconClass("logos benz")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem3->templateEnd();
|
||||
$acr->AddItem($acrItem3);
|
||||
$acrIcon = new EJ\Accordion\CustomIcon();
|
||||
$acrIcon->header("header-close")->selectedHeader("header-expand");
|
||||
echo $acr->width("550px")->customIcon($acrIcon)->render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width:600px;
|
||||
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;
|
||||
}
|
||||
|
||||
.e-select .logos {
|
||||
background-image: url(Content/images/accordion/grey_logos.png);
|
||||
}
|
||||
|
||||
.e-active .logos {
|
||||
background-image: url(Content/images/accordion/white_logos.png);
|
||||
}
|
||||
|
||||
.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,50 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
|
||||
<?php
|
||||
$acr = new EJ\Accordion("multiAccordion");
|
||||
$acr->width("550px");
|
||||
|
||||
$acrItem = new EJ\Accordion\AccordionItem();
|
||||
$acrItem->text("ASP.NET")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem->templateEnd();
|
||||
$acr->AddItem($acrItem);
|
||||
$acrItem2 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem2->text("ASP.NET MVC")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem2->templateEnd();
|
||||
$acr->AddItem($acrItem2);
|
||||
$acrItem3 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem3->text("Javascript")->templateStart();
|
||||
?>
|
||||
<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>
|
||||
<?php
|
||||
$acrItem3->templateEnd();
|
||||
$acr->AddItem($acrItem3);
|
||||
echo $acr->enableMultipleOpen(true)->render();
|
||||
?>
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width:600px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$acr = new EJ\Accordion("rtlAccordion");
|
||||
$acr->width("550px")->enableRTL(true);
|
||||
|
||||
$acrItem = new EJ\Accordion\AccordionItem();
|
||||
$acrItem->text("سكريبت")->templateStart();
|
||||
?>
|
||||
<div>
|
||||
جافا سكريبت (JS) هو تفسير الكمبيوتر لغة البرمجة.
|
||||
تم تنفيذ أصلا كجزء من متصفحات الويب بحيث البرامج النصية من جانب العميل يمكن أن تتفاعل مع المستخدم، والسيطرة على المتصفح،
|
||||
التواصل بشكل غير متزامن، وتغيير محتوى الوثيقة التي تم عرضها. [5] وفي الآونة الأخيرة، ومع ذلك،
|
||||
أصبح من الشائع في كل من تطوير اللعبة وإنشاء تطبيقات سطح المكتب.
|
||||
</div>
|
||||
<?php
|
||||
$acrItem->templateEnd();
|
||||
$acr->AddItem($acrItem);
|
||||
$acrItem2 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem2->text("C شارب (C #)")->templateStart();
|
||||
?>
|
||||
<div>
|
||||
يقصد به أن تكون بسيطة وعصرية، لأغراض عامة، لغة البرمجة وجوه المنحى C #.
|
||||
ويقود فريق تطويره بواسطة Anders Hejlsberg. أحدث إصدار هو C # 5.0، والذي صدر في 15 أغسطس 2012.
|
||||
</div>
|
||||
<?php
|
||||
$acrItem2->templateEnd();
|
||||
$acr->AddItem($acrItem2);
|
||||
$acrItem3 = new EJ\Accordion\AccordionItem();
|
||||
$acrItem3->text("البصرية الأساسية")->templateStart();
|
||||
?>
|
||||
<div>
|
||||
يتم تثبيت مترجم سطر الأوامر، VBC.EXE، كجزء من مجانية. NET الإطار SDK.
|
||||
ويشمل أيضا أحادية مترجم VB.NET سطر الأوامر. أحدث إصدار هو VB 2012، والذي صدر في 15 أغسطس 2012.
|
||||
</div>
|
||||
<?php
|
||||
$acrItem3->templateEnd();
|
||||
$acr->AddItem($acrItem3);
|
||||
echo $acr->render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area {
|
||||
width:600px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
$dataManager = new EJ\DataManager();
|
||||
$dataManager->url('//js.syncfusion.com/ejServices/wcf/NorthWind.svc/')->offline(false);
|
||||
|
||||
$query = new EJ\Query();
|
||||
$query->from('Suppliers');
|
||||
|
||||
$autocomplete=new EJ\AutoComplete("customerDetails");
|
||||
$field=new EJ\Autocomplete\Field();
|
||||
$field=array ("text"=>"ContactName","key"=>"SupplierID");
|
||||
echo $autocomplete->dataSource($dataManager)->query($query)->fields($field)->width("100%")->watermarkText("Search a customer")->enableAutoFill(true)->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
$countries = array('Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan', 'Belarus', 'Belgium',
|
||||
'Bosnia & Herzegovina', 'Bulgaria', 'Croatia', 'Cyprus', 'Czech Republic', 'Denmark', 'Estonia',
|
||||
'Finland', 'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland', 'Italy',
|
||||
'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Malta', 'Moldova',
|
||||
'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia',
|
||||
'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey',
|
||||
'Ukraine', 'United Kingdom', 'Vatican City');
|
||||
?>
|
||||
<?php
|
||||
$autocomplete=new EJ\AutoComplete("selectCar");
|
||||
echo $autocomplete->dataSource($countries)->width("100%")->watermarkText("Select a country")->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
$colors = array("AliceBlue", "AntiqueWhite", "Aqua",
|
||||
"Black", "Blue", "Brown",
|
||||
"Chocolate", "Cyan",
|
||||
"DarkBlue", "DarkGreen", "DarkRed",
|
||||
"ForestGreen", "Fuchsia", "Gold", "Gray",
|
||||
"Green", "HoneyDew", "Indigo", "Ivory",
|
||||
"Khaki", "Lavender", "LemonChiffon", "Lime",
|
||||
"Maroon", "Magenta", "Olive", "Orange", "OrangeRed",
|
||||
"Pink", "Purple", "PowderBlue", "Red",
|
||||
"RosyBrown", "RoyalBlue", "Silver", "SkyBlue",
|
||||
"SlateGray", "Tan", "Teal", "Turquoise",
|
||||
"Violet", "Wheat", "Yellow", "YellowGreen ");
|
||||
?>
|
||||
<?php
|
||||
$autocomplete=new EJ\AutoComplete("selectColor");
|
||||
echo $autocomplete->dataSource($colors)->width("100%")->watermarkText("Choose a color")
|
||||
->select("onSelect")->focusIn("onFocusIn")->focusOut("onFocusOut")->change("onChange")
|
||||
->open("onOpen")->close("onClose")->create("onCreate")->render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
<div id="Logger" class="box">
|
||||
<h4>Event Trace</h4>
|
||||
<div class="EventLog" id="EventLog"></div>
|
||||
<div>
|
||||
<?php
|
||||
$clearBtn = new \EJ\Button("clearBtn");
|
||||
echo $clearBtn->size("small")->text("Clear")->click("clearLog")->type("button")->render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
var autocompleteObj;
|
||||
$(function () {
|
||||
// declaration
|
||||
autocompleteObj = $("#selectColor").data("ejAutocomplete");
|
||||
});
|
||||
|
||||
// Client side Events
|
||||
function onCreate(args) {
|
||||
jQuery.addEventLog("Autocomplete has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function onFocusIn(args) {
|
||||
jQuery.addEventLog("Autocomplete is in <span class='eventTitle'>focus</span>. ");
|
||||
}
|
||||
function onFocusOut(args) {
|
||||
jQuery.addEventLog("Autocomplete is out of <span class='eventTitle'>focus</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 onOpen(args) {
|
||||
jQuery.addEventLog("Suggestion List has been <span class='eventTitle'>opened</span>.");
|
||||
}
|
||||
function onClose(args) {
|
||||
jQuery.addEventLog("Suggestion List has been <span class='eventTitle'>closed</span>.");
|
||||
}
|
||||
function clearLog() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
$countries = array( array ( "text"=> "Austria", "category"=> "A" ),
|
||||
array ( "text"=> "Australia", "category"=> "A" ), array ( "text"=> "Antarctica", "category"=> "A" ),
|
||||
array ( "text"=> "Bangladesh", "category"=> "B" ), array ( "text"=> "Belgium", "category"=> "B" ),
|
||||
array ( "text"=> "Brazil", "category"=> "B" ),
|
||||
array ( "text"=> "Canada", "category"=> "C" ), array ( "text"=> "China", "category"=> "C" ),
|
||||
array ( "text"=> "Cuba", "category"=> "C" ),
|
||||
array ( "text"=> "Denmark", "category"=> "D" ), array ( "text"=> "Dominica", "category"=> "D" ),
|
||||
array ( "text"=> "Europe", "category"=> "E" ), array ( "text"=> "Egypt", "category"=> "E" ),
|
||||
array ( "text"=> "England", "category"=> "E" ),
|
||||
array ( "text"=> "India", "category"=> "I" ), array ( "text"=> "Indonesia", "category"=> "I" ),
|
||||
array ( "text"=> "Ireland", "category"=> "I" ), array ( "text"=> "Italy", "category"=> "I" ),
|
||||
array ( "text"=> "France", "category"=> "F" ), array ( "text"=> "Finland", "category"=> "F" ),
|
||||
array ( "text"=> "Germany", "category"=> "G" ), array ( "text"=> "Greece", "category"=> "G" ),
|
||||
array ( "text"=> "Greenland", "category"=> "G" ), array ( "text"=> "Georgia", "category"=> "G" ),
|
||||
array ( "text"=> "Haiti", "category"=> "H" ), array ( "text"=> "Hong Kong", "category"=> "H" ),
|
||||
array ( "text"=> "Japan", "category"=> "J" ), array ( "text"=> "Jordan", "category"=> "J" ),
|
||||
array ( "text"=> "Jamaica", "category"=> "J" ), array ( "text"=> "Kenya", "category"=> "K" ),
|
||||
array ( "text"=> "Kuwait", "category"=> "K" ), array ( "text"=> "Korea", "category"=> "K" ),
|
||||
array ( "text"=> "Latvia", "category"=> "L" ), array ( "text"=> "Lebanon", "category"=> "L" ),
|
||||
array ( "text"=> "Leichenstein", "category"=> "L" ), array ( "text"=> "Malaysia", "category"=> "M" ),
|
||||
array ( "text"=> "Mexico", "category"=> "M" ), array ( "text"=> "Mozambique", "category"=> "M" ),
|
||||
array ( "text"=> "Madagascar", "category"=> "M" ), array ( "text"=> "Midway Islands", "category"=> "M" ),
|
||||
array ( "text"=> "Nepal", "category"=> "N" ), array ( "text"=> "Netherlands", "category"=> "N" ),
|
||||
array ( "text"=> "New Zealand", "category"=> "N" ), array ( "text"=> "Nigeria", "category"=> "N" ),
|
||||
array ( "text"=> "Oman", "category"=> "O" ), array ( "text"=> "Philippines", "category"=> "P" ),
|
||||
array ( "text"=> "Poland", "category"=> "P" ), array ( "text"=> "Portugal", "category"=> "P" ),
|
||||
array ( "text"=> "Qatar", "category"=> "Q" ), array ( "text"=> "Romania", "category"=> "R" ),
|
||||
array ( "text"=> "Russia", "category"=> "R" ), array ( "text"=> "Singapore", "category"=> "S" ),
|
||||
array ( "text"=> "Switzerland", "category"=> "S" ), array ( "text"=> "Sweden", "category"=> "S" ),
|
||||
array ( "text"=> "Scotland", "category"=> "S" ), array ( "text"=> "Tibet", "category"=> "T" ),
|
||||
array ( "text"=> "Turkey", "category"=> "T" ), array ( "text"=> "Ukraine", "category"=> "U" ),
|
||||
array ( "text"=> "United States", "category"=> "U" ), array ( "text"=> "Uruguay", "category"=> "U" ),
|
||||
array ( "text"=> "Vatican City", "category"=> "V" ), array ( "text"=> "Vietnam", "category"=> "V" ),
|
||||
array ( "text"=> "Western Sahara", "category"=> "W" ), array ( "text"=> "Wales", "category"=> "W" ),
|
||||
array ( "text"=> "Yemen", "category"=> "Y" ), array ( "text"=> "Yugoslavia", "category"=> "Y" ),
|
||||
array ( "text"=> "Zambia", "category"=> "Z" ), array ( "text"=> "Zimbabwe", "category"=> "Z" ));
|
||||
?>
|
||||
<?php
|
||||
$autocomplete=new EJ\AutoComplete("selectCountry");
|
||||
$field=new EJ\Autocomplete\Field();
|
||||
$field->text("text")->groupBy("category");
|
||||
echo $autocomplete->dataSource($countries)->fields($field)->filterType("contains")->highlightSearch(true)->width("100%")->watermarkText("Select a country")->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
|
||||
$Json = json_decode(file_get_contents("../Grid/Data.json"), true);
|
||||
|
||||
$autocomplete=new EJ\AutoComplete("customerDetails");
|
||||
$field=new EJ\Autocomplete\Field();
|
||||
$field->key("OrderID")->text("ShipCity");
|
||||
$multi=new EJ\Autocomplete\MultiColumnSetting();
|
||||
$cols=new EJ\Autocomplete\Column();
|
||||
$cols=array(array("field"=> "CustomerID","headerText"=> "CustomerID"),
|
||||
array("field"=> "OrderID","headerText"=> "OrderID"),array("field"=> "EmployeeID","headerText"=> "EmployeeID"),
|
||||
array("field"=> "ShipCountry","headerText"=> "ShipCountry"));
|
||||
$multi->columns($cols)->stringFormat("\{0\} (\{3\}) (\{1\})")->showHeader(true)->enable(true);
|
||||
|
||||
?>
|
||||
<?php
|
||||
$autocomplete=new EJ\AutoComplete("selectCar");
|
||||
echo $autocomplete->dataSource($Json)->showPopupButton(true)->multiColumnSettings($multi)->fields($field)->width("100%")->watermarkText("Select a order")->render();
|
||||
?>
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
$countries = array('Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan', 'Belarus', 'Belgium',
|
||||
'Bosnia & Herzegovina', 'Bulgaria', 'Croatia', 'Cyprus', 'Czech Republic', 'Denmark', 'Estonia',
|
||||
'Finland', 'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland', 'Italy',
|
||||
'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Malta', 'Moldova',
|
||||
'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia',
|
||||
'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey',
|
||||
'Ukraine', 'United Kingdom', 'Vatican City');
|
||||
?>
|
||||
<h4>Using Delimiter</h4>
|
||||
<?php
|
||||
$autocomplete=new EJ\AutoComplete("selectCar");
|
||||
echo $autocomplete->dataSource($countries)->width("100%")->multiSelectMode("delimiter")->render();
|
||||
?>
|
||||
<br />
|
||||
<h4>Using VisualMode</h4>
|
||||
<?php
|
||||
$visualac=new EJ\Autocomplete("visualmode");
|
||||
echo $visualac->dataSource($countries)->width("100%")->multiSelectMode("visualmode")->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('codabar')->text('01234567')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('code11')->text('01234567')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('code128a')->text('SYNCFUSION')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('code128b')->text('SYNCFUSION')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('code128c')->text('01234567')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('code32')->text('01234567')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('code39')->text('SYNCFUSION')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('code39extended')->text('SYNCFUSION')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('code93')->text('SYNCFUSION')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('code93extended')->text('SYNCFUSION')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('datamatrix')->text('SYNCFUSION')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('qrbarcode')->text('//www.syncfusion.com')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$barcode = new EJ\Barcode("Barcode");
|
||||
|
||||
echo $barcode->symbologyType('upcbarcode')->text('01234567890')->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div align="center">
|
||||
|
||||
<?php
|
||||
$bulletGraph =new EJ\BulletGraph("bulletgraph1");
|
||||
$quantitativescale=new EJ\BulletGraph\QuantitativeScaleSetting();
|
||||
$location =new EJ\BulletGraph\QuantitativeScaleSettingsLocation();
|
||||
$location->x(110)->y(10);
|
||||
$featuremeasuresettings=new EJ\BulletGraph\FeaturedMeasureSetting();
|
||||
$featuremeasuresettings->width(6);
|
||||
|
||||
$comparetivesettings=new EJ\BulletGraph\ComparativeMeasureSetting();
|
||||
$comparetivesettings->width(6);
|
||||
|
||||
$featuremeasure=array();
|
||||
$featuremeasure[0]=new EJ\BulletGraph\FeatureMeasure();
|
||||
$featuremeasure[0]->comparativeMeasureValue(6.7)->value(8);
|
||||
$quantitativescale->minimum(0)->maximum(10)->interval(1)->location($location)->featuredMeasureSettings($featuremeasuresettings)->comparativeMeasureSettings($comparetivesettings)->featureMeasures($featuremeasure);
|
||||
|
||||
$captionlocation=new EJ\BulletGraph\CaptionSettingsLocation();
|
||||
$captionlocation->x(17)->y(20);
|
||||
$subtitlelocation=new EJ\BulletGraph\SubTitleLocation();
|
||||
$subtitlelocation->x(10)->y(35);
|
||||
$captions=new EJ\BulletGraph\CaptionSetting();
|
||||
$subtitle=new EJ\BulletGraph\SubTitle();
|
||||
$subtitle->textAngle(0)->text("$ in Thousands")->location($subtitlelocation);
|
||||
$captions->textAngle(0)->text("Revenue YTD")->subTitle($subtitle)->location($captionlocation);
|
||||
|
||||
$qualitiverange=array();
|
||||
$qualitiverange[0]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange[0]->rangeEnd(4.3);
|
||||
$qualitiverange[1]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange[1]->rangeEnd(7.3);
|
||||
$qualitiverange[2]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange[2]->rangeEnd(10);
|
||||
|
||||
echo $bulletGraph->quantitativeScaleSettings($quantitativescale)->qualitativeRanges($qualitiverange)->captionSettings($captions)->render();
|
||||
|
||||
|
||||
// second bullet graph
|
||||
$bulletGraph2 =new EJ\BulletGraph("bulletgraph2");
|
||||
$quantitativescale2=new EJ\BulletGraph\QuantitativeScaleSetting();
|
||||
$location2 =new EJ\BulletGraph\QuantitativeScaleSettingsLocation();
|
||||
$location2->x(110)->y(10);
|
||||
$featuremeasuresettings2=new EJ\BulletGraph\FeaturedMeasureSetting();
|
||||
$featuremeasuresettings2->width(6);
|
||||
|
||||
$comparetivesettings2=new EJ\BulletGraph\ComparativeMeasureSetting();
|
||||
$comparetivesettings2->width(6);
|
||||
|
||||
$majortickssettings=new EJ\BulletGraph\MajorTickSetting();
|
||||
$majortickssettings->size(13)->width(1);
|
||||
$minortickssettings=new EJ\BulletGraph\MinorTickSetting();
|
||||
$minortickssettings->size(5)->width(1);
|
||||
|
||||
$featuremeasure2=array();
|
||||
$featuremeasure2[0]=new EJ\BulletGraph\FeatureMeasure();
|
||||
$featuremeasure2[0]->comparativeMeasureValue(6.7)->value(8);
|
||||
$quantitativescale2->minimum(-10)->maximum(10)->interval(2)->tickPosition("far")->minorTicksPerInterval(4)->minorTickSettings($minortickssettings)->majorTickSettings($majortickssettings)->location($location2)->featuredMeasureSettings($featuremeasuresettings2)->comparativeMeasureSettings($comparetivesettings2)->featureMeasures($featuremeasure2);
|
||||
|
||||
$captionlocation2=new EJ\BulletGraph\CaptionSettingsLocation();
|
||||
$captionlocation2->x(60)->y(25);
|
||||
$captions2=new EJ\BulletGraph\CaptionSetting();
|
||||
$captions2->textAngle(0)->text("Profit")->location($captionlocation2);
|
||||
|
||||
$labelsettings=new EJ\BulletGraph\LabelSetting();
|
||||
$labelsettings->position("below")->offset(14)->labelSuffix("%");
|
||||
$quantitativescale2->labelSettings($labelsettings);
|
||||
|
||||
$qualitiverange2=array();
|
||||
$qualitiverange2[0]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange2[0]->rangeEnd(-4)->rangeStroke("#61a301");
|
||||
$qualitiverange2[1]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange2[1]->rangeEnd(3)->rangeStroke("#fcda21");
|
||||
$qualitiverange2[2]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange2[2]->rangeEnd(10)->rangeStroke("#d61e3f");
|
||||
|
||||
echo $bulletGraph2->quantitativeScaleSettings($quantitativescale2)->qualitativeRanges($qualitiverange2)->captionSettings($captions2)->render();
|
||||
|
||||
// third bullet graph
|
||||
$bulletGraph3 =new EJ\BulletGraph("bulletgraph3");
|
||||
$quantitativescale3=new EJ\BulletGraph\QuantitativeScaleSetting();
|
||||
$location3 =new EJ\BulletGraph\QuantitativeScaleSettingsLocation();
|
||||
$location3->x(110)->y(10);
|
||||
$featuremeasuresettings3=new EJ\BulletGraph\FeaturedMeasureSetting();
|
||||
$featuremeasuresettings3->width(6);
|
||||
|
||||
$comparetivesettings3=new EJ\BulletGraph\ComparativeMeasureSetting();
|
||||
$comparetivesettings3->width(6);
|
||||
|
||||
$majortickssettings3=new EJ\BulletGraph\MajorTickSetting();
|
||||
$majortickssettings3->size(13)->width(1)->stroke("gray");
|
||||
$minortickssettings3=new EJ\BulletGraph\MinorTickSetting();
|
||||
$minortickssettings3->size(5)->width(1)->stroke("gray");
|
||||
|
||||
$featuremeasure3=array();
|
||||
$featuremeasure3[0]=new EJ\BulletGraph\FeatureMeasure();
|
||||
$featuremeasure3[0]->comparativeMeasureValue(-2)->value(-2);
|
||||
$quantitativescale3->minimum(-10)->maximum(10)->interval(2)->majorTickSettings($majortickssettings3)->minorTickSettings($minortickssettings3)->tickPosition("far")->minorTicksPerInterval(4)->location($location3)->featuredMeasureSettings($featuremeasuresettings3)->comparativeMeasureSettings($comparetivesettings3)->featureMeasures($featuremeasure3);
|
||||
|
||||
$captionlocation3=new EJ\BulletGraph\CaptionSettingsLocation();
|
||||
$captionlocation3->x(38)->y(25);
|
||||
$captions3=new EJ\BulletGraph\CaptionSetting();
|
||||
$captions3->textAngle(0)->text("Expenses");
|
||||
|
||||
$labelsettings3=new EJ\BulletGraph\LabelSetting();
|
||||
$labelsettings3->position("below")->offset(14)->size(10)->labelPrefix("$ ")->labelSuffix("%");
|
||||
$quantitativescale3->labelSettings($labelsettings3);
|
||||
|
||||
$qualitiverange3=array();
|
||||
$qualitiverange3[0]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange3[0]->rangeEnd(-4.3);
|
||||
$qualitiverange3[1]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange3[1]->rangeEnd(4.3);
|
||||
$qualitiverange3[2]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange3[2]->rangeEnd(10);
|
||||
|
||||
echo $bulletGraph3->quantitativeScaleSettings($quantitativescale3)->qualitativeRanges($qualitiverange3)->captionSettings($captions3)->render();
|
||||
|
||||
//fourth bullet graph
|
||||
|
||||
$bulletGraph4 =new EJ\BulletGraph("bulletgraph4");
|
||||
$quantitativescale4=new EJ\BulletGraph\QuantitativeScaleSetting();
|
||||
$location4 =new EJ\BulletGraph\QuantitativeScaleSettingsLocation();
|
||||
$location4->x(105)->y(10);
|
||||
$featuremeasuresettings4=new EJ\BulletGraph\FeaturedMeasureSetting();
|
||||
$featuremeasuresettings4->width(6);
|
||||
|
||||
$comparetivesettings4=new EJ\BulletGraph\ComparativeMeasureSetting();
|
||||
$comparetivesettings4->width(6);
|
||||
|
||||
$majortickssettings4=new EJ\BulletGraph\MajorTickSetting();
|
||||
$majortickssettings4->size(13)->width(1);
|
||||
$minortickssettings4=new EJ\BulletGraph\MinorTickSetting();
|
||||
$minortickssettings4->size(5)->width(1);
|
||||
|
||||
$featuremeasure4=array();
|
||||
$featuremeasure4[0]=new EJ\BulletGraph\FeatureMeasure();
|
||||
$featuremeasure4[0]->comparativeMeasureValue(6.7)->value(8);
|
||||
$quantitativescale4->minimum(0)->maximum(10)->interval(1)->minorTicksPerInterval(4)->minorTickSettings($minortickssettings4)->majorTickSettings($majortickssettings4)->location($location4)->featuredMeasureSettings($featuremeasuresettings4)->comparativeMeasureSettings($comparetivesettings4)->featureMeasures($featuremeasure4);
|
||||
|
||||
$captionlocation4=new EJ\BulletGraph\CaptionSettingsLocation();
|
||||
$captionlocation4->x(17)->y(20);
|
||||
$subtitlelocation4=new EJ\BulletGraph\SubTitleLocation();
|
||||
$subtitlelocation4->x(10)->y(35);
|
||||
$captions4=new EJ\BulletGraph\CaptionSetting();
|
||||
$subtitle4=new EJ\BulletGraph\SubTitle();
|
||||
$subtitle4->textAngle(0)->text("$ in Thousands")->location($subtitlelocation4);
|
||||
$captions4->textAngle(0)->text("Revenue YTD")->subTitle($subtitle4)->location($captionlocation4);
|
||||
|
||||
$labelsettings4=new EJ\BulletGraph\LabelSetting();
|
||||
$labelsettings4->position("below")->offset(14)->size(10)->labelPrefix("$ ")->labelSuffix("%");
|
||||
$quantitativescale4->labelSettings($labelsettings4);
|
||||
|
||||
$qualitiverange4=array();
|
||||
$qualitiverange4[0]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange4[0]->rangeEnd(4.3)->rangeStroke("#61a301");
|
||||
$qualitiverange4[1]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange4[1]->rangeEnd(7.3)->rangeStroke("#fcda21");
|
||||
$qualitiverange4[2]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange4[2]->rangeEnd(10)->rangeStroke("#d61e3f");
|
||||
|
||||
echo $bulletGraph4->quantitativeScaleSettings($quantitativescale4)->qualitativeRanges($qualitiverange4)->captionSettings($captions4)->render();
|
||||
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div align="center">
|
||||
|
||||
<?php
|
||||
|
||||
$bulletGraph =new EJ\BulletGraph("bulletgraph1");
|
||||
$quantitativescale=new EJ\BulletGraph\QuantitativeScaleSetting();
|
||||
$location =new EJ\BulletGraph\QuantitativeScaleSettingsLocation();
|
||||
$location->x(110)->y(25);
|
||||
$featuremeasuresettings=new EJ\BulletGraph\FeaturedMeasureSetting();
|
||||
$featuremeasuresettings->width(6);
|
||||
|
||||
$comparetivesettings=new EJ\BulletGraph\ComparativeMeasureSetting();
|
||||
$comparetivesettings->width(6);
|
||||
|
||||
$featuremeasure=array();
|
||||
$featuremeasure[0]=new EJ\BulletGraph\FeatureMeasure();
|
||||
$featuremeasure[0]->comparativeMeasureValue(7.5)->value(9.5)->category("2001");
|
||||
$featuremeasure[1]=new EJ\BulletGraph\FeatureMeasure();
|
||||
$featuremeasure[1]->comparativeMeasureValue(5)->value(9.5)->category("2002");
|
||||
$featuremeasure[2]=new EJ\BulletGraph\FeatureMeasure();
|
||||
$featuremeasure[2]->comparativeMeasureValue(6)->value(9.5)->category("2003");
|
||||
$featuremeasure[3]=new EJ\BulletGraph\FeatureMeasure();
|
||||
$featuremeasure[3]->comparativeMeasureValue(8)->value(9.5)->category("2004");
|
||||
$featuremeasure[4]=new EJ\BulletGraph\FeatureMeasure();
|
||||
$featuremeasure[4]->comparativeMeasureValue(5)->value(9.5)->category("2005");
|
||||
$featuremeasure[5]=new EJ\BulletGraph\FeatureMeasure();
|
||||
$featuremeasure[5]->comparativeMeasureValue(6)->value(9.5)->category("2006");
|
||||
$quantitativescale->minimum(0)->maximum(10)->interval(1)->location($location)->featuredMeasureSettings($featuremeasuresettings)->comparativeMeasureSettings($comparetivesettings)->featureMeasures($featuremeasure);
|
||||
|
||||
$captionlocation=new EJ\BulletGraph\CaptionSettingsLocation();
|
||||
$captionlocation->x(40)->y(210);
|
||||
$subtitlelocation=new EJ\BulletGraph\SubTitleLocation();
|
||||
$subtitlelocation->x(55)->y(210);
|
||||
$captions=new EJ\BulletGraph\CaptionSetting();
|
||||
$subtitle=new EJ\BulletGraph\SubTitle();
|
||||
$subtitle->textAngle(-90)->text("$ in Thousands")->location($subtitlelocation);
|
||||
$captions->textAngle(-90)->text("Revenue YTD")->subTitle($subtitle)->location($captionlocation);
|
||||
|
||||
$qualitiverange=array();
|
||||
$qualitiverange[0]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange[0]->rangeEnd(4.3);
|
||||
$qualitiverange[1]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange[1]->rangeEnd(7.3);
|
||||
$qualitiverange[2]=new EJ\BulletGraph\QualitativeRange();
|
||||
$qualitiverange[2]->rangeEnd(10);
|
||||
|
||||
echo $bulletGraph->height(400)->qualitativeRangeSize(320)->quantitativeScaleSettings($quantitativescale)->qualitativeRanges($qualitiverange)->captionSettings($captions)->render();
|
||||
|
||||
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<body>
|
||||
<div class="cols-sample-area">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btn_label">Normal</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$button = new EJ\Button("normal");
|
||||
echo $button ->contentType("imageOnly")->enableRTL(true)->size("normal")->prefixIcon("e-icon e-uiLight e-handup")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Mini</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$button = new EJ\Button("mini");
|
||||
echo $button ->text("Play")->size("mini")->contentType("textandimage")->prefixIcon("e-icon e-mediaplay e-uiLight")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Small</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$button = new EJ\Button("small");
|
||||
echo $button ->text("login")->size("small")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Medium</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$button = new EJ\Button("medium");
|
||||
echo $button ->text("login")->size("medium")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Large</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$button = new EJ\Button("large");
|
||||
echo $button ->text("login")->size("large")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<style>
|
||||
table {
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
td.btn_label {
|
||||
padding: 0 19px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<body>
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<br />
|
||||
Hobbies
|
||||
<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<?php
|
||||
$check1=new EJ\CheckBox("check1");
|
||||
echo $check1->render();
|
||||
?>
|
||||
<label for="check1" class="clslab">Games</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<?php
|
||||
$check1=new EJ\CheckBox("Checkbox3");
|
||||
echo $check1->render();
|
||||
?>
|
||||
<label for="Checkbox3" class="clslab">Sports</label>
|
||||
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<?php
|
||||
$check1=new EJ\CheckBox("Checkbox4");
|
||||
echo $check1->render();
|
||||
?>
|
||||
<label for="Checkbox4" class="clslab">Bike Riding</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Favorite Search Engines
|
||||
<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<?php
|
||||
$check1=new EJ\CheckBox("Checkbox1");
|
||||
echo $check1->size("medium")->render();
|
||||
?>
|
||||
<label for="Checkbox1" class="clslab">Google</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<?php
|
||||
$check1=new EJ\CheckBox("Checkbox5");
|
||||
echo $check1->size("medium")->render();
|
||||
?>
|
||||
<label for="Checkbox5" class="clslab">Yahoo</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<?php
|
||||
$check1=new EJ\CheckBox("Checkbox6");
|
||||
echo $check1->size("medium")->render();
|
||||
?>
|
||||
<label for="Checkbox6" class="clslab">Bing</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Favorite Social networks
|
||||
<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
|
||||
<?php
|
||||
$check1=new EJ\CheckBox("Checkbox2");
|
||||
echo $check1->size("medium")->enableTriState(true)->render();
|
||||
?>
|
||||
<label for="Checkbox2" class="clslab">Facebook</label>
|
||||
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
|
||||
<?php
|
||||
$check1=new EJ\CheckBox("Checkbox7");
|
||||
echo $check1->size("medium")->enableTriState(true)->render();
|
||||
?>
|
||||
<label for="Checkbox7" class="clslab">GPlus</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
|
||||
<?php
|
||||
$check1=new EJ\CheckBox("Checkbox8");
|
||||
echo $check1->size("medium")->enableTriState(true)->render();
|
||||
?>
|
||||
<label for="Checkbox8" class="clslab">Twitter</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
table {
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
td.btn_label {
|
||||
padding: 0 19px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btn_label">Button</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$button = new EJ\Button("Button");
|
||||
echo $button ->text("click")->enableRTL(true)->size("large")->create("btnLoad")->click("btnClick")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Toggle Button</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$button = new EJ\ToggleButton("ToggleBtn");
|
||||
echo $button->size("large")->showRoundedCorner(true)->defaultText("Save")->activeText("Delete")
|
||||
->create("tglebtnLoad")->click("tglebtnClick")->change("tglebtnChange")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Split Button</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$splitbtn = new EJ\SplitButton("SplitBtn");
|
||||
$item1 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item1->id("1")->text("Open");
|
||||
$item2 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item2->id("2")->text("Save");
|
||||
$item3 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item3->id("3")->text("Delete");
|
||||
$splitbtn->addItem($item1,$item2,$item3);
|
||||
$item11 = new EJ\SplitButton\SplitButtonItem();
|
||||
echo $splitbtn->text("Save")->size("large")->showRoundedCorner(true)->create("spltbtnLoad")
|
||||
->beforeOpen("onFocusIn")->open("spltbtnOpened")->click("spltbtnClick")->itemMouseOver("spltbtnitmHover")->itemMouseOut("spltbtnitmOut")
|
||||
->itemSelected("spltbtnitmSelected")->close("spltbtnClosed")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Group Button</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$grpbtn = new \EJ\GroupButton("groupBtn");
|
||||
$item1 = new \EJ\GroupButton\GroupButtonItem();
|
||||
$item1->id("1")->text("Save");
|
||||
$item2 = new \EJ\GroupButton\GroupButtonItem();
|
||||
$item2->id("2")->text("Open");
|
||||
$item3 = new \EJ\GroupButton\GroupButtonItem();
|
||||
$item3->id("3")->text("Delete");
|
||||
$grpbtn->addItem($item1, $item2, $item3);
|
||||
echo $grpbtn->groupButtonMode("radiobutton")->showRoundedCorner(true)->width("100%")
|
||||
->select("grpbtnSelect")->create("grpbtnLoad")->beforeSelect("grpbtnBeforeSelect")->keyPress("grpbtnKeyPress")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="Logger" class="box">
|
||||
<h4>Event Trace</h4>
|
||||
<div class="EventLog" id="EventLog"></div>
|
||||
<div>
|
||||
<?php
|
||||
$clearBtn = new \EJ\Button("clearBtn");
|
||||
echo $clearBtn->size("small")->text("Clear")->click("clearLog")->type("button")->render();
|
||||
?>
|
||||
</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>
|
||||
table {
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
td.btn_label {
|
||||
padding: 0 19px;
|
||||
}
|
||||
|
||||
.e-colorwidget.e-widget {
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<body>
|
||||
<div class="cols-sample-area">
|
||||
<label class="btn_label">Appointment View</label>
|
||||
<div class="element">
|
||||
<?php
|
||||
$data='[{ "text": "Day", "contentType": "textonly" },
|
||||
{ "text": "Week","contentType": "textonly" },
|
||||
{ "text": "Month", "contentType": "textonly", "selected": "selected" },
|
||||
{ "text": "Year", "contentType": "textonly" }]';
|
||||
$data=json_decode($data,true);
|
||||
$groupBtn=new EJ\GroupButton("groupBtn");
|
||||
echo $groupBtn->groupButtonMode("radiobutton")->dataSource($data)->showRoundedCorner(true)->width("100%")->render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<style>
|
||||
table {
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
.btn_label {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<body>
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="radioalign">
|
||||
<br />
|
||||
Category
|
||||
<br />
|
||||
<br />
|
||||
<div class='chkrad'>
|
||||
<?php
|
||||
$radio=new EJ\RadioButton('fresher');
|
||||
echo $radio->name('category')->checked(true)->render()
|
||||
?>
|
||||
<label for='fresher' class='clslab'>Fresher</label>
|
||||
</div>
|
||||
<div class='chkrad'>
|
||||
<?php
|
||||
$radio=new EJ\RadioButton('experienced');
|
||||
echo $radio->name('category')->render()
|
||||
?>
|
||||
<label for='experienced' class='clslab'>Experienced</label>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<span class='btn_label'>Experienced</span>
|
||||
<br />
|
||||
<br />
|
||||
<div class='chkrad'>
|
||||
<?php
|
||||
$radio=new EJ\RadioButton('Radio2');
|
||||
echo $radio->name('experience')->checked(true)->render();
|
||||
?>
|
||||
<label for='Radio2' class='clslab'>1+ years</label>
|
||||
</div>
|
||||
<div class='chkrad'>
|
||||
<?php
|
||||
$radio=new EJ\RadioButton('Radio4');
|
||||
echo $radio->size('medium')->name('experience')->render()
|
||||
?>
|
||||
<label for='Radio4' class='clslab'>2.5+years</label>
|
||||
</div>
|
||||
<div class='chkrad'>
|
||||
<?php
|
||||
$radio=new EJ\RadioButton('Radio5');
|
||||
echo $radio->size('medium')->name('experience')->render()
|
||||
?>
|
||||
<label for='Radio5' class='clslab'>5+years</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.frame {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chkrad {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<body>
|
||||
<div class="cols-sample-area">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="padding-left:80px">
|
||||
Repeat Button
|
||||
<br />
|
||||
<?php
|
||||
$repeatBtn=new EJ\Button("repeatBtn");
|
||||
echo $repeatBtn->size("large")->showRoundedCorner(true)->repeatButton(true)->text("click")->render();
|
||||
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<style>
|
||||
table {
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
td.btn_label {
|
||||
padding: 0 19px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<body>
|
||||
<div class="cols-sample-area">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btn_label">Normal</td>
|
||||
<td class="btnsht">
|
||||
<div class="spltspan">
|
||||
<?php
|
||||
$splitbtn = new EJ\SplitButton("SplitBtnNormal");
|
||||
$item1 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item1->id("1")->text("User");
|
||||
$item2 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item2->id("2")->text("Guest");
|
||||
$item3 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item3->id("3")->text("Admin");
|
||||
$splitbtn->addItem($item1,$item2,$item3);
|
||||
$item11 = new EJ\SplitButton\SplitButtonItem();
|
||||
echo $splitbtn->text("Login")->size("normal")->showRoundedCorner(true)->contentType("imageonly")
|
||||
->prefixIcon("e-icon e-login")->render();
|
||||
?>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Mini</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$splitbtn = new EJ\SplitButton("SplitBtnMini");
|
||||
$item1 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item1->id("1")->text("User");
|
||||
$item2 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item2->id("2")->text("Guest");
|
||||
$item3 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item3->id("3")->text("Admin");
|
||||
$splitbtn->addItem($item1,$item2,$item3);
|
||||
$item11 = new EJ\SplitButton\SplitButtonItem();
|
||||
echo $splitbtn->text("Login")->size("mini")->showRoundedCorner(true)->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Small</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$splitbtn = new EJ\SplitButton("SplitBtnSmall");
|
||||
$item1 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item1->id("1")->text("User");
|
||||
$item2 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item2->id("2")->text("Guest");
|
||||
$item3 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item3->id("3")->text("Admin");
|
||||
$splitbtn->addItem($item1,$item2,$item3);
|
||||
$item11 = new EJ\SplitButton\SplitButtonItem();
|
||||
echo $splitbtn->text("Login")->size("small")->showRoundedCorner(true)->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Medium</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$splitbtn = new EJ\SplitButton("SplitBtnMedium");
|
||||
$item1 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item1->id("1")->text("User");
|
||||
$item2 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item2->id("2")->text("Guest");
|
||||
$item3 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item3->id("3")->text("Admin");
|
||||
$splitbtn->addItem($item1,$item2,$item3);
|
||||
$item11 = new EJ\SplitButton\SplitButtonItem();
|
||||
echo $splitbtn->text("Login")->size("medium")->showRoundedCorner(true)->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Large</td>
|
||||
<td class="btnsht">
|
||||
<?php
|
||||
$splitbtn = new EJ\SplitButton("SplitBtnLarge");
|
||||
$item1 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item1->id("1")->text("User");
|
||||
$item2 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item2->id("2")->text("Guest");
|
||||
$item3 = new EJ\SplitButton\SplitButtonItem();
|
||||
$item3->id("3")->text("Admin");
|
||||
$splitbtn->addItem($item1,$item2,$item3);
|
||||
$item11 = new EJ\SplitButton\SplitButtonItem();
|
||||
echo $splitbtn->text("Login")->size("large")->showRoundedCorner(true)->contentType("textandimage")
|
||||
->prefixIcon("e-icon e-login")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<style>
|
||||
table {
|
||||
width: 350px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
td.btn_label {
|
||||
padding: 0 19px;
|
||||
}
|
||||
|
||||
.spltspan {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<body>
|
||||
<div class="cols-sample-area">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btn_label">Normal</td>
|
||||
<td class="btnsht">
|
||||
<label for="check11">Toggle</label>
|
||||
<?php
|
||||
$button = new EJ\ToggleButton("check11");
|
||||
echo $button ->showRoundedCorner(true)->size("normal")->contentType("imageonly")->defaultPrefixIcon("e-icon e-mediaplay")->activePrefixIcon("e-icon e-mediapause e-uiLight")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Mini</td>
|
||||
<td class="btnsht">
|
||||
<label for="check12">Toggle</label>
|
||||
<?php
|
||||
$button = new EJ\ToggleButton("check12");
|
||||
echo $button ->showRoundedCorner(true)->defaultText("Play")->activeText("Pause")->size("mini")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Small</td>
|
||||
<td class="btnsht">
|
||||
<label for="check13">Toggle</label>
|
||||
<?php
|
||||
$button = new EJ\ToggleButton("check13");
|
||||
echo $button ->showRoundedCorner(true)->defaultText("Play")->activeText("Pause")->size("small")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btn_label">Medium</td>
|
||||
<td class="btnsht">
|
||||
<label for="check14">Toggle</label>
|
||||
<?php
|
||||
$button = new EJ\ToggleButton("check14");
|
||||
echo $button ->showRoundedCorner(true)->defaultText("Play")->activeText("Pause")->size("medium")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="btn_label">Large</td>
|
||||
<td class="btnsht">
|
||||
<label for="check15">Toggle</label>
|
||||
<?php
|
||||
$button = new EJ\ToggleButton("check15");
|
||||
echo $button ->showRoundedCorner(true)->defaultText("Play")->activeText("Pause")->size("large")
|
||||
->contentType("textandimage")->defaultPrefixIcon("e-icon e-mediaplay")->activePrefixIcon("e-icon e-mediapause")->render();
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<style>
|
||||
table {
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
td.btn_label {
|
||||
padding: 0 19px;
|
||||
}
|
||||
|
||||
.e-bghover .e-tglebuttondiv .e-icon.e-uiLight, .e-bgselected .e-tglebuttondiv .e-icon.e-uiLight {
|
||||
background-image: url('../Content/ejthemes/common-images/icons-white.png');
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<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>
|
||||
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
$xAxis = new EJ\Chart\PrimaryXAxis();
|
||||
$xTitle = new EJ\Chart\Title();
|
||||
$grid = new EJ\Chart\MajorGridLine();
|
||||
$grid->visible(true)->opacity(0.12)->color("#a9a9a9");
|
||||
$xTitle->text("Minerals");
|
||||
$xAxis->valueType("category")->labelFormat('MMM')->majorGridLines($grid);
|
||||
|
||||
|
||||
$yAxis = new EJ\Chart\PrimaryYAxis();
|
||||
$yAxis->majorGridLines($grid);
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$chartLegend->position("top");
|
||||
|
||||
$common = new EJ\Chart\CommonSeriesOption();
|
||||
$tooltip = new EJ\Chart\Tooltip();
|
||||
$tooltip->visible(true)->format("#series.name#<br/>#point.x# : #point.y#mg");
|
||||
|
||||
$common->type("column")->enableAnimation(true)->tooltip($tooltip);
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
|
||||
$chartTitle->text("Fruit Nutrients");
|
||||
|
||||
$Json = '[
|
||||
{ "xName": "Calcium", "yName": 11, "yName1": 6 },
|
||||
{ "xName": "Iron", "yName": 20, "yName1": 26 },
|
||||
{ "xName": "Sodium", "yName": 8, "yName1": 7 }
|
||||
]';
|
||||
|
||||
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
$series2 = new EJ\Chart\Series();
|
||||
|
||||
$series1->dataSource($Json)->xName("xName")->yName("yName")->name("Apple");
|
||||
$series2->dataSource($Json)->xName("xName")->yName("yName1")->name("Banana");
|
||||
|
||||
$seriesCollection = array($series1, $series2);
|
||||
|
||||
|
||||
echo $chart->primaryXAxis($xAxis)
|
||||
->primaryYAxis($yAxis)
|
||||
->commonSeriesOptions($common)
|
||||
->isResponsive(true)
|
||||
->load("onchartload")
|
||||
->title($chartTitle)
|
||||
->series($seriesCollection)
|
||||
->legend($chartLegend)
|
||||
->enable3D(true)
|
||||
->enableRotation(true)
|
||||
->depth(100)
|
||||
->wallSize(2)
|
||||
->tilt(0)
|
||||
->rotation(34)
|
||||
->perspectiveAngle(90)
|
||||
->sideBySideSeriesPlacement(true)
|
||||
->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<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>
|
||||
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
|
||||
|
||||
|
||||
$common = new EJ\Chart\CommonSeriesOption();
|
||||
$tooltip = new EJ\Chart\Tooltip();
|
||||
$marker = new EJ\Chart\Marker();
|
||||
$datalabel=new EJ\Chart\DataLabel();
|
||||
$connector = new EJ\Chart\ConnectorLine();
|
||||
$connector->height(70)->color('black');
|
||||
$datalabel->shape('none')->visible(true)->connectorLine($connector)->textMappingName("x")->textPosition('top');
|
||||
$tooltip->visible(true)->format("#point.x# : #point.y#%");
|
||||
$marker->datalabel($datalabel);
|
||||
|
||||
$common->labelPosition("outside")->type("pie")->explode(false)->explodeIndex(0)->tooltip($tooltip);
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$chartLegend->visible(false);
|
||||
|
||||
$chartTitle->text("Expenditure shares on a child");
|
||||
|
||||
$Json = '[
|
||||
{ "x": "Housing", "y": 31 },
|
||||
{ "x": "Food", "y": 16 },
|
||||
{ "x": "Transportation", "y": 14 },
|
||||
{ "x": "Clothing", "y": 6 },
|
||||
{ "x": "Health care", "y": 8 },
|
||||
{ "x": "Education", "y": 17 },
|
||||
{ "x": "Miscellaneous", "y": 8 }
|
||||
]';
|
||||
|
||||
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
|
||||
$series1->dataSource($Json)->xName("x")->yName("y");
|
||||
|
||||
$seriesCollection = array($series1);
|
||||
|
||||
$legend = new EJ\Chart\Legend();
|
||||
$legend->visible(false);
|
||||
echo $chart
|
||||
->commonSeriesOptions($common)
|
||||
->isResponsive(true)
|
||||
->load("onchartload")
|
||||
->title($chartTitle)
|
||||
->series($seriesCollection)
|
||||
->size($chartSize)
|
||||
->depth(30)
|
||||
->enable3D(true)
|
||||
->enableRotation(true)
|
||||
->rotation(-30)
|
||||
->wallSize(2)
|
||||
->legend($legend)
|
||||
->tilt(-30)
|
||||
->rotation(-30)
|
||||
->perspectiveAngle(90)
|
||||
->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
|
||||
<script>
|
||||
|
||||
function OndataLabel(sender) {
|
||||
sender.data.location.x = sender.data.location.x + 20;
|
||||
}
|
||||
|
||||
|
||||
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>
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
$xAxis = new EJ\Chart\PrimaryXAxis();
|
||||
$xRange = new EJ\Chart\Range();
|
||||
$xRange->min(2005)->max(2012)->interval(1);
|
||||
$xTitle = new EJ\Chart\Title();
|
||||
$xTitle->text("Year");
|
||||
$xAxis->range($xRange);
|
||||
|
||||
|
||||
$yAxis = new EJ\Chart\PrimaryYAxis();
|
||||
$yRange = new EJ\Chart\Range();
|
||||
$yTitle = new EJ\Chart\Title();
|
||||
$yTitle->text("Percentage");
|
||||
$yRange->min(3)->max(12)->interval(1);
|
||||
$yAxis->labelFormat("{value}%")->range($yRange);
|
||||
|
||||
|
||||
$common = new EJ\Chart\CommonSeriesOption();
|
||||
$tooltip = new EJ\Chart\Tooltip();
|
||||
$marker = new EJ\Chart\Marker();
|
||||
$size = new EJ\Chart\Size();
|
||||
$border = new EJ\Chart\Border();
|
||||
$datalabel = new EJ\Chart\DataLabel();
|
||||
$font = new EJ\Chart\Font();
|
||||
$font->size("13px")->fontFamily("Segoe UI")->fontStyle("Normal")->fontWeight("regular");
|
||||
$datalabel->font($font)->textPosition("top")->horizontalTextAlignment("near")->visible(true);
|
||||
|
||||
$border->width(2);
|
||||
$tooltip->visible(true)->format("#series.name# <br/> #point.x# : #point.y#");
|
||||
$marker->dataLabel($datalabel);
|
||||
|
||||
$common->type("bar")->enableAnimation(true)->tooltip($tooltip)->border($border);
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$chartLegend->visible(false)->position('right')->alignment('near');
|
||||
|
||||
$chartTitle->text("Unemployment rate (%)");
|
||||
|
||||
$Json = '[
|
||||
{ "xName": 2006, "yName": 7.8, "yName1": 4.8 },
|
||||
{ "xName": 2007, "yName": 7.2, "yName1": 4.6 },
|
||||
{ "xName": 2008, "yName": 6.8, "yName1": 7.2 },
|
||||
{ "xName": 2009, "yName": 10.7, "yName1": 9.3 },
|
||||
{ "xName": 2010, "yName": 10.8, "yName1": 9.7 },
|
||||
{ "xName": 2011, "yName": 9.8, "yName1": 9 }
|
||||
]';
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
$series2 = new EJ\Chart\Series();
|
||||
|
||||
$series1->dataSource($Json)->xName("xName")->yName("yName")->name("India");
|
||||
$series2->dataSource($Json)->xName("xName")->yName("yName1")->name("US");
|
||||
|
||||
$seriesCollection = array($series1, $series2);
|
||||
|
||||
|
||||
echo $chart->primaryXAxis($xAxis)
|
||||
->primaryYAxis($yAxis)
|
||||
->commonSeriesOptions($common)
|
||||
->isResponsive(true)
|
||||
->load("onchartload")
|
||||
->title($chartTitle)
|
||||
->series($seriesCollection)
|
||||
->size($chartSize)
|
||||
->displayTextRendering("OndataLabel")
|
||||
->legend($chartLegend)
|
||||
->render();
|
||||
?>
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<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>
|
||||
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
$xAxis = new EJ\Chart\PrimaryXAxis();
|
||||
$xRange = new EJ\Chart\Range();
|
||||
$xRange->min(60)->max(100)->interval(5);
|
||||
$xTitle = new EJ\Chart\Title();
|
||||
$xTitle->text("Literacy Rate");
|
||||
$xAxis->range($xRange);
|
||||
|
||||
|
||||
$yAxis = new EJ\Chart\PrimaryYAxis();
|
||||
$yRange = new EJ\Chart\Range();
|
||||
$yTitle = new EJ\Chart\Title();
|
||||
$yTitle->text("GDP Growth Rate");
|
||||
$yRange->min(-2)->max(16)->interval(2);
|
||||
$yAxis->range($yRange);
|
||||
|
||||
|
||||
$common = new EJ\Chart\CommonSeriesOption();
|
||||
$tooltip = new EJ\Chart\Tooltip();
|
||||
|
||||
$tooltip->visible(true)->format("#point.text#<br/>Literacy Rate : #point.x#%<br/>GDP Annual Growth Rate : #point.y#<br/>Population : #point.size# Billion");
|
||||
$datalabel = new EJ\Chart\DataLabel();
|
||||
$datalabel->textMappingName("text");
|
||||
$marker = new EJ\Chart\Marker();
|
||||
$marker->dataLabel($datalabel);
|
||||
|
||||
$common->opacity(0.7)->type("bubble")->enableAnimation(true)->tooltip($tooltip);
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$chartLegend->visible(false);
|
||||
|
||||
$chartTitle->text("World Countries Details");
|
||||
|
||||
|
||||
$Json = '[
|
||||
{ "x": 92.2, "y": 7.8, "size": 1.347, "fill": "#E94649", "text":"China" },
|
||||
{ "x": 74, "y": 6.5, "size": 1.241, "fill": "#F6B53F", "text":"India" },
|
||||
{ "x": 90.4, "y": 6.0, "size": 0.238, "fill": "#6FAAB0", "text":"Indonesia" },
|
||||
{ "x": 99.4, "y": 2.2, "size": 0.312, "fill": "#C4C24A", "text":"US" },
|
||||
{ "x": 88.6, "y": 1.3, "size": 0.197, "fill": "#FB954F", "text":"Brazil" },
|
||||
{ "x": 54.9, "y": 3.7, "size": 0.177, "fill": "#D9CEB2", "text":"Pakistan" },
|
||||
{ "x": 99, "y": 0.7, "size": 0.0818, "fill": "#FF8D8D", "text":"Germany" },
|
||||
{ "x": 72, "y": 2.0, "size": 0.0826, "fill": "#69D2E7", "text":"Egypt" },
|
||||
{ "x": 99.6, "y": 3.4, "size": 0.143, "fill": "#E27F2D", "text":"Russia" },
|
||||
{ "x": 99, "y": 0.2, "size": 0.128, "fill": "#6A4B82", "text":"Japan" },
|
||||
{ "x": 86.1, "y": 4.0, "size": 0.115, "fill": "#F6B53F", "text":"Mexico" },
|
||||
{ "x": 92.6, "y": 6.6, "size": 0.096, "fill": "#C4C24A", "text":"Philippines" },
|
||||
{ "x": 61.3, "y": 14.5, "size": 0.162, "fill": "#FF8D8D", "text":"Nigeria" },
|
||||
{ "x": 56.8, "y": 6.1, "size": 0.151, "fill": "#69D2E7", "text":"Bangladesh" }
|
||||
]';
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
|
||||
|
||||
$series1->dataSource($Json)->marker($marker)->pointColorMappingName("fill")->xName("x")->yName("y")->size("size")->name("Pound");
|
||||
|
||||
$seriesCollection = array($series1);
|
||||
|
||||
|
||||
echo $chart->primaryXAxis($xAxis)
|
||||
->primaryYAxis($yAxis)
|
||||
->commonSeriesOptions($common)
|
||||
->isResponsive(true)
|
||||
->load("onchartload")
|
||||
->title($chartTitle)
|
||||
->series($seriesCollection)
|
||||
->size($chartSize)
|
||||
->legend($chartLegend)
|
||||
->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<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>
|
||||
|
||||
<div id="Tooltip" style="display: none; width:110px;padding-top: 10px;padding-bottom:10px">
|
||||
<div align="center" style="font-weight:bold">
|
||||
#point.x#
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Open:
|
||||
</td>
|
||||
<td>
|
||||
$#point.open#
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
High:
|
||||
</td>
|
||||
<td>
|
||||
$#point.high#
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Low:
|
||||
</td>
|
||||
<td >
|
||||
$#point.low#
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Close:
|
||||
</td>
|
||||
<td>
|
||||
$#point.close#
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
$xAxis = new EJ\Chart\PrimaryXAxis();
|
||||
$xTitle = new EJ\Chart\Title();
|
||||
$xRange = new EJ\Chart\Range();
|
||||
$xTitle->text("Date");
|
||||
$xAxis->intervalType("Years")->range($xRange)->valueType("datetime");
|
||||
|
||||
|
||||
$yAxis = new EJ\Chart\PrimaryYAxis();
|
||||
$yRange = new EJ\Chart\Range();
|
||||
$yTitle = new EJ\Chart\Title();
|
||||
$yTitle->text("Price in Dollars");
|
||||
$yRange->min(0)->max(250)->interval(50);
|
||||
$yAxis->labelFormat('${value}')->range($yRange);
|
||||
|
||||
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$chartLegend->visible(false);
|
||||
|
||||
$chartTitle->text("Foreign Exchange Rate Analysiss");
|
||||
|
||||
$Json = '[
|
||||
{ "xName": "1950/01/12", "high": 125, "low": 70, "open": 115, "close": 90 },
|
||||
{ "xName": "1953/01/12", "high": 150, "low": 60, "open": 120, "close": 70 },
|
||||
{ "xName": "1956/01/12", "high": 200, "low": 140, "open": 160, "close": 190 },
|
||||
{ "xName": "1959/01/12", "high": 160, "low": 90, "open": 140, "close": 110 },
|
||||
{ "xName": "1962/01/12", "high": 200, "low": 100, "open": 180, "close": 120 },
|
||||
{ "xName": "1965/01/12", "high": 100, "low": 45, "open": 70, "close": 50 },
|
||||
{ "xName": "1968/01/12", "high": 150, "low": 70, "open": 140, "close": 130 },
|
||||
{ "xName": "1971/01/12", "high": 90, "low": 60, "open": 65, "close": 80 },
|
||||
{ "xName": "1974/01/12", "high": 225, "low": 170, "open": 175, "close": 220 },
|
||||
{ "xName": "1977/01/12", "high": 250, "low": 180, "open": 223, "close": 190 },
|
||||
{ "xName": "1980/01/12", "high": 200, "low": 140, "open": 160, "close": 190 },
|
||||
{ "xName": "1983/01/12", "high": 160, "low": 90, "open": 140, "close": 110 },
|
||||
{ "xName": "1986/01/12", "high": 200, "low": 100, "open": 180, "close": 120 },
|
||||
{ "xName": "1989/01/01", "high": 130, "low": 95, "open": 120, "close": 100 },
|
||||
{ "xName": "1991/01/12", "high": 100, "low": 70, "open": 92, "close": 75 },
|
||||
{ "xName": "1994/01/12", "high": 50, "low": 85, "open": 65, "close": 80 },
|
||||
{ "xName": "1997/01/12", "high": 185, "low": 110, "open": 130, "close": 170 },
|
||||
{ "xName": "2000/01/12", "high": 90, "low": 30, "open": 80, "close": 50 },
|
||||
{ "xName": "2003/01/12", "high": 200, "low": 140, "open": 160, "close": 190 },
|
||||
{ "xName": "2006/01/12", "high": 170, "low": 90, "open": 140, "close": 110 },
|
||||
{ "xName": "2008/01/12", "high": 200, "low": 100, "open": 180, "close": 120 }
|
||||
]';
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
$tooltip =new EJ\Chart\Tooltip();
|
||||
|
||||
$tooltip->visible(true)->template("Tooltip");
|
||||
|
||||
$series1->dataSource($Json)->tooltip($tooltip)->xName("xName")->high("high")->low("low")->open("open")->close("close")->type("candle");
|
||||
|
||||
$seriesCollection = array($series1);
|
||||
|
||||
|
||||
echo $chart->primaryXAxis($xAxis)
|
||||
->primaryYAxis($yAxis)
|
||||
->isResponsive(true)
|
||||
->load("onchartload")
|
||||
->title($chartTitle)
|
||||
->series($seriesCollection)
|
||||
->size($chartSize)
|
||||
->legend($chartLegend)
|
||||
->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style class="cssStyles">
|
||||
.tooltipDivcontainer table, table th, table tr , table td
|
||||
{
|
||||
border:0px none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tooltipDivcontainer
|
||||
{
|
||||
border:2px transparent;
|
||||
color:white;
|
||||
}
|
||||
#Tooltip td
|
||||
{
|
||||
color:white;
|
||||
}
|
||||
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<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>
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
$xAxis = new EJ\Chart\PrimaryXAxis();
|
||||
$xTitle = new EJ\Chart\Title();
|
||||
$xTitle->text("Countries");
|
||||
|
||||
|
||||
$yAxis = new EJ\Chart\PrimaryYAxis();
|
||||
$yRange = new EJ\Chart\Range();
|
||||
$yTitle = new EJ\Chart\Title();
|
||||
$yTitle->text("Medals");
|
||||
$yRange->min(0)->max(80)->interval(20);
|
||||
$yAxis->range($yRange);
|
||||
|
||||
|
||||
$common = new EJ\Chart\CommonSeriesOption();
|
||||
$tooltip = new EJ\Chart\Tooltip();
|
||||
$marker = new EJ\Chart\Marker();
|
||||
$size = new EJ\Chart\Size();
|
||||
$border = new EJ\Chart\Border();
|
||||
|
||||
$border->width(2);
|
||||
$tooltip->visible(true)->format("#point.x# : #point.y# #series.name# Medals");
|
||||
$marker->shape("circle")->size($size)->visible(true);
|
||||
|
||||
$common->type("column")->enableAnimation(true)->tooltip($tooltip)->border($border);
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$chartLegend->position("top");
|
||||
$chartTitle->text("Olympic Medals");
|
||||
|
||||
$Json = '[
|
||||
{ "xName": "USA", "yName": 50, "yName1": 70, "yName2": 45 },
|
||||
{ "xName": "China", "yName": 40, "yName1": 60, "yName2": 55 },
|
||||
{ "xName": "Japan", "yName": 70, "yName1": 60, "yName2": 50 }
|
||||
]';
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
$series2 = new EJ\Chart\Series();
|
||||
$series3 = new EJ\Chart\Series();
|
||||
|
||||
$series1->dataSource($Json)->xName("xName")->yName("yName")->name("Gold");
|
||||
$series2->dataSource($Json)->xName("xName")->yName("yName1")->name("Silver");
|
||||
$series3->dataSource($Json)->xName("xName")->yName("yName2")->name("Bronze");
|
||||
|
||||
$seriesCollection = array($series1, $series2, $series3);
|
||||
|
||||
|
||||
echo $chart->primaryXAxis($xAxis)->legend($chartLegend)->load("onchartload")->primaryYAxis($yAxis)->commonSeriesOptions($common)->isResponsive(true)->title($chartTitle)->series($seriesCollection)->size($chartSize)->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<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>
|
||||
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
$xAxis = new EJ\Chart\PrimaryXAxis();
|
||||
$xTitle = new EJ\Chart\Title();
|
||||
$xTitle->text("Month");
|
||||
|
||||
|
||||
$yAxis = new EJ\Chart\PrimaryYAxis();
|
||||
$yTitle = new EJ\Chart\Title();
|
||||
$yTitle->text("Unit Sold");
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$common = new EJ\Chart\CommonSeriesOption();
|
||||
$tooltip = new EJ\Chart\Tooltip();
|
||||
$marker = new EJ\Chart\Marker();
|
||||
$size = new EJ\Chart\Size();
|
||||
$size->width(8)->height(8);
|
||||
|
||||
|
||||
$tooltip->visible(true)->format("#point.x# <br/> Unit Sold : #point.y# <br/>");
|
||||
$marker->shape('circle')->size($size)->visible(true);
|
||||
|
||||
$common->enableAnimation(true)->tooltip($tooltip);
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$itemStyle= new EJ\Chart\ItemStyle();
|
||||
$itemStyle->width(15)->height(15);
|
||||
$lfont = new EJ\Chart\Font();
|
||||
$lfont->size("15px");
|
||||
$chartLegend->shape("seriesType")->itemStyle($itemStyle)->font($lfont);
|
||||
|
||||
$chartTitle->text("Sales Report");
|
||||
$border = new EJ\Chart\Border();
|
||||
$border->width(2);
|
||||
$Json = '[
|
||||
{ "xName": "Jan", "yName": 45, "yName1": 10 },
|
||||
{ "xName": "Feb", "yName": 100, "yName1": 30 },
|
||||
{ "xName": "March", "yName": 25, "yName1": 10 },
|
||||
{ "xName": "April", "yName": 100, "yName1": 70 },
|
||||
{ "xName": "May", "yName": 85, "yName1": 50 },
|
||||
{ "xName": "June", "yName": 140, "yName1": 140 }
|
||||
]';
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
$series2 = new EJ\Chart\Series();
|
||||
|
||||
$series1->dataSource($Json)->fill("#69D2E7")->type("column")->xName("xName")->yName("yName")->name("Unit Sold");
|
||||
$series2->dataSource($Json)->fill("")->type("line")->xName("xName")->yName("yName1")->name("Total Transaction")->marker($marker);
|
||||
|
||||
$seriesCollection = array($series1, $series2);
|
||||
|
||||
|
||||
echo $chart->primaryXAxis($xAxis)
|
||||
->primaryYAxis($yAxis)
|
||||
->commonSeriesOptions($common)
|
||||
->isResponsive(true)
|
||||
->load("onchartload")
|
||||
->title($chartTitle)
|
||||
->series($seriesCollection)
|
||||
->legend($chartLegend)
|
||||
->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<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>
|
||||
|
||||
<div id="Tooltip" style="display: none;">
|
||||
<div id="icon">
|
||||
<div id="eficon">
|
||||
</div>
|
||||
</div>
|
||||
<div id="value">
|
||||
<div>
|
||||
<label id="efpercentage"> #point.y#
|
||||
</label>
|
||||
<label id="ef">Efficiency
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style class="cssStyles">
|
||||
label{
|
||||
text-align :center !important;
|
||||
}
|
||||
.tooltipDivcontainer {
|
||||
background-color:#E94649;
|
||||
color: white;
|
||||
width:130px;
|
||||
}
|
||||
#Tooltip >div:first-child {
|
||||
float: left;
|
||||
}
|
||||
#Tooltip #value {
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 68px;
|
||||
}
|
||||
#Tooltip #value >div {
|
||||
margin: 5px 5px 5px 5px;
|
||||
}
|
||||
#Tooltip #efpercentage {
|
||||
font-size: 20px;
|
||||
font-family: segoe ui;
|
||||
padding-left: 2px;
|
||||
}
|
||||
#Tooltip #ef {
|
||||
font-size: 12px;
|
||||
font-family: segoe ui;
|
||||
}
|
||||
#eficon {
|
||||
background-image: url("Content/images/chart/eficon.png");
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
$xAxis = new EJ\Chart\PrimaryXAxis();
|
||||
$xRange = new EJ\Chart\Range();
|
||||
$xRange->min(2005)->max(2011)->interval(1);
|
||||
$xTitle = new EJ\Chart\Title();
|
||||
$xTitle->text("Year");
|
||||
$xAxis->range($xRange)->valueType("category");
|
||||
|
||||
|
||||
$yAxis = new EJ\Chart\PrimaryYAxis();
|
||||
$yRange = new EJ\Chart\Range();
|
||||
$yTitle = new EJ\Chart\Title();
|
||||
$yTitle->text("Efficiency");
|
||||
$yRange->min(25)->max(55)->interval(5);
|
||||
$yAxis->labelFormat("{value}%")->range($yRange);
|
||||
|
||||
|
||||
$common = new EJ\Chart\CommonSeriesOption();
|
||||
$tooltip = new EJ\Chart\Tooltip();
|
||||
$marker = new EJ\Chart\Marker();
|
||||
$size = new EJ\Chart\Size();
|
||||
$border = new EJ\Chart\Border();
|
||||
|
||||
$border->width(2);
|
||||
$tooltip->visible(true)->template("Tooltip");
|
||||
$size->width(10)->height(10);
|
||||
$marker->shape("circle")->size($size)->visible(true);
|
||||
|
||||
$common->type("line")->enableAnimation(true)->tooltip($tooltip)->marker($marker)->border($border);
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
$chartTitle->text("Efficiency of oil-fired power production");
|
||||
|
||||
$Json = '[{ "Year": "2005", "yName": 28, "yName1": 31, "yName2": 36, "yName3": 39 }, { "Year": "2006", "yName": 25, "yName1": 28, "yName2": 32, "yName3": 36 }, { "Year": "2007", "yName": 26, "yName1": 30, "yName2": 34, "yName3": 40 }, { "Year": "2008", "yName": 27, "yName1": 36, "yName2": 41, "yName3": 44 }, { "Year": "2009", "yName": 32, "yName1": 36, "yName2": 42, "yName3": 45 }, { "Year": "2010", "yName": 35, "yName1": 39, "yName2": 42, "yName3": 49 }, { "Year": "2011", "yName": 30, "yName1": 37, "yName2": 43, "yName3": 46 }]';
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
$series2 = new EJ\Chart\Series();
|
||||
$series3 = new EJ\Chart\Series();
|
||||
$series4 = new EJ\Chart\Series();
|
||||
|
||||
$series1->dataSource($Json)->type("line")->xName("Year")->yName("yName")->name("India");
|
||||
$series2->dataSource($Json)->type("line")->xName("Year")->yName("yName1")->name("Germany");
|
||||
$series3->dataSource($Json)->type("line")->xName("Year")->yName("yName2")->name("England");
|
||||
$series4->dataSource($Json)->type("line")->xName("Year")->yName("yName3")->name("France");
|
||||
|
||||
$seriesCollection = array($series1, $series2, $series3, $series4);
|
||||
|
||||
|
||||
echo $chart->primaryXAxis($xAxis)->primaryYAxis($yAxis)->title($chartTitle)->commonSeriesOptions($common)->isResponsive(true)->load("onchartload")->series($seriesCollection)->size($chartSize)->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<script>
|
||||
|
||||
var chartobj,
|
||||
count = 0,
|
||||
chartData = null,
|
||||
chartData1 = null,
|
||||
value = 10;
|
||||
generateData();
|
||||
|
||||
|
||||
function onchartload(sender) {
|
||||
chartobj = this;
|
||||
sender.model.series[0].points = chartData;
|
||||
sender.model.series[1].points = chartData1;
|
||||
window.timer = window.setInterval(update, 40);
|
||||
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 generateData() {
|
||||
var num = 100, data = [], data1 = [];;
|
||||
for (i = 0; i < num; i++) {
|
||||
if (Math.random() > .5) {
|
||||
if (value < 45)
|
||||
value += Math.random() * 2.0;
|
||||
else
|
||||
value -= 2.0;
|
||||
}
|
||||
else {
|
||||
if (value > 5)
|
||||
value -= Math.random() * 2.0;
|
||||
else
|
||||
value += 2.0;
|
||||
}
|
||||
data[i] = {
|
||||
x: i.toString(), y: value
|
||||
};
|
||||
data1[i] = {
|
||||
x: i.toString(), y: value + 20
|
||||
};
|
||||
}
|
||||
chartData = data;
|
||||
chartData1 = data1;
|
||||
};
|
||||
|
||||
|
||||
function update() {
|
||||
if (Math.random() > .5) {
|
||||
if (value < 45)
|
||||
value += Math.random() * 2.0;
|
||||
else
|
||||
value -= 2.0;
|
||||
}
|
||||
else {
|
||||
if (value > 5)
|
||||
value -= Math.random() * 2.0;
|
||||
else
|
||||
value += 2.0;
|
||||
}
|
||||
chartData.push({ x: i.toString(), y: value });
|
||||
chartData1.push({ x: i.toString(), y: value + 20 });
|
||||
i++;
|
||||
chartData.shift();
|
||||
chartData1.shift();
|
||||
if( chartobj.model){
|
||||
chartobj.model.series[0].points = chartData;
|
||||
chartobj.model.series[1].points = chartData1;
|
||||
$("#livechart").ejChart("redraw");
|
||||
}
|
||||
else
|
||||
window.clearInterval(window.timer);
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("livechart");
|
||||
$xAxis = new EJ\Chart\PrimaryXAxis();
|
||||
$xTitle = new EJ\Chart\Title();
|
||||
$major = new EJ\Chart\MajorGridLine();
|
||||
$major->visible(false);
|
||||
$xAxis->majorGridLines($major);
|
||||
|
||||
|
||||
$yAxis = new EJ\Chart\PrimaryYAxis();
|
||||
$yTitle = new EJ\Chart\Title();
|
||||
$range = new EJ\Chart\Range();
|
||||
$range->min(0)->max(50)->interval(10);
|
||||
$yAxis->range($range);
|
||||
|
||||
|
||||
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$chartLegend->visible(false);
|
||||
|
||||
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
$series2 = new EJ\Chart\Series();
|
||||
|
||||
$series1->type("line")->enableAnimation(false);
|
||||
$series2->type("line")->enableAnimation(false);
|
||||
|
||||
$seriesCollection = array($series1,$series2);
|
||||
|
||||
|
||||
echo $chart->primaryXAxis($xAxis)
|
||||
->primaryYAxis($yAxis)
|
||||
->isResponsive(true)
|
||||
->load("onchartload")
|
||||
->enableCanvasRendering(true)
|
||||
->series($seriesCollection)
|
||||
->size($chartSize)
|
||||
->legend($chartLegend)
|
||||
->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
|
||||
<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>
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
|
||||
|
||||
|
||||
$common = new EJ\Chart\CommonSeriesOption();
|
||||
$tooltip = new EJ\Chart\Tooltip();
|
||||
$marker = new EJ\Chart\Marker();
|
||||
$size = new EJ\Chart\Size();
|
||||
$border = new EJ\Chart\Border();
|
||||
|
||||
$border->width(2)->color("white");
|
||||
$datalabel = new EJ\Chart\DataLabel();
|
||||
$connector = new EJ\Chart\ConnectorLine();
|
||||
$font = new EJ\Chart\Font();
|
||||
$font->size("20px")->color("white");
|
||||
$connector->type("bezier")->color("black");
|
||||
$datalabel->visible(true)->shape("none")->textPosition("inside")->textMappingName("text")->connectorLine($connector)->font($font);
|
||||
$marker->dataLabel($datalabel);
|
||||
|
||||
|
||||
|
||||
|
||||
$common->type("pie")->enableAnimation(true)->marker($marker)->border($border)->enableSmartLabels(true);
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartTitle->text("Expenditures");
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$chartLegend->visible(false);
|
||||
|
||||
|
||||
$Json = '[
|
||||
{ "xName": "Walmart","yName": 13, "text": "13%"},
|
||||
{ "xName": "Apple", "yName": 25, "text": "25%"},
|
||||
{ "xName": "Best Buy","yName": 12, "text": "12%"},
|
||||
{ "xName": "Target","yName": 7, "text": "7%" },
|
||||
{ "xName": "Amazon","yName": 10, "text": "10%"},
|
||||
{ "xName": "Wenger","yName": 13, "text": "13%"},
|
||||
{ "xName": "Others","yName": 20, "text": "20%"}
|
||||
]';
|
||||
|
||||
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
|
||||
$series1->dataSource($Json)->xName("xName")->yName("yName")->labelPosition("inside")->name("Expenses");
|
||||
|
||||
$seriesCollection = array($series1);
|
||||
|
||||
|
||||
echo $chart->commonSeriesOptions($common)->legend($chartLegend)->isResponsive(true)->load("onchartload")->title($chartTitle)->series($seriesCollection)->render();
|
||||
?>
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<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>
|
||||
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
$yAxis = new EJ\Chart\PrimaryYAxis();
|
||||
$yRange = new EJ\Chart\Range();
|
||||
$yRange->min(15)->max(90)->interval(15);
|
||||
$yAxis->range($yRange);
|
||||
|
||||
|
||||
$common = new EJ\Chart\CommonSeriesOption();
|
||||
$tooltip = new EJ\Chart\Tooltip();
|
||||
$tooltip->visible(true);
|
||||
$common->type("polar")->enableAnimation(true)->tooltip($tooltip);
|
||||
|
||||
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
$chartTitle = new\EJ\Chart\Title();
|
||||
$chartTitle->text("Unemployment rate (%)");
|
||||
|
||||
|
||||
$Json = '[
|
||||
{ "xName": "N", "yName": 42, "yName1": 63, "yName2": 80 },
|
||||
{ "xName": "NE", "yName": 28, "yName1": 73, "yName2": 88 },
|
||||
{ "xName": "E", "yName": 40, "yName1": 58, "yName2": 79 },
|
||||
{ "xName": "SE", "yName": 45, "yName1": 65, "yName2": 83 },
|
||||
{ "xName": "S", "yName": 20, "yName1": 47, "yName2": 78 },
|
||||
{ "xName": "SW", "yName": 40, "yName1": 70, "yName2": 90 },
|
||||
{ "xName": "W", "yName": 25, "yName1": 45, "yName2": 78 },
|
||||
{ "xName": "NW", "yName": 40, "yName1": 70, "yName2": 85 }]';
|
||||
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
$series2 = new EJ\Chart\Series();
|
||||
$series3 = new EJ\Chart\Series();
|
||||
|
||||
$marker = new EJ\Chart\Marker();
|
||||
$marker->visible(true);
|
||||
|
||||
$series1->dataSource($Json)->xName("xName")->yName("yName")->name("Line")->marker($marker)->zOrder(2);
|
||||
$series2->dataSource($Json)->xName("xName")->drawType("column")->yName("yName1")->name("Column")->zOrder(1);
|
||||
$series3->dataSource($Json)->xName("xName")->drawType("Area")->yName("yName2")->name("Area")->marker($marker)->zOrder(0);
|
||||
|
||||
|
||||
|
||||
$seriesCollection = array($series3, $series2, $series1);
|
||||
|
||||
|
||||
echo $chart->primaryYAxis($yAxis)
|
||||
->commonSeriesOptions($common)
|
||||
->isResponsive(true)
|
||||
->load("onchartload")
|
||||
->series($seriesCollection)
|
||||
->size($chartSize)
|
||||
->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<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>
|
||||
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
|
||||
|
||||
|
||||
$common = new EJ\Chart\CommonSeriesOption();
|
||||
$tooltip = new EJ\Chart\Tooltip();
|
||||
$marker = new EJ\Chart\Marker();
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
|
||||
$datalabel = new EJ\Chart\DataLabel();
|
||||
$connector = new EJ\Chart\ConnectorLine();
|
||||
$font = new EJ\Chart\Font();
|
||||
$font->size("12px")->color("black")->fontWeight("lighter");
|
||||
$connector->type("bezier")->color("black");
|
||||
$datalabel->visible(true)->font($font);
|
||||
$marker->dataLabel($datalabel);
|
||||
|
||||
|
||||
$common->type("pyramid")->marker($marker)->labelPosition("inside")->enableSmartLabels(true);
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartTitle->text("Web Site Visitor");
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$chartLegend->visible(true)->position("bottom");
|
||||
$Json = '[
|
||||
{ "xName": "Renewed", "yName": 18.2},
|
||||
{ "xName": "Subscribe", "yName": 27.3},
|
||||
{ "xName": "Downloaded", "yName": 76.8},
|
||||
{ "xName": "Visited", "yName": 100}
|
||||
]';
|
||||
|
||||
|
||||
$Json = json_decode($Json,true);
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
|
||||
$series1->dataSource($Json)->xName("xName")->yName("yName")->name("Newyork");
|
||||
|
||||
$seriesCollection = array($series1);
|
||||
|
||||
|
||||
echo $chart->commonSeriesOptions($common)->legend($chartLegend)->isResponsive(true)->load("onchartload")->title($chartTitle)->series($seriesCollection)->size($chartSize)->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<script>
|
||||
|
||||
function onchartload(sender) {
|
||||
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>
|
||||
|
||||
<div>
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
$chart=new EJ\Chart("container");
|
||||
$xAxis = new EJ\Chart\PrimaryXAxis();
|
||||
$xTitle = new EJ\Chart\Title();
|
||||
$xTitle->text("Date");
|
||||
$xAxis->valueType("datetime")->labelFormat("yyyy");
|
||||
|
||||
|
||||
$yAxis = new EJ\Chart\PrimaryYAxis();
|
||||
$yTitle = new EJ\Chart\Title();
|
||||
$yTitle->text("CPU Load");
|
||||
$yAxis->labelFormat("{value}%")->title($yTitle);
|
||||
|
||||
|
||||
$zooming = new EJ\Chart\Zooming();
|
||||
$zooming->enable(true)->type('x,y')->enableMouseWheel(true);
|
||||
|
||||
$chartTitle= new EJ\Chart\Title();
|
||||
$chartSize = new EJ\Chart\Size();
|
||||
$chartLegend = new EJ\Chart\Legend();
|
||||
$chartLegend->visible(false);
|
||||
|
||||
$chartTitle->text("Server CPU Load");
|
||||
|
||||
|
||||
|
||||
$series1 = new EJ\Chart\Series();
|
||||
|
||||
$series1->name("Server")->type("line")->enableAnimation(true);
|
||||
|
||||
$seriesCollection = array($series1);
|
||||
|
||||
|
||||
echo $chart->primaryXAxis($xAxis)
|
||||
->primaryYAxis($yAxis)
|
||||
->isResponsive(true)
|
||||
->zooming($zooming)
|
||||
->load("onchartload")
|
||||
->title($chartTitle)
|
||||
->series($seriesCollection)
|
||||
->size($chartSize)
|
||||
->legend($chartLegend)
|
||||
->render();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div align="center">
|
||||
|
||||
<?php
|
||||
$circular = new EJ\CircularGauge("circulargauge");
|
||||
$scale1 = new EJ\CircularGauge\Scale();
|
||||
$crange1=new EJ\CircularGauge\Range();
|
||||
$crange1 -> distanceFromScale(-30)->startValue(0)->endValue(70);
|
||||
$crange2=new EJ\CircularGauge\Range();
|
||||
$cborder1=new EJ\CircularGauge\Border();
|
||||
$cborder1->color("#fc0606");
|
||||
$crange2 -> distanceFromScale(-30)->startValue(70)->endValue(110)->backgroundColor("#fc0606")->border($cborder1);
|
||||
$crange3=new EJ\CircularGauge\Range();
|
||||
$cborder2=new EJ\CircularGauge\Border();
|
||||
$cborder2->color("#f5b43f");
|
||||
$crange3 -> distanceFromScale(-30)->startValue(110)->endValue(120)->backgroundColor("#f5b43f")->border($cborder2);
|
||||
$cranges = array($crange1, $crange2, $crange3);
|
||||
|
||||
$tick1 = new EJ\CircularGauge\Tick();
|
||||
|
||||
|
||||
$tick1->type("major")->distanceFromScale(2)->height(16)->width(1)->color("#8c8c8c");
|
||||
$tick2 = new EJ\CircularGauge\Tick();
|
||||
$tick2->type("major")->distanceFromScale(2)->height(8)->width(1)->color("#8c8c8c");
|
||||
|
||||
$ticks = array($tick1, $tick2);
|
||||
$pointer = new EJ\CircularGauge\Pointer();
|
||||
$cap = new EJ\CircularGauge\PointerCap();
|
||||
$cap->radius(12);
|
||||
$pointer -> value(60)->showBackNeedle(true)->width(7)->backNeedleLength(20)->length(95);
|
||||
$pointers = array($pointer);
|
||||
$label = new EJ\CircularGauge\Label();
|
||||
$label->color("#8c8c8c");
|
||||
$labels = array($label);
|
||||
|
||||
|
||||
$scale1 -> startAngle(122)->ticks($ticks)->sweepAngle(296)->labels($labels)->radius(130)->showRanges(true)->pointers($pointers)->ranges($cranges)->showScaleBar(true)->size(1)->maximum(120)->majorIntervalValue(20)->minorIntervalValue(10);
|
||||
$scale = array($scale1);
|
||||
echo $circular->isResponsive(true)->backgroundColor("transparent")->scales($scale)->render();
|
||||
?>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div align="center">
|
||||
|
||||
<?php
|
||||
$circular = new EJ\CircularGauge("circulargauge");
|
||||
$scale1 = new EJ\CircularGauge\Scale();
|
||||
|
||||
$crange1=new EJ\CircularGauge\Range();
|
||||
$cborder0=new EJ\CircularGauge\Border();
|
||||
$cborder0->color("#bc4b4b")->width(2);
|
||||
$crange1 -> distanceFromScale(-73)->startValue(0)->size(40)->endValue(80)->backgroundColor("#bc4b4b")->border($cborder0);
|
||||
$crange2=new EJ\CircularGauge\Range();
|
||||
$cborder1=new EJ\CircularGauge\Border();
|
||||
$cborder1->color("#21a56f")->width(2);
|
||||
$crange2 -> distanceFromScale(-132)->startValue(0)->size(40)->endValue(70)->backgroundColor("#21a56f")->border($cborder1);
|
||||
$crange3=new EJ\CircularGauge\Range();
|
||||
$cborder2=new EJ\CircularGauge\Border();
|
||||
$cborder2->color("#2bafbc")->width(2);
|
||||
$crange3 -> distanceFromScale(-190)->startValue(0)->size(40)->endValue(90)->backgroundColor("#2bafbc")->border($cborder2);
|
||||
$cranges = array($crange1, $crange2, $crange3);
|
||||
|
||||
$label1 = new EJ\CircularGauge\CustomLabel();
|
||||
$position1 = new EJ\CircularGauge\Position();
|
||||
$position1->x(350)->y(280);
|
||||
$font1 = new EJ\CircularGauge\Font();
|
||||
$font1->fontFamily("Segoe UI")->size("24px")->fontStyle("Bold");
|
||||
$label1->color("#333333")->value("Sports")->position($position1)->font($font1);
|
||||
|
||||
$label2 = new EJ\CircularGauge\CustomLabel();
|
||||
$position2 = new EJ\CircularGauge\Position();
|
||||
$position2->x(350)->y(310);
|
||||
$font2 = new EJ\CircularGauge\Font();
|
||||
$font2->fontFamily("Segoe UI")->size("18px")->fontStyle("Bold");
|
||||
$label2->color("#333333")->value("Fan Ratio")->position($position2)->font($font2);
|
||||
|
||||
$label3 = new EJ\CircularGauge\CustomLabel();
|
||||
$position3 = new EJ\CircularGauge\Position();
|
||||
$position3->x(350)->y(330);
|
||||
$font3 = new EJ\CircularGauge\Font();
|
||||
$font3->fontFamily("Segoe UI")->size("12px")->fontStyle("Bold");
|
||||
$label3->color("#333333")->value("(in million)")->position($position3)->font($font3);
|
||||
|
||||
$customLabels = array($label1, $label2, $label3);
|
||||
|
||||
$pointer1 = new EJ\CircularGauge\Pointer();
|
||||
|
||||
|
||||
$pborder1=new EJ\CircularGauge\Border();
|
||||
$pborder1->color("transparent")->width(0);
|
||||
$pointer1 -> type("marker")->length(43)->width(43)->placement("far")->distanceFromScale(15)->value(80)->markerType("image")->backgroundColor("transparent")->border($pborder1)->imageUrl("Content/images/gauge/golfball.png");
|
||||
$pointer2 = new EJ\CircularGauge\Pointer();
|
||||
$pointer2 -> type("marker")->length(43)->width(43)->placement("far")->distanceFromScale(74)->value(70)->markerType("image")->backgroundColor("transparent")->border($pborder1)->imageUrl("Content/images/gauge/basketball.png");
|
||||
$pointer3 = new EJ\CircularGauge\Pointer();
|
||||
$pointer3 -> type("marker")->length(43)->width(43)->placement("far")->distanceFromScale(131)->value(90)->markerType("image")->backgroundColor("transparent")->border($pborder1)->imageUrl("Content/images/gauge/football.png");
|
||||
$pointers = array($pointer1, $pointer2, $pointer3);
|
||||
$label = new EJ\CircularGauge\Label();
|
||||
$label->color("transparent");
|
||||
$labels = array($label);
|
||||
|
||||
$indicator = new EJ\CircularGauge\Indicator();
|
||||
|
||||
$srange = new EJ\CircularGauge\StateRange();
|
||||
$font = new EJ\CircularGauge\Font();
|
||||
$font->size("12px");
|
||||
$srange->startValue(0)->endValue(100)->textColor("8c8c8c")->font($font);
|
||||
$sranges = array($srange);
|
||||
$indicator->height(10)->width(10)->type("text")->stateRanges($sranges);
|
||||
|
||||
$indicators = array($indicator, $indicator, $indicator);
|
||||
$sborder= new EJ\CircularGauge\Border();
|
||||
$sborder->width(0.001);
|
||||
|
||||
$scale1 -> startAngle(120)->customLabels($customLabels)->border($sborder)->sweepAngle(300)->size(1)->indicators($indicators)->labels($labels)->radius(80)->showIndicators(true)->showRanges(true)->showTicks(false)->showScaleBar(false)->pointers($pointers)->ranges($cranges)->size(1)->maximum(100)->minimum(0)->majorIntervalValue(10)->minorIntervalValue(10);
|
||||
$scale = array($scale1);
|
||||
echo $circular->isResponsive(true)->drawLabels("drawLabels")->drawPointers("drawpointers")->enableAnimation(false)->backgroundColor("#e0e0e0")->scales($scale)->width(700)->height(600)->radius(85)->render();
|
||||
?>
|
||||
</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 + 20;
|
||||
args.model.scales[0].indicators[i].position.y = args.position.startY + 50;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$color=new \EJ\ColorPicker("colorPick");
|
||||
echo $color->value("#278787")->modelType("palette")->render();
|
||||
?>
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
.e-colorwidget.e-widget
|
||||
{
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$custom=["ffffff", "ffccff", "ff99ff", "ff66ff", "ff33ff", "ff00ff", "ccffff", "ccccff",
|
||||
"cc99ff", "cc66ff", "cc33ff", "cc00ff", "99ffff", "99ccff", "9999ff", "9966ff",
|
||||
"9933ff", "9900ff", "ffffcc", "ffcccc"
|
||||
];
|
||||
$color=new \EJ\ColorPicker("colorPick");
|
||||
echo $color->value("#9933ff")->custom($custom)->modelType("palette")->palette("custompalette")->showSwitcher(false)->render();
|
||||
?>
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
.e-colorwidget.e-widget
|
||||
{
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$color=new \EJ\ColorPicker("colorPick");
|
||||
echo $color->value("#278787")->render();
|
||||
?>
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
.e-colorwidget.e-widget
|
||||
{
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$color=new \EJ\ColorPicker("colorPick");
|
||||
echo $color->value("#278787")->displayInline(true)->tag("Div")->render();
|
||||
?>
|
||||
</div>
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
padding: 30px 37px !important;
|
||||
}
|
||||
.e-colorwidget.e-widget
|
||||
{
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$color=new \EJ\ColorPicker("colorPick");
|
||||
echo $color->value("#278787")->select("onSelect")->open("onOpen")->close("onClose")->change("onChange")->render();
|
||||
?>
|
||||
</div>
|
||||
<div id="Logger" class="box">
|
||||
<h4>Event Trace</h4>
|
||||
<div class="EventLog" id="EventLog"></div>
|
||||
<div>
|
||||
<?php
|
||||
$clearBtn = new \EJ\Button("clearBtn");
|
||||
echo $clearBtn->size("small")->text("Clear")->click("clearLog")->type("button")->render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Client side Events
|
||||
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>
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
.e-colorwidget.e-widget
|
||||
{
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$color=new \EJ\ColorPicker("colorPick");
|
||||
echo $color->value("#278787")->render();
|
||||
?>
|
||||
</div>
|
||||
<div id="property-window" class="box wide">
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<label>Enable / Disable</label>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<?php
|
||||
$disableBtn = new EJ\ToggleButton("disableBtn");
|
||||
echo $disableBtn->size("medium")->defaultText("Disable")->activeText("Enable")->click("onEnabled")->render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<label>Show Switcher</label>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<?php
|
||||
$disableBtn = new EJ\ToggleButton("switcher");
|
||||
echo $disableBtn->size("medium")->defaultText("False")->activeText("True")->click("onSwitcher")->render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<label>Show Button</label>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<?php
|
||||
$disableBtn = new EJ\ToggleButton("showButton");
|
||||
echo $disableBtn->size("medium")->defaultText("False")->activeText("True")->click("onShowButton")->render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<label>Get HexCode</label>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<?php
|
||||
$button = new EJ\Button("Button4");
|
||||
echo $button ->text("click")->size("medium")->click("getHexCode")->render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<label>Value(With '#')</label>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<input type="text" id="color-value" class="input ejinputtext" placeholder="Value" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(function ($) {
|
||||
ColorObj = $("#colorPick").data('ejColorPicker');
|
||||
});
|
||||
function onSwitcher(args) {
|
||||
if (args.isChecked) ColorObj.option('showSwitcher', false);
|
||||
else ColorObj.option('showSwitcher', true);
|
||||
}
|
||||
function onShowButton(args) {
|
||||
if (args.isChecked) ColorObj.option('showApplyCancel', false);
|
||||
else ColorObj.option('showApplyCancel', true);
|
||||
}
|
||||
function getHexCode() {
|
||||
setTimeout(function () { alert("The Colorpicker value : " + ColorObj.getValue()); }, 250);
|
||||
}
|
||||
function onEnabled(args) {
|
||||
if (args.isChecked) {
|
||||
ColorObj.option('enabled', false);
|
||||
$(".fadetext").addClass("e-disable");
|
||||
}
|
||||
else {
|
||||
ColorObj.option('enabled', true);
|
||||
$(".fadetext").removeClass("e-disable");
|
||||
}
|
||||
}
|
||||
function onRecentColor(args) {
|
||||
if (args.isChecked) ColorObj.option('showRecentColors', true);
|
||||
else ColorObj.option('showRecentColors', false);
|
||||
}
|
||||
function getHexCode() {
|
||||
setTimeout(function () { alert("The Colorpicker value : " + ColorObj.getValue()); }, 250);
|
||||
}
|
||||
function onPreview(args) {
|
||||
if (args.isChecked) ColorObj.option('showPreview', false);
|
||||
else ColorObj.option('showPreview', true);
|
||||
}
|
||||
$("#opacityValue").keypress(function (event) {
|
||||
var keycode = (event.keyCode ? event.keyCode : event.which);
|
||||
if (keycode == '13')
|
||||
ColorObj.option('opacityValue', $("#opacityValue").val());
|
||||
});
|
||||
$("#color-value").change(function () {
|
||||
if ($("#color-value").val() !== "") {
|
||||
if ($("#color-value").val().length == 4 || $("#color-value").val().length == 7)
|
||||
ColorObj.option('value', $("#color-value").val());
|
||||
}
|
||||
});
|
||||
$("#color-value").keypress(function (event) {
|
||||
var keycode = (event.keyCode ? event.keyCode : event.which);
|
||||
if (keycode == '13') {
|
||||
if ($("#color-value").val() !== "") {
|
||||
if ($("#color-value").val().length == 4 || $("#color-value").val().length == 7)
|
||||
ColorObj.option('value', $("#color-value").val());
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.input.ejinputtext {
|
||||
text-indent: 10px;
|
||||
width: 111px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.cols-sample-area
|
||||
{
|
||||
width:300px;
|
||||
margin:0 auto;
|
||||
float:none;
|
||||
}
|
||||
.e-colorwidget.e-widget
|
||||
{
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$gameList = array(
|
||||
array('id'=> "level1", 'game'=> "American Football"),
|
||||
array('id'=> "level2", 'game'=> "Badminton"),
|
||||
array('id'=> "level3", 'game'=> "Basketball"),
|
||||
array('id'=> "level4", 'game'=> "Cricket"),
|
||||
array('id'=> "level5", 'game'=> "Football"),
|
||||
array('id'=> "level6", 'game'=> "Golf"),
|
||||
array('id'=> "level7", 'game'=> "Hockey"),
|
||||
array('id'=> "level8", 'game'=> "Rugby"),
|
||||
array('id'=> "level9", 'game'=> "Snooker"),
|
||||
array('id'=> "level10", 'game'=> "Tennis"),
|
||||
);
|
||||
|
||||
$combobox =new EJ\ComboBox("selectGame");
|
||||
$fields = new EJ\ComboBox\Field();
|
||||
$fields->text("game")->value("id");
|
||||
echo $combobox->fields($fields)->dataSource($gameList)->width("100%")->placeholder("Select a Game")->render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
<div id="property-window" class="box wide">
|
||||
<div class="row">
|
||||
<div class="col-md-6">Autofill</div>
|
||||
<div class="col-md-6">
|
||||
<input type="checkbox" id="chkAutofillbtn" class="e-togglebtn" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">Sort</div>
|
||||
<div class="col-md-6">
|
||||
<input type="checkbox" id="chkSorting" class="e-togglebtn" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
|
||||
$(function () {
|
||||
$("#chkAutofillbtn").ejToggleButton({ "width": "107px", "change": "onAutofill", "defaultText": "Enable", "activeText": "Disable" });
|
||||
$("#chkSorting").ejToggleButton({ "width": "107px", "change": "onSorting", "defaultText": "Descending", "activeText": "Ascending" });
|
||||
});
|
||||
function onAutofill(args){
|
||||
var listObj = $('#selectGame').ejComboBox("instance");
|
||||
if (listObj.model) {
|
||||
if (args.isChecked)
|
||||
listObj.option({ autofill: true});
|
||||
else
|
||||
listObj.option({ autofill: false });
|
||||
}
|
||||
}
|
||||
function onSorting(args){
|
||||
var listObj = $('#selectGame').ejComboBox("instance");
|
||||
if (listObj.model) {
|
||||
if (args.isChecked){
|
||||
listObj.option({sortOrder: 'Descending'
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
listObj.option({sortOrder: 'Ascending'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<div class="cascadding">
|
||||
<div id="control" >
|
||||
<span class="txt">Select a Country</span>
|
||||
<?php
|
||||
$country = array(
|
||||
array('countryName'=> "United States", 'countryId'=> "1" ),
|
||||
array('countryName'=> "Australia", 'countryId'=> "2" ),
|
||||
);
|
||||
$countryCombobox =new EJ\ComboBox("countryList");
|
||||
$countryField = new EJ\ComboBox\Field();
|
||||
$countryField->text("countryName")->value("countryId");
|
||||
echo $countryCombobox->dataSource($country)->fields($countryField)->width("100%")->change("onChange")->render();
|
||||
?>
|
||||
</div>
|
||||
<div id="binding">
|
||||
<span class="txt">Select a state</span>
|
||||
<?php
|
||||
$state = array(
|
||||
array('stateName'=> "New York", 'countryId'=> "1", 'stateId'=> "101" ),
|
||||
array('stateName'=> "Virginia", 'countryId'=> "1", 'stateId'=> "102" ),
|
||||
array('stateName'=> "Washington", 'countryId'=> "1", 'stateId'=> "103" ),
|
||||
array('stateName'=> "Queensland", 'countryId'=> "2", 'stateId'=> "104" ),
|
||||
array('stateName'=> "Tasmania", 'countryId'=> "2", 'stateId'=> "105" ),
|
||||
array('stateName'=> "Victoria", 'countryId'=> "2", 'stateId'=> "106" ),
|
||||
);
|
||||
$stateCombobox =new EJ\ComboBox("stateList");
|
||||
$stateField = new EJ\ComboBox\Field();
|
||||
$stateField->text("stateName")->value("stateId");
|
||||
echo $stateCombobox->dataSource($state)->fields($stateField)->width("100%")->enabled(false)->render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onChange(e) {
|
||||
listObj1 = $('#stateList').ejComboBox("instance");
|
||||
listObj1.option({ enabled: true, query: new ej.Query().where('countryId', 'equal', e.model.value) ,value:null});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<?php
|
||||
|
||||
$gameList = array(
|
||||
array('id'=> "level1", 'game'=> "American Football"),
|
||||
array('id'=> "level2", 'game'=> "Badminton"),
|
||||
array('id'=> "level3", 'game'=> "Basketball"),
|
||||
array('id'=> "level4", 'game'=> "Cricket"),
|
||||
array('id'=> "level5", 'game'=> "Football"),
|
||||
array('id'=> "level6", 'game'=> "Golf"),
|
||||
array('id'=> "level7", 'game'=> "Hockey"),
|
||||
array('id'=> "level8", 'game'=> "Rugby"),
|
||||
array('id'=> "level9", 'game'=> "Snooker"),
|
||||
array('id'=> "level10", 'game'=> "Tennis"),
|
||||
);
|
||||
|
||||
$combobox =new EJ\ComboBox("selectGame");
|
||||
$fields = new EJ\ComboBox\Field();
|
||||
$fields->text("game")->value("id");
|
||||
echo $combobox->fields($fields)->dataSource($gameList)->width("100%")->placeholder("Select a Game")->render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<div class="cols-sample-area">
|
||||
<?php
|
||||
$gameList = array(
|
||||
array('id'=> "level1", 'game'=> "American Football"),
|
||||
array('id'=> "level2", 'game'=> "Badminton"),
|
||||
array('id'=> "level3", 'game'=> "Basketball"),
|
||||
array('id'=> "level4", 'game'=> "Cricket"),
|
||||
array('id'=> "level5", 'game'=> "Football"),
|
||||
array('id'=> "level6", 'game'=> "Golf"),
|
||||
array('id'=> "level7", 'game'=> "Hockey"),
|
||||
array('id'=> "level8", 'game'=> "Rugby"),
|
||||
array('id'=> "level9", 'game'=> "Snooker"),
|
||||
array('id'=> "level10", 'game'=> "Tennis"),
|
||||
);
|
||||
|
||||
$combobox =new EJ\ComboBox("selectGame");
|
||||
$fields = new EJ\ComboBox\Field();
|
||||
$fields->text("game")->value("id");
|
||||
echo $combobox->fields($fields)->dataSource($gameList)->width("100%")->placeholder("Select a Game")->create("onCreate")->focus("onFocus")->
|
||||
select("onSelect")->
|
||||
change("onChange")->
|
||||
open("onOpen")->
|
||||
close("onClose")->
|
||||
render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
<div id="Logger" class="box">
|
||||
<h4>Event Trace</h4>
|
||||
<div class="EventLog" id="EventLog"></div>
|
||||
<div>
|
||||
<?php
|
||||
$clearBtn = new \EJ\Button("clearBtn");
|
||||
echo $clearBtn->size("small")->text("Clear")->click("onClear")->type("button")->render();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function onCreate(sender) {
|
||||
jQuery.addEventLog("Combobox control has been <span class='eventTitle'>created</span>.<br/>");
|
||||
}
|
||||
function onFocus(args) {
|
||||
jQuery.addEventLog("ComboBox is in <span class='eventTitle'>focus</span>. ");
|
||||
}
|
||||
function onBlur(args) {
|
||||
jQuery.addEventLog("ComboBox is out of <span class='eventTitle'>focus</span>.");
|
||||
}
|
||||
function onSelect(args) {
|
||||
jQuery.addEventLog("The value '" + args.text + "' 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 onOpen(args) {
|
||||
jQuery.addEventLog("Popup List has been <span class='eventTitle'>opened</span>.");
|
||||
}
|
||||
function onClose(args) {
|
||||
jQuery.addEventLog("Popup List has been <span class='eventTitle'>closed</span>.");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<?php
|
||||
|
||||
$gameList = array(
|
||||
array('id'=> "level1", 'game'=> "American Football"),
|
||||
array('id'=> "level2", 'game'=> "Badminton"),
|
||||
array('id'=> "level3", 'game'=> "Basketball"),
|
||||
array('id'=> "level4", 'game'=> "Cricket"),
|
||||
array('id'=> "level5", 'game'=> "Football"),
|
||||
array('id'=> "level6", 'game'=> "Golf"),
|
||||
array('id'=> "level7", 'game'=> "Hockey"),
|
||||
array('id'=> "level8", 'game'=> "Rugby"),
|
||||
array('id'=> "level9", 'game'=> "Snooker"),
|
||||
array('id'=> "level10", 'game'=> "Tennis"),
|
||||
);
|
||||
|
||||
$combobox =new EJ\ComboBox("selectGame");
|
||||
$fields = new EJ\ComboBox\Field();
|
||||
$fields->text("game")->value("id");
|
||||
echo $combobox->fields($fields)->dataSource($gameList)->width("100%")->placeholder("Select a Game")->allowFiltering(true)->filtering("onfiltering")->render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onfiltering(e) {
|
||||
var query = new ej.Query().select(['game', 'id']);
|
||||
query = (e.text !== '') ? query.where('game', 'startswith', e.text, true) : query;
|
||||
e.updateData(e.model.dataSource, query);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<?php
|
||||
$skillset = array(
|
||||
array('text'=> "Cabbage", 'category'=> "Leafy and Salad"),
|
||||
array('text'=> "Pea", 'category'=> "Leafy and Salad"),
|
||||
array('text'=> "Spinach", 'category'=> "Leafy and Salad"),
|
||||
array('text'=> "Wheatgrass", 'category'=> "Leafy and Salad"),
|
||||
array('text'=> "Yarrow", 'category'=> "Leafy and Salad"),
|
||||
array('text'=> "Chickpea", 'category'=> "Beans"),
|
||||
array('text'=> "Green bean", 'category'=> "Beans"),
|
||||
array('text'=> "Horse gram", 'category'=> "Beans"),
|
||||
array('text'=> "Peanut", 'category'=> "Beans"),
|
||||
array('text'=> "Pigeon pea", 'category'=> "Beans"),
|
||||
array('text'=> "Garlic", 'category'=> "Bulb and Stem"),
|
||||
array('text'=> "Garlic Chives", 'category'=> "Bulb and Stem"),
|
||||
array('text'=> "Lotus root", 'category'=> "Bulb and Stem"),
|
||||
array('text'=> "Nopal", 'category'=> "Bulb and Stem"),
|
||||
array('text'=> "Onion", 'category'=> "Bulb and Stem"),
|
||||
array('text'=> "Shallot", 'category'=> "Bulb and Stem"),
|
||||
array('text'=> "Beetroot", 'category'=> "Root and Tuberous"),
|
||||
array('text'=> "Carrot", 'category'=> "Root and Tuberous"),
|
||||
array('text'=> "Ginger", 'category'=> "Root and Tuberous"),
|
||||
array('text'=> "Potato", 'category'=> "Root and Tuberous"),
|
||||
array('text'=> "Radish", 'category'=> "Root and Tuberous"),
|
||||
array('text'=> "Turmeric", 'category'=> "Root and Tuberous"),
|
||||
);
|
||||
$combobox =new EJ\ComboBox("skillsets");
|
||||
$fields = new EJ\ComboBox\Field();
|
||||
$fields->text("text")->groupBy("category");
|
||||
echo $combobox->fields($fields)->dataSource($skillset)->width("100%")->placeholder("Select a vegetable")->render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
|
||||
<?php
|
||||
|
||||
$socialMedia = array(
|
||||
array('class'=> "mailtools categorize", 'name'=> "Categorize and Move"),
|
||||
array('class'=> "mailtools done", 'name'=> "Done"),
|
||||
array('class'=> "mailtools flag", 'name'=> "Flag & Move"),
|
||||
array('class'=> "mailtools forward", 'name'=> "Forward"),
|
||||
array('class'=> "mailtools movetofolder", 'name'=> "Move to Folder"),
|
||||
array('class'=> "mailtools newmail", 'name'=> "New E-mail"),
|
||||
array('class'=> "mailtools meeting", 'name'=> "New Meeting"),
|
||||
array('class'=> "mailtools reply", 'name'=> "Reply & Delete"),
|
||||
);
|
||||
|
||||
$combobox =new EJ\ComboBox("list");
|
||||
$fields = new EJ\ComboBox\Field();
|
||||
$fields->text("name")->value("name")->iconCss("class");
|
||||
echo $combobox->fields($fields)->dataSource($socialMedia)->width("100%")->placeholder("Select an icon")->render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
.mailtools {
|
||||
display: block;
|
||||
background-image: url('Content/images/dropdownlist/iconsapps.png');
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.mailtools.done {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.mailtools.movetofolder {
|
||||
background-position: 0 -22px;
|
||||
}
|
||||
|
||||
.mailtools.categorize {
|
||||
background-position: 0 -46px;
|
||||
}
|
||||
|
||||
.mailtools.flag {
|
||||
background-position: 0 -70px;
|
||||
}
|
||||
|
||||
.mailtools.forward {
|
||||
background-position: 0 -94px;
|
||||
}
|
||||
|
||||
.mailtools.newmail {
|
||||
background-position: 0 -116px;
|
||||
}
|
||||
|
||||
.mailtools.reply {
|
||||
background-position: 0 -140px;
|
||||
}
|
||||
|
||||
.mailtools.meeting {
|
||||
background-position: 0 -164px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<?php
|
||||
$dm = new EJ\DataManager();
|
||||
$dm->url("//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers");
|
||||
$combobox =new EJ\ComboBox("skillsets");
|
||||
$fields = new EJ\ComboBox\Field();
|
||||
$fields->text("CompanyName")->value("ContactName");
|
||||
echo $combobox->dataSource($dm)->fields($fields)->width("100%")->render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
.e-ddl-popup {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.frame{
|
||||
width : 250px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<div class="cols-sample-area">
|
||||
|
||||
<?php
|
||||
require_once '../EJ/AutoLoad.php';
|
||||
?>
|
||||
<?php
|
||||
$empList = array(
|
||||
array('text'=> "Erik Linden", 'eimg'=> "3", 'desig' => "Representative", 'country' => "England"),
|
||||
array('text'=> "John Linden", 'eimg'=> "6", 'desig' => "Representative", 'country' => "Norway"),
|
||||
array('text'=> "Louis", 'eimg'=> "7", 'desig' => "Representative", 'country' => "Australia"),
|
||||
array('text'=> "Lawrence", 'eimg'=> "5", 'desig' => "Representative", 'country' => "India"),
|
||||
);
|
||||
$combobox =new EJ\ComboBox("skillsets");
|
||||
echo $combobox->dataSource($empList)->width("100%")->headerTemplate("<div class='head'> Photo <span style='padding-left:20px'> Contact Info </span></div>")->itemTemplate("<div><img class='eimg' src='Content/images/Employees/" + ${eimg} + "'.png' alt='employee'/> <div class='ename'> " + ${text} +"</div><div class='temp'> "+ ${country} +" </div></div>")->footerTemplate("<div class='Foot'> Total Items Count: 4 </div>")->placeholder("Select an employee")->render();
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cols-sample-area
|
||||
{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
.head {
|
||||
background-color: #a9a9a9;
|
||||
height: 35px;
|
||||
font-weight: bold;
|
||||
padding: 10px 0 0 18px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.Foot {
|
||||
background-color: #dadada;
|
||||
vertical-align: middle;
|
||||
padding: 16px;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ename {
|
||||
font-weight: bold;
|
||||
display: block !important;
|
||||
opacity: .87;
|
||||
}
|
||||
|
||||
.tempName {
|
||||
padding: 5px 42px;
|
||||
opacity: .87;
|
||||
}
|
||||
|
||||
.temp {
|
||||
margin-top: -10px;
|
||||
opacity: .54;
|
||||
}
|
||||
|
||||
.eimg {
|
||||
border-radius: 50%;
|
||||
padding: 10px 16px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tempImg {
|
||||
padding-bottom: 3px;
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.e-dropdownbase .e-list-item * {
|
||||
display: block;
|
||||
}
|
||||
</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.css");
|
||||
@import url("ej.theme.css");
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import url("../ej.widgets.core.bootstrap.min.css");
|
||||
@import url("ej.theme.min.css");
|
||||
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 158 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 963 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 169 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 4.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 158 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 5.4 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 326 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 9.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 9.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 9.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 326 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 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 |
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче