I have been trying for a while to get a Calendar to render as part of a Google Charts dashboard, using
[...]
var timeline = new google.visualization.ChartWrapper({
'chartType': 'Calendar', //also tried "calendar"/"Calendar"/"CalendarChart"
[...]
Should this be possible at all, or can calendars not be created with ChartWrappers for some reason?
The calendar is being built just fine with exactly tghe same set of data and options if I create it as an individual chart based on this example.
Related
I have a situation where I need to disable the button(added as widget for widget column) when I receive one web socket event. When receiving the web socket I might be in any page. So how to get the reference of that button widget and disable it.
I have created a fiddle WidgetTestFiddle
Can anyone please help.
Thanks in advance
You could use the Ext.ComponentQuery.
Using the query method you can search for the buttons inside your grid.
You probably want to give your buttons an itemId (e.g. itemId: 'widgetcolumn-button-switch') to ensure that you only find the buttons you want.
Using the itemId your search query would look like this: 'button[itemId="widgetcolumn-button-switch"]'
I forked your fiddle and created my own version to illustrate my point: Sencha fiddle example
I think there are several ways to achieve your wanted result.
KaMuns answer will work, but can be tricky in case you use a buffered store / grid. Because the pages in this case are handled internally by the store. Using a static itemId wont work in this case out of the box.
I would suggest you rely on the record data.
Everytime you recieve a websocket message, update the store and refresh the grid view can be an option.
I have modified your fiddle here:
https://fiddle.sencha.com/#view/editor&fiddle/3a87
Here are is the most relevant part:
var grid = btn.up('grid');
var models = grid.getStore().getData().getRange(); // of cause you can use find or another way here
var model = models.filter(mod => mod.get('actualRole') === 'Follower');
model[0].set('showBtn', false);
grid.getView().refresh(); // get ref to view and refresh because data changed
On top you can have a look on the defaultBindProperties and may change this to the hidden key of the button.
I am using GTM to fire Adobe Analytics scripts on all the pages. It is working as desired. However I am wondering if is there a way to set up click events with no page refresh, in the same way as Google Analytics click events are set up. I am using s.tl() call however it is not sending the events to adobe omniture. Any thoughts on this. I know if I use DTM, it can be setup easily.
Assuming that you have Adobe Analytics already present on your website, s object is already present on your website. All you need to do is to put these codes on your website and fire this using GTM as a custom HTML Tag on basis of the trigger you require. There are standard events like gtm.js, gtm.dom and gtm.load already present. You can create your own custom event on top of this on basis of elements load. Using the same event you can fire these lines of codes on your website and this should give you what are you looking for.
<script type = "text/javascript">
var s = s_gi('yourreportsuiteID'); // replace this with your RSID!
s.visitorNamespace = "yournamespace" //optional
s.trackingServer = "yourtrackingserver" //optional
s.trackingServerSecure = "yoursecuretrackingserver"//optional
s.events = "event35";// your event number has to be activated in Adobe
s.linkTrackVars = "events,eVar38";//your eVar number has to be activated in Adobe
s.linkTrackEvents = "event35";
s.eVar38 = {{GTMVariable}}
s.tl( this,
"o",
"FriendlyName" );
</script>
There is nothing specific to Adobe Analytics to consider - GTM has a built-in click event handler. Go to "triggers", "new", select "click" from the options and optionally specify filters (e.g. if you want the trigger to fire only on certain pages, or only when the link has a specific class).
Assign the trigger to a custom HTML tag with your Adobe Code, save, publish and you are all set.
I’m building embedded content for a CRM using JQuery Datatables, Leaflet with OSM tiles, and Leaflet Routing Machine. Markers on the map and the rows of the table are based on the SAME JSON data, and I’m building interactions (using SHARED JavaScript functions) between the two libraries. For example, when a Datatable row is clicked, the row is highlighted, a popup is opened over the corresponding map marker, and a route is calculated using LRM which places the route line on the map. Conversely, when a map marker is clicked, all the same events happen because I'm calling the SAME function.
By default, the Itinerary LRM creates is hidden on the map, but I would like to parse out the Drive Time and Distance, and insert them in the popup opened by the shared function. I have spent four days pouring over the API documentation and searching the internet looking for clear instructions or code samples on how to access these values from the Itinerary object, but with no success. I have inspected every object I can figure out how to log to the console, but the data I need is in properties that come up ‘undefined’ when I try to access them.
Please, from start to finish, how do I access the Itinerary Summary?
When I init the map, I also init the Routing Control with null waypoints:
ctrl = L.Routing.control({
waypoints: null,
units: 'imperial',
show: false,
createMarker: function() { return null; }
}).addTo(map);
When a marker/row is clicked, I call this function:
function clickEffects(id, latlon) {
// set waypoints for routing control
ctrl.setWaypoints([ ctr, latlon])
// scroll the table to the row for the clicked marker
table.$('tr.selected').removeClass('selected');
var idx = table.row("#" + id).index()
table.row(idx).show().draw(false);
table.row(idx).nodes().to$().addClass('selected');
// create and open a popup
var popup = L.popup()
.setLatLng(latlon)
.setContent("Dan was here!!!")
.openOn(map);
}
Figured it out:
Declared popup in global scope
Bound default "Loading..." content when creating marker
In shared function, set div's with target id's in new popup content
(in addition to freshly retrieved ajax content.
In "routesfound" event listener, used JQuery to insert formatted
drive time and distance on target divs.
Works like a charm. Just need to expand on ajax data now...
I am using the Parse Javascript SDK to build an app which is quite similar to using Backbone JS. As I am building up my App, I become more and more confused of the single-page application concept and have no idea about the best practice. I here seek for help evaluating my app architecture.
My app aims to provide the following functions:
User registration, profile editing, log in.
Search for users that meet a criteria
I built a router as follows:
var IndexRouter = Parse.Router.extend({
routes: {
"users/new": "signup",
"sessions/new": "signin",
"users/:id/edit": "edit",
"users": "searchResults"
"": "index",
}
...
}
The index page contains three elements, a jumbotron, a search bar and a list of three recently registered users. I have created views using Parse.View for them separately.
After the user click the search button, I would like the page only showing a list of search results, no jumbotron, no list of three recently registered users. What I am doing is just manually set those views' content to empty, like:
searchResults: function(){
$('#jumbotron').html('');
$('#recentlyCreatedUsers').html('');
//create and then render the search results' view
...
}
In a nut shell, my strategy is to create a view for each section that is NOT static. In the future, I would need to add a navbar whose content changes according to routes, then I need to create a view for it as well.
Am I on the right track? I actually find my index page has been split into multiple views.
I'm using the kendo MultiSelect with odata paging and using the angularJS integration. Populating the data from scratch works great. When I want to re-populate the data from initial data then I seem to have a problem.
Cause of the problem:
The data only gets populate from the initial or previous dataset. So, if I the paging size is 10 then only products that exist in the first page will be displayed as normal. All product that don't fall within the first page will just not be displayed.
Possible workarounds:
Increase the page size. I have used this on other pages where the results are quite small. However this is not a realistic work around as we are expecting much bigger datasets in the future ( hence using odata in the first place)
Was thinking we could possibly do some sort of initial sorting. However this could also be slow and could still be a problem if there were more items selected than exist in the first page.
Ideal solution
Is there a way to tell kendo component to load all data based on current value? This will then build the required odata call and populate the component.
Example of the current issue:
http://dojo.telerik.com/ODaLe/2
I worked 2-4 hours to find a solution for this. Dunno if yall would like it, but it might help somebody, so I'd type it here. Following are the steps:
Step 1: Create the data source
First, setup the dataSource object which you would be using for reading remote data (for offline data, improvise by reading the API).
var dataSource = new kendo.data.DataSource({
dataType: "jsonp",
transport: {
read: {
url: options.source,
type: 'POST'
},
},
serverFiltering: true
});
Step 2: Load the selected items
This can be tricky as you need to have the selected item IDs on the client side. For me, I did it by adding a data-options-selected="1;3;9" attribute to my select element. Later, in my JavaScript, I split this attribute by ";" and retrieve an array of selected IDs. Lets say these values are in var valuesArray;
Once we have an array of selected IDs, we need to read them from the data-source. In my case, it was remote, so I ran a dataSource.read() with filters as under:
dataSource.read({
filter: {
logic: 'and',
filters: [
{
field: options.dataValueField,
operator: 'equals',
value: options.value
}
]
}
});
On the server side, this should return an array containing the items having the given identifiers. Thus, we now have those items on the client-side as well.
Step 3: Set values for the widget
Now that the value related data is loaded, we can set the values for the widget using the values() method. Here, $el is the jQuery object representing the select element which I was using for multiSelect.
var oWidget = $el.data('kendoMultiSelect');
oWidget.value(valuesArray);
That's it! One multiselect widget pre-loaded with values, ready to rock and roll. Served my purpose. Dunno if any short-cuts exist.
When using Kendo with Angular, you want to use the k-rebind attribute to refresh the pulldown options + update the picker with the values in your $scope.countries object when it changes.
If you want like the picker to update when $scope.products changes as well, you can initialize the picker using a k-options attr pointed to an object in your controller, and set the k-rebind to that object.
This kendo tutorial provides a useful example, also using odata paging.
http://docs.telerik.com/kendo-ui/web/multiselect/how-to/AngularJS/pre-select-items