I am using DyGraph from https://smartadmin-ng2.github.io/#/graphs/dygraphs. I want to control two dygraph with one showRangSelector. Right now both dygraph has own rang selector. But I want to control with one rang selector, Because both rang selector has same work. Show I want to show one screen shot for more understanding.
dygraphsNoRollTimestamp.js
angular.module('app.xyz').directive('dygraphsNoRollTimestamp', function (DygraphsDataDemo) {
return {
restrict: 'A',
compile: function () {
return {
post: function (scope, element) {
new Dygraph(element[0], DygraphsDataDemo.data_total_volume, {
customBars: true,
title: '',
ylabel: 'Total Volume',
legend: 'always',
labelsDivStyles: {
'textAlign': 'right'
},
showRangeSelector: true
});
}
}
}
}
});
dygraphsNoRollPeriod.js
'use strict';
angular.module('app.xyz').directive('dygraphsNoRollPeriod', function (DygraphsDataDemo) {
return {
restrict: 'A',
compile: function () {
return {
post: function (scope, element) {
new Dygraph(element[0], DygraphsDataDemo.data_temp, {
customBars: true,
title: '',
ylabel: 'Total Volume',
legend: 'always',
showRangeSelector: true
});
}
}
}
}
});
DygraphsDataDemo.js
angular.module('app.air').factory('directory', function(){
function data_temp() {
return "Date,NY,SF\n20070101,46;51;\n20070102,47;60;\n;\n20070102,90;38;\n";
}
function data_total_volume() {
return "Date,NY,SF\n20070101,26;91;\n20070102,27;30;\n;\n20070102,20;38;\n";
}
return {
data_temp: data_temp,
data_total_volume: data_total_volume
}
})
controller.js
angular.module('app.xyz').controller('dcontroller',function ($scope) {
});
index.html
<div jarvis-widget id="dygraphs-chart-1" data-widget-editbutton="false">
<div>
<div class="widget-body">
<div dygraphs-no-roll-period style="width: 100%;height: 300px;"></div>
</div>
<div class="widget-body">
<!-- this is what the user will see -->
<div dygraphs-no-roll-timestamp style="width: 100%;height: 300px;"></div>
</div>
</div>
So If You see the screen shot then u can see two dygraph has two timeselector(rang selector). So I want to control both dygraph by one rang selector.
I have seen one link (DYGraphs: Control multiple graphs with one RangeSelector I did not get solution.My question related to http://dygraphs.com/gallery/#g/range-selector. You can click jsfiddle button for code in this link. This question is important for me. Your answer will be very valuable for me.
If you want to control both graphs with the same range selector you have to synchronize the graphs like in this example of dygraphs documentation. When the graphs are synchronized, the range selectors displayed works for all the graphs synchronized, so you can use only one range selector or even both, but they are going to be linked.
To use this functionality you have to use the synchronizer.js. It´s easy to use, you only have to use the code below where gs is an array with the dygraphs you want to synchronize.
var sync = Dygraph.synchronize(gs, {
zoom: true,
selection: true,
range: false
});
I am not familiar with angular but I think it will be also work.
Try this synchronizer.js and tell us about your results. If you don´t get to make it work I will try to help you better when I have more time. Regards
Related
Version jqGrid used here:
#license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright(c) 2008, Tony Tomov, tony#trirand.com
The first block of code below is an entire self contained implementation of jqGrid. It is in fact mostly taken from one of the examples on the jqGrid site. In it I added a snippet, the part between the comment lines with the clip markings.
That added snipped adds a custom editfunc. It works nicely (in the example it is of course more or less a stub, only doing an alert). Also, searching works, with all of its default parameters. For both, select a row and click on the respective icon of Edit or Search.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="./lib/jquery/jquery.min.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="./lib/jqGrid-js-free/js/jquery.jqGrid.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.-->
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="./lib/jqGrid-js-free/js/i18n/grid.locale-en.js"></script>
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jquery-ui/jquery-ui.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jqGrid-js-free/css/ui.jqgrid.css" />
<meta charset="utf-8" />
<title>jqGrid without PHP - Loading Data - JSON Live</title>
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
colModel: [
{
label: 'Title',
name: 'Title',
width: 150,
formatter: formatTitle
},
{
label: 'Link',
name: 'Link',
width: 80,
formatter: formatLink
},
{
label: 'View Count',
name: 'ViewCount',
width: 35,
sorttype:'integer',
formatter: 'number',
align: 'right'
},
{
label: 'Answer Count',
name: 'AnswerCount',
width: 25
}
],
viewrecords: true, // show the current page, data rang and total records on the toolbar
width: 780,
height: 200,
rowNum: 15,
datatype: 'local',
pager: "#jqGridPager",
caption: "Load live data from stackoverflow"
});
fetchGridData();
function fetchGridData() {
var gridArrayData = [];
// show loading message
$("#jqGrid")[0].grid.beginReq();
$.ajax({
url: "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow",
success: function (result) {
for (var i = 0; i < result.items.length; i++) {
var item = result.items[i];
gridArrayData.push({
Title: item.title,
Link: item.link,
CreationDate: item.creation_date,
ViewCount: item.view_count,
AnswerCount: item.answer_count
});
}
// set the new data
$("#jqGrid").jqGrid('setGridParam', { data: gridArrayData});
// hide the show message
$("#jqGrid")[0].grid.endReq();
// refresh the grid
$("#jqGrid").trigger('reloadGrid');
}
});
}
function formatTitle(cellValue, options, rowObject) {
return cellValue.substring(0, 50) + "...";
};
function formatLink(cellValue, options, rowObject) {
return "<a href='" + cellValue + "'>" + cellValue.substring(0, 25) + "..." + "</a>";
};
/*---- 8< ------*/
// editfunc here works (an alert is popped up), although the format of the function parameters is not according to spec:
// searchfunc also works (it is the default)
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',{
add:false, del:false, view:false,
editfunc: function(){alert('EDIT');}
});
/*---- >8 ------*/
});
</script>
</body>
</html>
Now take the same file, remove the small snippet between the snip lines, and replace it with the following snippet, that looks more like something I need to implement:
/*---- 8< ------*/
// editfunc does NOT work as desired here (no alert)
// search function works, WITH the parameters as specified here
// from the file jquery.jqGrid.js (): navGrid : function parameters: (elem, p, pEdit, pAdd, pDel, pSearch, pView)
// (=jqGrid-free #license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright(c) 2008, Tony Tomov, tony#trirand.com)
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',
{ add:false, del:false, view:false }, // p
{ editfunc: function(r){alert('EDIT');} }, // pEdit (does NOT work)
{ }, // pAdd
{ }, // pDel
{ multipleSearch: true, closeAfterSearch:true, closeOnEscape:true, searchOnEnter:true, showQuery:true }, // pSearch (works with these options)
{ } // pView
);
/*---- >8 ------*/
Here, alas the editfunc does not work at all, I get the default edit function. Search now works though, as desired with the custom specified parameters.
In short: I cannot seem to get both a customized editfunc and search with custom parameters working!
I cannot see anything wrong with the second snippet. It is btw. also per some examples on the jqGrid wiki.
Any hints to get both working together would be appreciated.
The problem is very easy: you placed editfunc in the wrong place in your last snippet. The editfunc should be specified as the property of the second parameter of navGrid (together with add:false, del:false, view:false). You used the editfunc correctly in the first part of your code, but you placed it in the second part of the code on the wrong place. You can fix your code by usage
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',
{ add:false, del:false, view:false, editfunc: function(r){alert('EDIT');} }, // p
{ }, // pEdit
{ }, // pAdd
{ }, // pDel
{ multipleSearch: true, closeAfterSearch:true, closeOnEscape:true,
searchOnEnter:true, showQuery:true }, // pSearch (works with these options)
{ } // pView
);
By the way, you placed the code of commercial product Guriddo jqGrid JS in the directory jqGrid-js-free, which sounds strange. Guriddo jqGrid JS can't be used for free. You can see the current prices here. I started development of free jqGrid fork of jqGrid, which can be used completely free of charge, exactly because of that. Free jqGrid implemented many new features, which can be helpful for you. The demo https://jsfiddle.net/OlegKi/odvxefra/3/ is a small modification of your code, which displays
I used additionally
url: "https://api.stackexchange.com/2.2/questions",
// add sending of custom parameters to the URL
postData: {
order: "desc",
sort: "activity",
tagged: "jqgrid",
site: "stackoverflow"
},
datatype: "json",
// below prmNames remove sending all standard jqGrid paranmeters
prmNames: {
page: null,
rows: null,
sort: null,
order: null,
search: null,
nd: null,
id: "question_id"
},
jsonReader: {
root: "items",
repeatitems: false,
id: "question_id"
},
loadonce: true,
forceClientSorting: true,
sortname: "creation_date",
sortorder: "desc"
The data will be loaded from the same URL "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow", sorted locally by creation_date property in the desc order and displayed in the grid. One can use other properties in the custom formatter by adding the properties in additionalProperties. For example you can add additionalProperties: ["owner", "is_answered", "score", "last_activity_date"] to save the properties locally and to have access to the properties inside of, for example, custom formatter.
I'm trying to prevent the default behavior when I click on the angular-nvD3 Stacked Area Chart. I managed to access the onclick function, but I don't know how to prevent the event (modifies the graphic) from happening. I don't want the graphic to change when the user clicks on it.
.js:
$scope.stackedAreaChartOptions = {
chart: {
type: 'stackedAreaChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 30,
left: 40
},
x: function(d){return d[0];},
y: function(d){return d[1];},
useVoronoi: false,
clipEdge: true,
duration: 100,
useInteractiveGuideline: true,
xAxis: {
showMaxMin: false,
tickFormat: function(d) {
return d3.time.format('%H:%M')(new Date(d))
}
},
yAxis: {
tickFormat: function(d){
return d3.format(',.2f')(d);
}
},
zoom: {
enabled: false,
scaleExtent: [1, 10],
useFixedDomain: false,
useNiceScale: false,
horizontalOff: false,
verticalOff: true,
unzoomEventType: 'dblclick.zoom'
},
//chart events
stacked: {
dispatch: {
areaClick:
function (t,u){ null; console.log("areaClick");}
,
areaMouseover:
function (t,u){ null; console.log("areaMouseover");}
,
areaMouseout:
function (t,u){null; console.log("areaMouseout");}
,
renderEnd:
function (t,u){null; console.log("renderEnd");}
,
elementClick:
function (t,u){null; console.log("elementClick");}
,
elementMouseover:
function (t,u){null; console.log("elementMouseover");}
,
elementMouseout:
function (t,u){ null;console.log("elementMouseout");}
}
},
controlLabels: {stacked:"Absoluto", expanded:"Relativo"},
controlOptions:
[
"Stacked",
false,
"Expanded"
]
},
title: {
enable: true,
text: '',
css: {
'font-weight': 'bold'
}
},
caption: {
enable: true,
html: 'Visualización por horas de acceso a noticia',
css: {
'text-align': 'center',
'margin': '2px 13px 0px 7px',
'font-style': 'italic'
}
}
};
HTML:
<nvd3 options="stackedAreaChartOptions" data="stackedAreaChartData" api="api"></nvd3>
When I click on the graphic, the messages (console.log) are being shown, but I need to prevent the click event from happening.
I know this is an old question, but I run into this problem for my project and here is how I solved it.
It seems it's not possible to disabled these events using angular-nvd3. You must disable them using NVD3.
Get the chart api object available on your angular-nvd3 chart and disable the events on the chart object binded to this api:
HTML
<nvd3 options="options" data="data" api="chartAPI"></nvd3>
Javascript
$timeout( function() {
if ($scope.chartAPI) {
var chart = $scope.chartAPI.getScope().chart;
chart.stacked.dispatch.on('areaClick.toggle', null);
chart.stacked.dispatch.on('areaClick', null);
}
}, 1000);
I made a timeout be sure to have the chartAPI when doing the changes.
Note : It seems you have to disable these events again when you update or refresh the chart (chart.refresh()).
Working example here: https://codepen.io/mvidailhet/pen/JNYJwx
It seems there is a glitch in the chart update on Codepen, but you get the point :)
Hope it helps!
You were close. CSS pointer-events:none; has the disadvantage that it turns off every pointer event (most importantly hover, mouseenter and mouseout).
So IMHO you should avoid to use it.
Actually you were close. You should not pass an it-does-nothing function but null or undefined instead to options.chart.stacked.dispatch.areaClick. Like this:
//chart events
stacked: {
dispatch: {
areaClick: void 0
}
}
I had this very same problem and spent more than an hour to find it out.
EDIT
Turned out that I was wrong. It solved just because it ran into an error that prevented the event. So you can throw an error and everything is fine... :)
Also found a workaround but that causes memory leak, so I'll not share that.
My solution was: accept that it applies click event and hides all other layers. Too small issue to invest more time and effort in it.
I'm trying to use bootstrap-markdown and everything works fine except I can't call the plugin via JavaScript. For instance:
$("#content").markdownEditor({
autofocus: false,
savable: false,
iconlibrary: 'fa',
resize: 'vertical',
additionalButtons: custom_buttons, // an array defining custom commands
onPreview: function (e) {
var content = e.getContent();
console.log('content', content);
}
});
Does anyone has any ideas what might be the case? Couldn't find anything useful on the web or repo's github page. And yes I've already included markdown.js and to-markdown.js which weren't mentioned in the docs at all but it was quick find anyway.
All I need now is to call the editor, add a couple of custom toolbar buttons (image upload, code block insert etc.) and be done with it.
Code snippets, links & live fiddles are much appreciated :)
For some reason, changing the order of script references fixed this.
Here's the order now:
lib/markdown.js
lib/bootstrap-markdown.js ,
lib/to-markdown.js
And here's my initialization:
$(function () {
var custom_buttons = [[
{
name: "insertCode",
data: [{
name: "cmdInsertCode",
toggle: "toggle",
title: "Insert Code",
icon: "fa fa-fire",
callback: function (e) {
var selected = e.getSelection(),
content = e.getContent();
// e.replaceSelection(chunk);
// var cursor = selected.start;
//e.setSelection(cursor, cursor + chunk.length);
console.log('cmdInsertCode clicked');
}
}]
}
]];
$("#content").markdown({
autofocus: false,
savable: false,
iconlibrary: 'glyph',
resize: 'vertical',
additionalButtons: custom_buttons,
onShow: function (e) {
console.warn('e:editor shown');
}
});
});
Kudos :godmode:
I have a hard time figuring out what to do in my AngularJs single-page . I use ng-repeat to display a number of widgets. The plugin is "Jarvis widget v2.0". My problem is, that the article container does not have the functionality from the Jarvis widget (fullscreen, collapse etc.).
The data is delayed because of a HTTP GET call. If I hard-code the dataSeries it works 100%, but it seems that the Jarvis widgets gets rendered before the success of the HTTP GET. I have tried to find a solution for days and my guess is that a directive is the solution, but I'm lost!
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="chart in dataSeries">
<div class="jarviswidget" id="wid-id-02" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false"></div>
</article>
This is my first post, so if I forgot something i apologize in advance.
The code inside function setup_widgets_desktop() is going to create the widgets based on the current(!) HTML content. As ng-repeat will render your element after you have a success from your HTTP request, there are no elements present when the function is called.
In order to achieve the behaviour you want, execute setup_widgets_desktop() again after your callback returns. You might need to make sure it is delayed by using $timeout(setup_widgets_desktop, 1000). I am using it this way, but not sure if it is a general requirement to have a delay.
The best option would be to extract the call $('#widget-grid').jarvisWidgets() into an directive. You could replace $('#widget-grid') with getting the current $(element), so it is only bound to the current element and not some fixed ID inside the DOM. If you need more advice on this, just drop me a line.
Edit (sample code):
In my project I am using the following Angular service (you have to replace yourApp, the HTTP URI and the jQuery selector to your needs):
(function(yourApp) {
"use strict";
yourApp.factory("presenter", function ($timeout) {
var layout = function () {
$("#widgets-grid").jarvisWidgets({
grid: "article",
widgets: '.jarviswidget',
localStorage: false,
// deleteSettingsKey: '#deletesettingskey-options',
// settingsKeyLabel: 'Reset settings?',
// deletePositionKey: '#deletepositionkey-options',
// positionKeyLabel: 'Reset position?',
sortable: false,
buttonsHidden: false,
// toggle button
toggleButton: false,
toggleClass: 'fa fa-minus | fa fa-plus',
toggleSpeed: 200,
onToggle: function () {
},
// delete btn
deleteButton: false,
deleteClass: 'fa fa-times',
deleteSpeed: 200,
onDelete: function () {
},
// edit btn
editButton: false,
editPlaceholder: '.jarviswidget-editbox',
editClass: 'fa fa-cog | fa fa-save',
editSpeed: 200,
onEdit: function () {
},
colorButton: false,
// full screen
fullscreenButton: true,
fullscreenClass: 'fa fa-expand | fa fa-compress',
fullscreenDiff: 3,
onFullscreen: function (e) {
},
// order
buttonOrder: '%refresh% %custom% %edit% %toggle% %fullscreen% %delete%',
opacity: 1.0,
dragHandle: '> header',
placeholderClass: 'jarviswidget-placeholder',
indicator: true,
indicatorTime: 600,
ajax: true,
timestampPlaceholder: '.jarviswidget-timestamp',
timestampFormat: 'Last update: %m%/%d%/%y% %h%:%i%:%s%',
refreshButton: true,
refreshButtonClass: 'fa fa-refresh',
labelError: 'Sorry but there was a error:',
labelUpdated: 'Last Update:',
labelRefresh: 'Refresh',
labelDelete: 'Delete widget:',
afterLoad: function () {
},
rtl: false, // best not to toggle this!
onChange: function () {
},
onSave: function () {
},
ajaxnav: $.navAsAjax // declears how the localstorage should be saved
});
}
return {
layout: function() {
$timeout(layout, 1000);
}
};
});
})(window.yourApp);
Your controller should then look like this:
function($scope, $http, presenter) {
...
$http("api/data").success(function(data) {
$scope.dataSeries= data;
presenter.layout();
});
...
}
OK, with help from Darneas I came up with a solution.
I implemented this:
: Calling a function when ng-repeat has finished
I made sure that "widget-grid" wasn't initialized (I had some test widgets)
I called "setup_widgets_desktop()" from the ngRepeatFinished
This was succesfull. Thank you Darneas. I wouldn't had found a solution otherwise.
I couldn't get the widget directive to work, which looks like a great solution as well.
I can't figure out what is going on here. I'm trying to make a custom directive for grids and will use element attributes to customize a given instance. In doing so i've made two files
grid-controller.js
app.controller('gridController', ['$scope', function ($scope ) {
//Initilization code
$scope.gridOptions = {
//Setup options
};
$scope.detailOptions = function (e) {
console.log('winning');
return {
dataSource: {
transport: {
read: {
url: "/detail" + e.OrderNumber + ".json",
dataType: 'json'
}
},
error: function (e) {
console.log(e);
},
pageSize: true,
serverPaging: false,
serverFiltering: false,
serverSorting: false,
},
columns: [
{
field: "ItemCode",
label: "lblItemCode",
title: ""
}, {
field: "ItemDesc",
label: "lblItemDesc",
title: ""
}, {
field: "QuantityOrdered",
label: "lblQuantityOrdered",
title: ""
}
],
scrollable: false,
sortable: true
};
}
}]);
grid-directive.js
app.directive('grid', function () {
return {
// Restrict E for element
restrict: 'E',
// Here we setup the template for the code we want to replace our directive
template: "<div> \n\
<div kendo-grid='grid' \n\
k-options='gridOptions'\n\
k-data-source='dataSource'>\n\
</div> \n\
<script type='text/x-kendo-template'\n\
id='details'>\n\
<div kendo-grid >\n\
</div>\n\
</script>\n\
</div>",
replace: true,
scope: {
},
controller: "gridController",
link: function (scope, element, attrs) {
//Gather some attribute data and set it to the gridOptions object
if(scope.$eval(attrs.detailsGrid))
{
scope.gridOptions.detailTemplate = kendo.template($("#details").html());
scope.gridOptions.detailInit = scope.detailOptions;
}
//More customization code
scope.dataSource = new kendo.data.DataSource({
//Setup dataSource options for main grid
});
}
};
});
For sake of brevity i've excluded a lot of the extra code.
My problem is whenever I try to open the details of a row the row opens...closes...and the grid appears to refresh. It almost looks like something is crashing and the main grid is refreshing as a result.
Here is the associated plunkr with the commented portions fleshed out.
So the day after I posted the question angular-kendo released an update that addressed this issue. After updating the library and fixing up my code a bit the details grid works as expected!