I have a working EON chart that is not displaying on initial page load resulting in a blank page. If I switch to another browser tab, and then straight back to the graph tab, the graph then shows.
Here is the HTML / JavaScript and the CSS.
Your help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<link rel="stylesheet" type="text/css" href="poolstyle.css">
<head>
</head>
<body>
<script type="text/javascript">
var pubnub = PUBNUB.init ({publish_key: 'xxx',
subscribe_key: 'xxx',
error: function (error) {console.log('Error:', error)}});
var GraphChannel = "xxx";
var h = true;
charttemp = eon.chart({
pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});
</script>
</br>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>
</body>
</html>
Here is the CSS:
.outer {
margin: 0 auto;
width:1500px;
}
.inner{
display: table;
float: left;
width: 30%;
}
Couple things going on here:
move your library references to inside the <head> tags
but the real issue: your EON code is referencing #charttemp but it is not rendered yet because the that <div> is below the EON script and that is why it requires a tab lose focus/gain focus to render first time. So just move your <div>'s above your EON script.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<!-- <link rel="stylesheet" type="text/css" href="poolstyle.css"> -->
</head>
<body>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>
<script type="text/javascript">
var pubnub = PUBNUB.init ({
publish_key: 'pubkey', subscribe_key: 'subkey',
error: function (error) {console.log('Error: ', error)}});
var GraphChannel = "a";
var h = true;
charttemp = eon.chart({
pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});
</script>
</br>
</body>
</html>
Related
I have kendo grid separately in a fiddle,
I have delete function seprately in a fiddle
when I select ThreeDots in each row in the grid it should show delete in small popup and when you click delete confirmation popup should open up.
after I click yes it should delete that particular row and when I slect no it should not
delete.
trying to display my confirmation box for delete in jquery way..providing that code below
can you guys tell me how to combine my code.
providing code and fiddle below
http://jsfiddle.net/cjyh8Lyc/4/
https://jsfiddle.net/9qpLukrL/
<div class="sports">
<div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
<div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
<div class="kendoContent">Are you sure you want to upload file</div>
</div><div class="clearFloat"></div>
<div class="row kendoPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id ="playerDocumentOk" (click)="uploadFile($event,document.value)">OK</button>
<button class="clearBtn" type="button" id ="playerDocumentCancel" (click)="cancel()">Cancel</button>
</div><div class="clearFloat"></div>
</div>
</div>
$('.sports').show();
$('.sports').hide();
#runningDocumentsPopup .sports {
position: relative;
}
.sports .kPopupConfirmationBox {
display: block;
z-index: 3;
left: calc(50% - 175px);
width: 350px;
position: absolute;
}
.sports {
display: none;
}
Not sure what is the purpose of your having delete function in the separate since kendo has built in function that can remove the row.You can attach a javascript function to delete(your code in a separate file for.
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
<script>
var data = [
{ Id: 1, Name: "Decision 1", Position: 1 },
{ Id: 2, Name: "Decision 2", Position: 2 },
{ Id: 3, Name: "Decision 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
//data: data,
transport: {
read: function(e) {
e.success(data);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
editable : true,
navigatable: true,
toolbar: ["save","cancel", "create"],
columns: ["Id", "Name", "Position",{template:"<a class='mybutton'><span class=''></span>ThreeDots</a>"}]
}).data("kendoGrid");
grid.element.on('click','.mybutton',function(){
//var dataItem = grid.dataItem($(this).closest('tr'));
//alert(dataItem.Name + ' was clicked');
//built in kendo function to remove row
grid.removeRow($(this));
})
</script>
</body>
</html>
Jsbin Demo demo with delete confirmation
I am trying to implement ng ui grid but is when i embed it then whole page become horizontally scrollable.
Here is my code
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head >
<title>ISS Core</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--angular grids based ependency -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<style>
.grid {
width: 100%;
height: 50vh;
}
/* angular grip based dependency */
/*$scope.getTableHeight = function() {
var rowHeight = 30; // your row height
var headerHeight = 30; // your header height
return {
height: ($scope.gridData.data.length * rowHeight + headerHeight) + "px"
};
};
$scope.$watchCollection('tableData', function (newValue, oldValue) {
angular.element(element[0].querySelector('.grid')).css($scope.getTableHeight());
});
*/ </style>
<script type="text/javascript">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
var fakeI18n = function( title ){
var deferred = $q.defer();
$interval( function() {
deferred.resolve( 'col: ' + title );
}, 1000, 1);
return deferred.promise;
};
$scope.gridOptions = {
multiSelect : false,
exporterMenuPdf : false,
enableHiding : false,
enableColumnMenus : false,
enableHiding : false,
enableGridMenu : false,
gridMenuTitleFilter: fakeI18n,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableHiding: false },
{ name: 'company' }
],
gridMenuCustomItems: [
{
title: 'Rotate Grid',
action: function ($event) {
this.grid.element.toggleClass('rotated');
},
order: 210
}
],
onRegisterApi: function( gridApi ){
$scope.gridApi = gridApi;
// interval of zero just to allow the directive to have initialized
$interval( function() {
gridApi.core.addToGridMenu( gridApi.grid, [{ title: 'Dynamic item', order: 100}]);
}, 0, 1);
gridApi.core.on.columnVisibilityChanged( $scope, function( changedColumn ){
$scope.columnChanged = { name: changedColumn.colDef.name, visible: changedColumn.colDef.visible };
});
}
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
</script>
</head>
<body>
<div class="container-fluid" >
<div class="row" id="grid" ng-controller="MainCtrl"> <h3 style="background-color: #0a4e8f;color:white;">Arrival Flight List</h3>
<div id="grid1" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div>
<div ng-if='columnChanged'>
Column Visibility Changed - name: {{ columnChanged.name }} visible: {{ columnChanged.visible }}
</div>
</div>
<br>
</div>
</body>
</html>
here is snap shot
how can remove this horizontal scrolling ?
I tried with
body{
overflow-x: hidden;
}
but it also remove scrolling from grid label.
changes in ng ui grid css worked for me
.grid {
width: 99.9%;
height: 50vh;
}
I'm coding an app which, in its main window's javascript code, creates a new window.
Mainwindow.js :
chrome.app.window.create('sample.html', {
id: 'newwindow',
'bounds': {
'width': 200,
'height': 200
},
'resizable' : false,
'alwaysOnTop' : true,
'frame': { type: "none" }
}, function(createdWindow) {
/*here*/
})
sample.html :
<!DOCTYPE html>
<html>
<head>
<title>Chrome app</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div style='background-image: url("img1.png"); height: 50px; width: 200px;'>
</body>
</html>
The thing i'd like to do is to interact with sample.html code inside mainwindow.js, in order to change the path of the background image. Is there a way to do that ?
I'm trying to grab the <title> tag in Codemirror and set it's value as a input[type=text] value. However I keep getting an integer instead of the text.
In this sample it's "HTML5 canvas demo". Of course it changes.
DEMO
$(document).ready(function() {
var dest = $(".projectname");
var editorTitle = editor.getValue().search("<title>");
dest.val(editorTitle).val(dest.val().split(" ").join(""));
});
var delay;
// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'text/html',
tabMode: 'indent',
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseTags: true,
foldGutter: true,
dragDrop : true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
});
// Live preview
editor.on('change', function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview, 300);
.CodeMirror, iframe {
border: 1px solid black;
}
.CodeMirror, iframe, .projectname {
float: left;
}
.CodeMirror {
width: 50%;
}
iframe {
width: 49%;
height: 300px;
border-left: 0;
}
.projectname {
width: 99.4%;
}
<!DOCTYPE html>
<html>
<head>
<title>Codemirror: Grab Title Value</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='IE=9' />
<link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://codemirror.net/lib/codemirror.js'></script>
<link rel='stylesheet' href='http://codemirror.net/lib/codemirror.css'>
<link rel='stylesheet' href='http://codemirror.net/addon/fold/foldgutter.css' />
<script src='http://codemirror.net/javascripts/code-completion.js'></script>
<script src='http://codemirror.net/javascripts/css-completion.js'></script>
<script src='http://codemirror.net/javascripts/html-completion.js'></script>
<script src='http://codemirror.net/mode/javascript/javascript.js'></script>
<script src='http://codemirror.net/mode/xml/xml.js'></script>
<script src='http://codemirror.net/mode/css/css.js'></script>
<script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
<script src='http://codemirror.net/addon/edit/closetag.js'></script>
<script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
<script src='http://codemirror.net/addon/selection/active-line.js'></script>
<script src='http://codemirror.net/keymap/extra.js'></script>
<script src='http://codemirror.net/addon/fold/foldcode.js'></script>
<script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
<script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
<script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
<script src='http://codemirror.net/addon/fold/comment-fold.js'></script>
</head>
<body>
<div>
<input type="text" class="projectname" placeholder="Find title tag in editor and add what's inside it here..." />
</div>
<textarea id='code' name='code'><!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
</head>
<body>
hello world!
</body>
</html></textarea>
<iframe id='preview'></iframe>
</body>
</html>
The integer you are getting is the index of "<" in the title tag. To get the title you can use regEx.
var content = editor.getValue();
var openTagIndex = content.search(/<title/);
var closeTagIndex = content.search(/<\/title>/);
var titleTag = content.slice(openTagIndex , closeTagIndex);
var editorTitle = titleTag.slice(titleTag.search(/>/) + 1);
I am trying to use the Flot JavaScript plotting library (version 0.8.2) and excanvas.js to adapt it to IE8.
Calling $.plot(plotPlaceholder, data, options); I get the JS error 'fillStyle' is null or not an object on excanvas.js, line 230, character 5, which corresponds to a snippet:
function copyState(o1, o2) {
o2.fillStyle = o1.fillStyle;
...
}
Here is my index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
<script src="jquery.flot.js" type="text/javascript" ></script>
<script>
$(document).ready(function() {
data = []
data.push({data: [[63.62, 16.93]], label: 0, color: "red"});
data.push({data: [[56.1, 13.11]], label: 1, color: "blue"});
data.push({data: [[30, 13]], label: 2, color: "green"});
var options = {};
plotPlaceholder = ".results-container";
var plot = $.plot(plotPlaceholder, data, options);
});
</script>
</head>
<body>
<div class="plot-container">
<div class="results-container" style="width: 600px; height: 300px; margin:auto;"></div>
</div>
</div>
</body>