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>
Related
I'm trying to add more options to each row of the ui-grid so I'm implementing "3 dots" approach. However I came across this issue that my dropdown menu goes over the screen because it has position: absolute applied to it. I can't use position: relative because each row and especially the ui-grid has overflow: hidden styling applied which I can't bypass.
I have been using the dropdown-append-to-body="true" directive to do append it to body but this is what makes it go over the screen.
My expected end result is my dropdown menu to stay on the screen. I could just write some styling to display it like 10px on the right of the window but not all of my ui-grids are that wide so it would have been odd that on one of my ui-grids dropdown menu opens far on the right hand side while its width is 50% of the screen.
What can I do to sort this out?
var myApp = angular.module("myApp", ['ui.bootstrap', 'ui.grid']);
myApp.controller("myController", function () {
var vm = this;
vm.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
enableColumnMenus: false,
data: [
{ col1: 'Blah', col2: 'Blah' }
]
}
vm.gridOptions.columnDefs = [
{ name: 'col1', displayName: 'Column 1' },
{ name: 'col2', displayName: 'Column 2' },
{ name: 'col3', displayName: 'Column 3' },
{ name: 'col4', displayName: 'Column 4' },
{ name: 'col5', displayName: 'Column 5' },
{ name: 'more', displayName: '', enableSorting: false, minWidth: 55, maxWidth: 70,
cellTemplate:
'<div class="ui-grid-cell-contents text-center">' +
'<span uib-dropdown dropdown-append-to-body="true">' +
'<i class="ion-ios-more" uib-dropdown-toggle title="More options"></i>' +
'<ul class="dropdown-menu" uib-dropdown-menu role="menu">' +
'<li><a>Option 1</a></li>' +
'<li><a>Option 2</a></li>' +
'<li><a>Option 3</a></li>' +
'</ul>' +
'</span>' +
'</div>'
}
];
});
body {
overflow-x: hidden;
}
.ion-ios-more {
font-size: 24px;
}
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body ng-app="myApp">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.js"></script>
<div ng-controller="myController as vm">
<div id="my-grid" ui-grid="vm.gridOptions"></div>
</div>
</body>
Following changes will help you to place your menu on right place
1) make custom class in your JSP.
.custom{
right: 0 !important;
left: auto !important;
}
2) add changes to your UL tag.
<ul class="dropdown-menu pull-right custom" uib-dropdown-menu role="menu" >
var myApp = angular.module("myApp", ['ui.bootstrap', 'ui.grid']);
myApp.controller("myController", function () {
var vm = this;
vm.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
enableColumnMenus: false,
data: [
{ col1: 'Blah', col2: 'Blah' }
]
}
vm.gridOptions.columnDefs = [
{ name: 'col1', displayName: 'Column 1' },
{ name: 'col2', displayName: 'Column 2' },
{ name: 'col3', displayName: 'Column 3' },
{ name: 'col4', displayName: 'Column 4' },
{ name: 'col5', displayName: 'Column 5' },
{ name: 'more', displayName: '', enableSorting: false, minWidth: 55, maxWidth: 70,
cellTemplate:
'<div class="ui-grid-cell-contents text-center">' +
'<span uib-dropdown dropdown-append-to-body="true">' +
'<i class="ion-ios-more" uib-dropdown-toggle title="More options"></i>' +
'<ul class="dropdown-menu pull-right custom" uib-dropdown-menu role="menu" >' +
'<li><a>Option 1</a></li>' +
'<li><a>Option 2</a></li>' +
'<li><a>Option 3</a></li>' +
'</ul>' +
'</span>' +
'</div>'
}
];
});
body {
overflow-x: hidden;
}
.custom{
right: 0 !important;
left: auto !important;
}
.ion-ios-more {
font-size: 24px;
}
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body ng-app="myApp">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.js"></script>
<div ng-controller="myController as vm">
<div id="my-grid" ui-grid="vm.gridOptions"></div>
</div>
</body>
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"
How could I set a horizontal title for X axis and a vertical title for axis Y in Kendo chart ?
For example , for this chart I want to set titles (Month and VISITORS) as in this image -
valueAxis:[{
title: {
text: "My Text X"
}
}],
title:{
text: "My Text Y",
position: "bottom"
}
Thanks for this, it was very helpful when solving my problem, which was similar. I edited the example accordingly: http://dojo.telerik.com/OBOZefEr/2 I've put the entire code snipped below, you're welcome to run it from here.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors Stats \n /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
},
title: {
text: "VISITORS"
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
},
title: {
text: "Month"
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
Ive managed to update the first few bars to have values changed manually by sliders on a normal javascript barchart.
http://jsfiddle.net/ZmnWq/68/
HTML
<div style="margin: 20px 0px 0px 60px">
<form oninput="output1.value=slider1.value">
<input type="range" name="slider1" id="slider1"/>
<output name="output1" for="slider1"></output>
</form>
<form oninput="output2.value=slider2.value">
<input type="range" name="slider2" id="slider2"/>
<output name="output2" for="slider2"></output>
</form>
<button id="updater">Update</button>
</div>
JavaScript
$(document).ready(function() {
var chartColumn = new Highcharts.Chart({
chart: {
renderTo: 'chart-column',
type: 'column',
backgroundColor: null
},
title: {
text: 'Percentage of rainfall'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
credits: {
enabled: false
},
yAxis: {
max: 100,
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
enabled: false,
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Air Consumption',
data: [42, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
var $slider = $("#updater");
$slider.bind('click', function(e) {
e.preventDefault();
chartColumn.series[0].data[0].update(parseInt($("#slider1").val()));
chartColumn.series[0].data[1].update(parseInt($("#slider2").val()));
});
});
CSS
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
input[type="range"] {
-webkit-appearance: none;
background-color: rgb(144, 144, 144);
height: 3px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 11px;
height: 15px;
border:solid black 1px;
background:#ffffff;
-webkit-border-radius: 4px;
}
But i want to be able to make a better looking graph provided by nvd3
What i've managed to do is change an example to this
http://jsfiddle.net/0zsdmpd2/7/
HTML
<div id="chart">
<svg></svg>
</div>
</div>
<form oninput="output1.value=slider1.value">
<input type="range" name="slider1" id="slider1" />
<output name="output1" for="slider1"></output>
</form>
<form oninput="output2.value=slider2.value">
<input type="range" name="slider2" id="slider2" />
<output name="output2" for="slider2"></output>
</form>
<button id="updater">Update</button>
</div>
JavaScript
var data = [
[{
"key": "Previous","values":
[
['Resistance', 41.27, 0],
['fuel consumed', 47.96, 1],
['fuel cost', 44.65, 2]
]
}, {
"key": "Current","values":
[
['Resistance', 40.48, 0],
['fuel consumed', 45.82, 1],
['fuel cost', 40.16, 2]
]
}]
];
var n = 0;
nv.addGraph(function () {
var chart = nv.models.multiBarChart()
.x(function (d) {
return d[0];
})
.y(function (d) {
return d[1];
})
.color(['#84c1ea', '#1f77b4'])
.forceY([0, 100])
.reduceXTicks(false)
.stacked(false)
.showControls(false)
.margin({
left: 50,
right: 30
});
chart.xAxis.showMaxMin(true)
.tickFormat['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
chart.yAxis.tickFormat['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
d3.select("#chart svg")
.datum(data[n])
.transition().duration(500).call(chart);
var $slider = $("#updater");
$slider.bind('click', function(e) {
e.preventDefault();
chartColumn.Previous[0].values[0].update(parseInt($("#slider1").val()));
chartColumn.Previous[0].values[1].update(parseInt($("#slider2").val()));
});
});
Css
#chart svg {
height: 400px;
}
However, I have no idea how to use the slider to manually update the values in the graph inside the nvd3 barchart. The update button not updating the values.
Any help is deeply appreciated, as i am new to html and javascript coding, but trying to do my best to complete a job given to me.
(updated nvd3 jsfiddle graph)
Am using JqxPanel, JqxDocking and JqxChart.
JqxPanel consists Docking windows which are working fine. when i used to place JqxChart into a window Chrome giving error Error: Invalid negative value for attribute height="-1" (repated 2 times) at tag
Please some one can help me in this regard
JavaScript deviceschart.js
var DevicesgenerateData = function () {
var devicedata = new Array();
var deviceNames =
[
"Working", "GPS Antenna","Power Removed","SIM Problem","Servicing","Damaged"
];
var deviceNos =
[
10,10,30,10,20,20
];
for (var i = 0; i < 6; i++) {
var devicerow = {};
devicerow["devicenames"] = deviceNames[i];
devicerow["devicenos"] = deviceNos[i];
devicedata[i] = devicerow;
}
return devicedata;
}
var devicesource =
{
localdata: DevicesgenerateData(),
datafields: [
{ name: 'devicenames' },
{ name: 'devicenos' }
],
datatype: "array"
};
var ddataAdapter = new $.jqx.dataAdapter(devicesource);
//, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
//$('#jqxChart').jqxChart({borderColor: 'Blue'});
// prepare jqxChart settings
var devicesettings = {
//title: "Mobile browsers share in Dec 2011",
// description: "(source: wikipedia.org)",
enableAnimations: true,
borderColor: 'Red',
showLegend: true,
legendLayout: { left: 210, top: 50, width: 100, height: 200, flow: 'vertical' },
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: ddataAdapter,
colorScheme: 'scheme02',
seriesGroups:
[
{
type: 'pie',
showLabels: true,
series:
[
{
dataField: 'devicenos',
displayText: 'devicenames',
labelRadius: 70,
initialAngle: 15,
radius: 95,
centerOffset: 0,
formatSettings: { sufix: '%', decimalPlaces: 1 }
}
]
}
]
};
<link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
<script type="text/javascript" src="js/gettheme.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jqxcore.js"></script>
<script type="text/javascript" src="js/jqxscrollbar.js"></script>
<script type="text/javascript" src="js/jqxbuttons.js"></script>
<script type="text/javascript" src="js/jqxpanel.js"></script>
<script type="text/javascript" src="js/jqxwindow.js"></script>
<script type="text/javascript" src="js/jquery.global.js"></script>
<script type="text/javascript" src="js/jqxdocking.js"></script>
<script type="text/javascript" src="js/jqxsplitter.js"></script>
<script type="text/javascript" src="js/jqxchart.js"></script>
<script type="text/javascript" src="js/jqxdata.js"></script>
<script type="text/javascript" src="js/deviceschart.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Create jqxPanel
var theme = getTheme();
$("#panel").jqxPanel({ width: "100%", height: 350, theme: theme });
$('#maindocking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 990, mode: 'docked' });
$('#maindocking').jqxDocking('disableWindowResize', 'window1');
$('#maindocking').jqxDocking('disableWindowResize', 'window2');
$('#maindocking').jqxDocking('disableWindowResize', 'window3');
$('#maindocking').jqxDocking('disableWindowResize', 'window4');
$('#maindocking').jqxDocking('disableWindowResize', 'window5');
$('#maindocking').jqxDocking('disableWindowResize', 'window6');
$('#jqxChart').jqxChart(devicesettings);
});
</script>
</head>
<body class='default'>
<div id='panel' style=" font-size: 13px; font-family: Verdana;">
<div id="maindocking">
<div id="column1docking">
<div id="window1" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
<div id="jqxChart"></div>
</div>
</div><!-- window1--->
<div id="window2" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window2--->
</div><!-- Column1 Docking-->
<div id="column2docking">
<div id="window3" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window3--->
<div id="window4" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window4--->
</div><!-- Column2 Docking-->
<div id="column3docking">
<div id="window5" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window5--->
<div id="window6" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window6--->
</div><!-- Column3 Docking-->
</div> <!-- MainDocking -->
</div> <!-- Panel -->
</body>
I had the same issue , I solved it by setting the width of the containing div to be large enough to contain the chart given the settings specified .
<div id="jqxChart" style="width:680px; height:400px; vertical-align: top; display: inline-block; padding: 10px;">
Hope this helps
#Anon, Thank you for that solution. I had the same issue, but with "Raphael" framework (raphael-2.1.0.js) for drawing charts, with the same error messages as OP. Removing the max-width (css) of a parent element solved my issue.
(This was posted as solution because 50 reputation was required to add a comment to Anon's solution.)
For me this turned out to be the case because I embedded the chart in a tab div that wasn't visible on page load. When I move it to a tab that's visible on page load it works.
So I was getting this error because the data that was supplied did not entirely match my series in the seriesGroups. Some of the data was not defined correctly so when I first tried drawing the chart their code didn't like what was missing and coughed up several of these errors.
Further, I wanted to try to update my chart using new data and new seriesGroups. In making a change like that I have to call jqxChart and update the seriesGroups before changing other data.
if (chartTableArea.jqxChart("isInitialized") === true) {
if (gSettings === undefined || gSettings.title === undefined) {
gSettings = getSettings(); //sets up the gSettings
}
chartTableArea.jqxChart({ seriesGroups: gSettings.seriesGroups });
chartTableArea.jqxChart(gSettings);
} else {
//not initialized
chartTableArea.jqxChart(getSettings());
}