We Keep Coding

Vue js data binding doesn't work

I'm trying to create a vue component but whenever I want to hide some elements with v-show it doesn't work.
When you click any element on the list I want to hide it and on the click event element.visible is set to false, so in the component template I bind that value to v-show but it wont hide.
I guess it's because element.visible it's kind of nested attribute but I'm not really sure.
var collection = [
{ id: 1, name: 'element 1' },
{ id: 2, name: 'element 2' },
{ id: 3, name: 'element 3' },
{ id: 4, name: 'element 4' },
{ id: 5, name: 'element 5' },
{ id: 6, name: 'element 6' },
{ id: 7, name: 'element 7' },
{ id: 8, name: 'element 8' },
];
var multiselect = {
props: ['collection'],
data: function() {
return {
subscribed: [],
toSubscribe: [],
toUnsubscribe: [],
dataset: []
}
},
mounted: function(){
this.dataset = _.map(this.collection, function(element){
element.visible = true;
return element;
});
},
methods: {
subscribe: function(element){
element.visible = false;
}
}
}
new Vue({
el: '#app',
components: {
'multiselect': multiselect
},
data: {
elements: collection
}
})
.multiselect .list {
border: 1px solid #000;
height: 215px;
max-height: 215px;
overflow: scroll;
}
.multiselect .list .list-element {
text-align: center;
padding: 0.2em;
cursor: pointer;
}
.multiselect .list .list-element:hover {
background-color: #d6dbdf;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.4/lodash.min.js"></script>
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<div id="app">
<multiselect inline-template :collection="elements">
<div class="col-sm-12 multiselect">
<div class="col-sm-5 list">
<div class="col-sm-12">
<div v-for="element in dataset" class="list-element" #click="subscribe(element)" v-show="element.visible">
{{element.name}}
</div>
</div>
</div>
<div class="col-sm-2">
<button class="btn btn-primary btn-fill">
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</button>
<button class="btn btn-primary btn-fill">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</button>
</div>
<div class="col-sm-5 list">
</div>
</div>
</multiselect>
</div>

As an interesting variation, you don't need to clone the collection elements or set a property on them.
It is enough to have a parallel array of flag, but you have to be careful of the syntax to update them and the flag must be contained in an object in order to be observable.
i.e an array of { visible: true } rather than an array of true.
Ref: Mutation-Methods
var collection = [
{ id: 1, name: 'element 1' },
{ id: 2, name: 'element 2' },
{ id: 3, name: 'element 3' },
{ id: 4, name: 'element 4' },
];
var multiselect = {
props: ['collection'],
data: function() {
return {
visibleFlags: []
}
},
created: function(){
this.collection.forEach(x => {
this.visibleFlags.push({visible: true}); // Vue mutation method
})
},
methods: {
subscribe: function(index){
this.$set(this.visibleFlags, index, false)
}
}
}
new Vue({
el: '#app',
components: {
'multiselect': multiselect
},
data: {
elements: collection
}
})
.multiselect .list {
border: 1px solid #000;
height: 125px;
max-height: 215px;
overflow: scroll;
}
.multiselect .list .list-element {
text-align: center;
padding: 0.2em;
cursor: pointer;
}
.multiselect .list .list-element:hover {
background-color: #d6dbdf;
}
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<div id="app">
<multiselect inline-template :collection="elements">
<div class="col-sm-12 multiselect">
<div class="col-sm-5 list">
<div class="col-sm-12">
<div v-for="(element, index) in collection"
class="list-element" v-show="visibleFlags[index].visible"
#click="subscribe(index)">
{{element.name}}
</div>
</div>
</div>
</div>
</multiselect>
</div>

The problem is that you are modifying an already-responsive object. Vue cannot detect property additions.
It's obscured by the fact that you're copying via map, and assigning it to a new array, but it's an array of references to responsive objects, to each of which you have added the visible property. If you examine the data items in the parent, you'll see that it gets visible added, too.
The minimal fix is to use Object.assign to create a new object and copy properties into it. This way all properties are inserted into a non-responsive object, which is then made responsive during assignment.
mounted: function(){
this.dataset = _.map(this.collection, function(element){
return Object.assign({}, element, {visible: true});
});
},
You could do this in created, since you don't need the DOM element.

Gridstact: make widget static and type error

I am a newer for javascript and gridstack. My job is creating a dashboard based on gridstack. The most close example for my goal is demo example knockout.html. Also, I need add on several new features based on this example. Here is the problem I am facing.
I need add a dropdown menu to each widget and it is added to the template, please refer the code attached below. Now I am using a button for toggling the drop menu. Is that possible for me to use the mouse right click to show the dropdown menu?
When I added the method named toggleDropdownMenu, I am getting a type error as "TypeError: this.toggleDropdownMenu is not a function", is this function should be defined somewhere?
I want to make specified widget to be a static. I added a attr settings when create the widget like staticGrid: true but does not work. How can fix this?
For each dash board, the dropdown menu is different for each widget. How can I attach dropdown menu with different items for each widget?
Please refer the code... Thank you very much for any advices!
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dash board demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./dist/gridstack.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="./dist/gridstack.js"></script>
<style type="text/css">
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
.grid-stack-item-content button{
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
color: white;
position: relative;
}
.grid-stack-item-content　.dropdown-submenu {
position: relative;
}
.grid-stack-item-content .dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Dashboard Demo</h1>
<div>
<button data-bind="click: addNewWidget">Add new widget</button>
</div>
<br>
<div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
</div>
<script type="text/javascript">
ko.components.register('dashboard-grid', {
viewModel: {
createViewModel: function (controller, componentInfo) {
var ViewModel = function (controller, componentInfo) {
var grid = null;
this.widgets = controller.widgets;
this.afterAddWidget = function (items) {
if (grid == null) {
grid = $(componentInfo.element).find('.grid-stack').gridstack({
auto: false
}).data('gridstack');
}
var item = _.find(items, function (i) { return i.nodeType == 1 });
grid.addWidget(item);
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
grid.removeWidget(item);
});
};
};
return new ViewModel(controller, componentInfo);
}
},
template:
[
'<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
' <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
' <div class="grid-stack-item-content">',
//' <button data-bind="click: $root.deleteWidget">Delete me</button>',
' <div class="dropdown">',
' <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Click me',
' <span class="caret"></span>',
' </button>',
' <ul class="dropdown-menu">',
' <li data-bind="click: $root.deleteWidget"><a tabindex="-1" href="#">Delete</a></li>',
' <li><a tabindex="-1" href="#">Change Color</a></li>',
' <li><a tabindex="-1" href="#">Copy to</a></li>',
' <li class="dropdown-submenu">',
' <a class="plan" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>',
' <ul class="dropdown-menu">',
' <li><a tabindex="-1" href="#">2nd level dropdown</a></li>',
' <li><a tabindex="-1" href="#">2nd level dropdown</a></li>',
' <li class="dropdown-submenu">',
' <a class="test" href="#">Another dropdown <span class="caret"></span></a>',
' <ul class="dropdown-menu">',
' <li>3rd level dropdown</li>',
' <li>3rd level dropdown</li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' </ul>',
' </div>',
' </div>',
' </div>',
'</div> '
].join('')
});
$(function () {
var Controller = function (widgets) {
var self = this;
this.widgets = ko.observableArray(widgets);
this.addNewWidget = function (i) {
this.widgets.push({
x: 0,
y: 0,
id: 'widget'+i,
width: i== 0 ? 2 : 1, //Math.floor(1 + 3 * Math.random()),
height: i== 0 ? 2 : 1, //Math.floor(1 + 3 * Math.random()),
auto_position: true
});
return false;
};
this.deleteWidget = function (item) {
self.widgets.remove(item);
return false;
};
/**
this.toggleDropdownMenu(function(){
$('.dropdown-submenu a.test').on("click", function(e)
{
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
**/
};
var widgets = [
{x: 0, y: 0, width: 2, height: 2, staticGrid: true },
{x: 2, y: 0, width: 1, height: 1},
{x: 3, y: 1, width: 2, height: 2},
{x: 1, y: 2, width: 1, height: 1}
];
var controller = new Controller(widgets);
ko.applyBindings(controller);
});
</script>
</body>
</html>

Changing language in Kendo UI

I use Kendo UI to create grids. I use opcion data-filterable to filter data.
I would like to change language from English to Polish.
How should I do it?
Below, you can find my script . I would like to exchange " Is equal to " on polish equivalent.
var viewModel;
viewModel = kendo.observable({
isVisible: true,
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID",
fields: {
login: {type: "string"},
naz_druk: {type: "string"},
naz_wys: {type: "string"},
zabl: {type: "string"},
arch: {type: "string"},
ost_log: {type: "date"},
il_log: {type: "number"},
gen_zap: {type: "number"},
il_zap: {type: "number"}
}
}
},
batch: true,
data: [{
"login": "AGCDE",
"naz_druk": "Jan Kowalski",
"naz_wys": "Jan Kowalski",
"zabl": "TAK",
"arch": "NIE",
"ost_log": "12/12/2016",
"il_log": "5",
"gen_zap": "5",
"il_zap": "5"
},
{
"login": "bbbGCDE",
"naz_druk": "Jan Nowak",
"naz_wys": "Jan Nowak",
"zabl": "NIE",
"arch": "NIE",
"ost_log": "12/06/2016",
"il_log": "2",
"gen_zap": "2",
"il_zap": "2"
}]
})
});
kendo.bind($("#oknoGlowne"), viewModel);
meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<!--<link rel="stylesheet" type="text/css" href="format_cs.css">-->
<base href="http://demos.telerik.com/kendo-ui/grid/mvvm">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.uniform.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<div>
<!-- Container glówne okno-->
<div id="oknoGlowne"
data-role="window"
data-title="Lista użytkowników"
data-bind="visible: isVisible"
data-width="800"
data-height="400"
style="padding:0; border: none;"
data-actions="[
'Pin',
'Minimize',
'Maximize',
'Close',
]"
>
<div data-role="splitter"
data-orientation="vertical"
data-panes="[{
collapsible: false,
resizable: false,
size: '30px'
},{
collapsible: false,
resizable: true
}]"
style="height: 100%; border: none;">
<!-- Główny div-->
<div>
<!-- Menu główne-->
<div class="menuGlowne"
data-role="menu"
data-resizable="true"
data-bind="events: { select: onMenuSelect }"
style="width: 100%; border: none;background-color: lightgray; ">
<li><input class="search"
style="width:150px;"
data-spinners="false"
placeholder="Rola"></li>
<li><input class="search"
style="width:150px;"
data-spinners="false"
placeholder="Loginid"></li>
<li data-menu-id="dodajUzytkownika"
data-title="Dodaj użytkownika"
data-role="tooltip"
data-auto-hide="true"
data-position="top">
<span class="fa fa-plus"></span></li>
<li data-menu-id="edycjauzytkownika"
data-title="Edytuj/uzupełnij dane użytkownika"
data-role="tooltip"
data-auto-hide="true"
data-position="top">
<span class="fa fa-pencil-square-o"></span></li>
</div>
<div>
<div data-role="grid"
data-editable="false"
data-sortable="true"
data-pageable='{
"previousNext": true,
"numeric": true,
"pageSizes": true,
"info": true
}'
data-resizable="true"
data-columns="[
{ 'field': 'login', 'width': 50, 'title' : 'Login'},
{ 'field': 'naz_druk','width': 50, 'title' : 'Nazwa drukowana' },
{ 'field': 'naz_wys','width': 50, 'title' : 'Nazwa wyświetlana' },
{ 'field': 'zabl','width': 20, 'title' : 'Zablokowany' },
{ 'field': 'arch','width': 20, 'title' : 'Zarchiwizowany' },
{ 'field': 'ost_log','width': 50, 'title' : 'Ostatnie logowanie','format': '{0:MM/dd/yyyy}' },
{ 'field': 'il_log','width': 20, 'title' : 'Ilość logowań' },
{ 'field': 'gen_zap','width': 20, 'title' : 'Wygenerowane zapytania' },
{ 'field': 'il_zap', 'width': 20,'title' : 'Ilość zapytań' },
]"
data-bind="source: products,
visible: isVisible,
events: {
save: onSave
}"
data-filterable="[
{ field: 'login', operator: 'startswith' },
{ field: 'naz_druk', operator: 'startswith' },
{ field: 'naz_wys', operator: 'startswith' },
{ field: 'zabl', operator: 'startswith' },
{ field: 'arch', operator: 'startswith' },
{ field: 'ost_log', operator: 'startswith' },
{ field: 'il_log', operator: 'startswith' },
{ field: 'gen_zap', operator: 'startswith' },
{ field: 'il_zap', extra: 'false', operator: 'number' },
]"
style="height: 100%; border: none;">
</div>
</div>
</div>
</div>
</div>

have you tried to search here?
http://docs.telerik.com/kendo-ui/framework/localization/overview

In general, you can do kendo.culture("en-US") to change it to English (change value for Polish iso code), but you also need to include the culture js file for the languages you support. If you want a hybrid (mainly english with Polish on the menu), you will have to manually set those messages yourself. You can do so with calls to override the messages directly like this:
kendo.ui.FilterCell.prototype.options.operators.string.eq = "Some Value"

Kendo grid Hyperlink

I have a table with 4 columns. [ID,FIRSTNAME,LASTNAME,ADDRESS]. I am displaying the 3 cloumns[ID,FIRSTNAME,LASTNAME] on the kendogrid. What i am trying to do is on clicking the FIRSTNAME it should display the ADDRESS on a new window.But i am not getting it. I tried to get the link on the FIRSTNAME but dont know how to proceed later. i am new to this concept.Below is my code.Do i need to create a kendo grid for the Address or how it works.What i want is a hyperlink on ID to show ADDRESS.
Thanks.
Grid = $("#grid").kendoGrid({
dataSource:gridDS,
height: 450,
pageable: false,
sortable: true,
binding: true
columns: [
{
field: "ID",
title: "ID",
headerTemplate: '<span class="tbl-hdr">ID</span>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
},
width: 85
},
{
field: "FIRSTNAME",
title: "FIRSTNAME",
headerTemplate: '<span class="tbl-hdr">FIRSTNAME</span>',
template: '#=ADDRESS#',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
},
width: 25
},
{
field: "LASTNAME",
title: "LASTNAME",
headerTemplate: '<span class="tbl-hdr">LASTNAME</span>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
},
width: 85
},
{
command: [
{
name: "destroy",
template: "<div class='k-button delete-btn'><span class='k-icon k-delete'></span></div>",
text: "remove"
},
{
text: "Edit",
template: "<div class='k-button edit-btn'><span class='k-icon k-edit'></span></div>",
},
],
width: 40,
attributes: {
style: "vertical-align: top; text-align: center;"
}
},
],
editable: "popup"
}).data('kendoGrid');
}

I think this is not a kendo issue, is pretty much about JS/jQuery. What I suggest is to bind an event on the grid to get all click events from that link in your template. Then, you can get the clicked dataItem with the row data of it.
.on("click", "a.name-link", function() {
var tr = $(this).closest("tr");
var dataItem = $("#grid").data("kendoGrid").dataItem(tr);
window.alert(dataItem.Address);
});
Working Demo
What is unclear is how you want to open a new window with the Address. What you mean:A fresh new browser tab/window or anything like a JS Popup inside your app?
If you want a new browser tab/window, you should pass the row id to it using window.open() and then in this window, you will have to hit the database again to show the information. Now, if want a javascript popup(e.g. Bootstrap's Modal) inside your app, you can use the previous retrieved dataItem to fill it. The information is already there.

I updated the code. You can click on firstName to view address.
If you want to go a little bit further, you can click on Address button to view address in pop-up window.
Sample at Telerik Kendo UI Dojo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<style type="text/css">
a {
cursor: pointer;
text-decoration: underline;
}
.k-grid-update {
display: none;
}
</style>
</head>
<body>
<script id="row-template" type="text/x-kendo-tmpl">
<a onclick="display('#=address#')">#=firstName#</a>
</script>
<script id="popup-editor" type="text/x-kendo-template">
#=address#
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "firstName", template: kendo.template($("#row-template").html()) },
{ field: "lastName" },
{ command: [{ name: "edit", text: { edit: "Address", cancel: "Close", update: "Close" } }]
}
],
dataSource: {
data: [
{ id: 1, firstName: "Jane", lastName: "Doe", address: "123 Street" },
{ id: 2, firstName: "John", lastName: "Doe", address: "456 Street" }
],
schema: {
model: { id: "id" }
}
},
editable: {
mode: "popup",
window: { title: 'Address' },
template: kendo.template($("#popup-editor").html())
}
});
function display(address) {
alert(address);
}
</script>
</body>
</html>

getting error a.ownerDocument.defaultView is null

I am using jqxwidget. While integrating the widgets I have used jqxgrid , jqxwindow and jqxtabs
When I implement the jqxtabs I face the javascript error a.ownerDocument.defaultView
and my editor stops working.
How can I solve this issue?
I have added following code:
var initWidgets = function (tab) {
switch (tab) {
case 0:
initGrid();
break;
}
}
$('#jqxTabs').jqxTabs({ width: 'auto', height: 'auto'});
I have added my code to submit my form inside the function initGrid.

Have you tried to init the widgets within the jQWidgets Tabs initTabContent function? Example: jQWidgets Tabs Integration with UI Widgets
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This demo shows how to integrate jqxTabs with other widgets.
</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var initGrid = function () {
var source =
{
datatype: "csv",
datafields: [
{ name: 'Date' },
{ name: 'S&P 500' },
{ name: 'NASDAQ' }
],
url: '../sampledata/nasdaq_vs_sp500.txt'
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
$("#jqxGrid").jqxGrid(
{
width: '100%',
height: '84%',
source: dataAdapter,
columns: [
{ text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 },
{ text: 'S&P 500', datafield: 'S&P 500', width: 150 },
{ text: 'NASDAQ', datafield: 'NASDAQ' }
]
});
}
var initChart = function () {
// prepare the data
var source =
{
datatype: "csv",
datafields: [
{ name: 'Date' },
{ name: 'S&P 500' },
{ name: 'NASDAQ' }
],
url: '../sampledata/nasdaq_vs_sp500.txt'
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// prepare jqxChart settings
var settings = {
title: "U.S. Stock Market Index Performance (2011)",
description: "NASDAQ Composite compared to S&P 500",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
dataField: 'Date',
formatFunction: function (value) {
return months[value.getMonth()];
},
toolTipFormatFunction: function (value) {
return value.getDate() + '-' + months[value.getMonth()];
},
type: 'date',
baseUnit: 'month',
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
showGridLines: true,
gridLinesInterval: 3,
gridLinesColor: '#888888',
valuesOnTicks: false
},
colorScheme: 'scheme04',
seriesGroups:
[
{
type: 'line',
valueAxis:
{
displayValueAxis: true,
description: 'Daily Closing Price',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'S&P 500', displayText: 'S&P 500' },
{ dataField: 'NASDAQ', displayText: 'NASDAQ' }
]
}
]
};
// setup the chart
$('#jqxChart').jqxChart(settings);
}
// init widgets.
var initWidgets = function (tab) {
switch (tab) {
case 0:
initGrid();
break;
case 1:
initChart();
break;
}
}
$('#jqxTabs').jqxTabs({ width: 600, height: 560, initTabContent: initWidgets });
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id='jqxTabs'>
<ul>
<li style="margin-left: 30px;">
<div style="height: 20px; margin-top: 5px;">
<div style="float: left;">
<img width="16" height="16" src="../../images/catalogicon.png" />
</div>
<div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
US Indexes</div>
</div>
</li>
<li>
<div style="height: 20px; margin-top: 5px;">
<div style="float: left;">
<img width="16" height="16" src="../../images/pieicon.png" />
</div>
<div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
NASDAQ compared to S&P 500</div>
</div>
</li>
</ul>
<div style="overflow: hidden;">
<div id="jqxGrid">
</div>
<div style="margin-top: 10px; height: 15%;">
The S&P 500 index finished 2011 less than a point away from where it ended 2010
-- 0.04 points down to be exact. That's the smallest annual change in history. At
its peak in April, the S&P had climbed more than 8%. But by October, at the lowest
levels of the year, it was down more than 12%. The Nasdaq, meanwhile, lost 1.8%
for the year.</div>
</div>
<div style="overflow: hidden;">
<div id='jqxChart' style="width: 100%; height: 100%">
</div>
</div>
</div>
</div>
</body>
</html>