I would like to format numbers returned via Google's Embed API, mostly controlling decimal count, and comma placement for numbers 1000+.
I found this documentation on NumberFormat for Google Charts, as well as the following link to the Embed ref guide:
https://developers.google.com/chart/interactive/docs/reference#numberformatter
https://developers.google.com/analytics/devguides/reporting/embed/v1/reference
The syntax is different for Embed, so the Google Charts number formatting doesn't seem to apply.
Here's my Embed syntax...I'm assuming there's some way to add options for number formatting, similar to what I placed in the options param below:
var avgSessionDuration = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'metrics': 'ga:avgSessionDuration',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'TABLE',
container: 'avgSessionDuration',
options: {
'NumberFormat': {
pattern: '$###,###'
}
}
}
});
I feel like I've read every word of every Embed reference material, and can't find this anywhere, but it seems unlikely there's not a solution out of the box.
Thanks!
Try removing the single quotes around 'NumberFormat'. I don't believe those are required and they may be causing the problem.
Related
I want to make data like 2022/12/15 (imported from Google Sheets at the moment of page load) display as "Dec 15" in one column, and as "Thu" in another column.
I found the format codes:
moment().format("MMM d"); // "Dec 15" and
moment().format("ddd"); // "Thu".
I read https://momentjs.com/docs/ and https://momentjs.com/guides/, but could not find:
Where do I enter that code?
Can I skip entering that code, and instead just enter this?:
$(document).ready(function () {
$('#example').DataTable({
columnDefs: [
{
targets: 4,
render: DataTable.render.datetime('MMM d'),
},
],
});
});
Perhaps I should separate my questions into different posted questions, but I imagine it will be more helpful for future readers to find the combined challenges asked and answered in a single thread.
I'm using the WordPress plugin "Inline Google Spreadsheet Viewer", which is built on DataTables.
[Edit: I realized I should not paste that code into inline_gdocs_viewer.php, and intended to paste it into igsv-datatables.js. I could not however figure out where to paste within that file. What should I look for to know where to insert it? (The author of that plugin publicly announced that no more support will be given.) Should I post the contents of the js file somewhere so you can see it?]
[Edit 2: Would entering that code make column 5 always displayed in MMM d format, even if I want column 5 to be displayed in a different format? Shouldn't specifying what format to apply to which column happen when I create a page / post and use the shortcode to embed the spreadsheet?]
(I read the plugin's documentation and I read DataTables documentation.)
If my table doesn't have a name, what do I use instead of #example? Do I need to name my table? If so, how? (I tried to find the answer at, for example, https://www.w3schools.com/html/html_tables.asp.)
The source for the longer code came from a live example where the dates were in column 5, but the code says "targets:4". To apply the code to column 3 (for example), should I enter targets:2? I read https://datatables.net/reference/option/columns.render, but bizarrely that didn't address this basic question.
If you're wondering if I upgraded DataTables from the old version that comes with Inline Google Spreadsheet Viewer, yes I did.
If you're wondering if I got the script array to call moment.js, I might have. Into the scripts array I added
,
'moment' => array(
'src' => plugins_url('moment.min.js', __FIL__),
'deps' => array( 'moment' )
)
I'm not sure about the "deps" part. Does it mean dependencies? Was I right to use "moment" twice in that code?
If you only know a possible answer to one of these questions, that's better than nothing, so please do share what you can.
I know the Moment team recommends you choose a different library than Moment for new projects, but DataTables to this day recommends Moment for sorting by Day of the week or sorting by Date.
Thanks
Using moment.js 2.29.2 and DataTables 1.13.1.
What I tried, and what I expected:
I read the documentation for all the programs, and I read forum discussions for all the programs, and I studied examples, expecting to find where to enter the code, but nowhere could I find what to do with it. It was always assumed that that part was already known.
I’m writing my first vue-app and while implementing the filters a lot of questions arise.
I have created lists with checkboxes for each property. The checkboxes have a change-event to adjust the url and send a get-request. One key can have several values. How can I implement this with vue?
A first test to adjust the URL looked like this:
router.push({ name: 'transactions' , query: { property: item.value} });
This works fine with one value, but I want to have multiple values for one key.
Many pages solve this with: xy.com/z?property=x%y
I could not find out if this scheme is only recommended or if it has to be solved that way. How I can implement it with vue I could not find out too.
I would also like to know how I can extend the route. The following statement always overwrites the URL instead of extending it.
this.$router.push({ name: 'transactions', query: Object.assign({}, this.$route.query, { property: item.value })});
I am grateful for any help
I'm trying to use "videojs-thumbnails" plugin from https://github.com/brightcove/videojs-thumbnails and noticed that thumbnail's time, specified in the plugin configuration is not matching the timestamp in the seek bar. Coming across different comments regarding this issue I found suggestion at https://github.com/brightcove/videojs-thumbnails/issues/43 to replace line
mouseTime = Math.floor((left - progressControl.el().offsetLeft) / progressControl.width() * duration);
to
mouseTime = Math.floor((left) / progressControl.width() * duration);
By removing
- progressControl.el().offsetLeft
However, that produces still not exact time match.
Finally I came with redefined value for the
var left
Getting it from the current value of
.vjs-mouse-display
So, my final codes are:
left=parseInt((document.querySelector('.vjs-mouse-display').style.left),10);
mouseTime = Math.floor((left) / progressControl.width() * duration);
Now everything works correctly.
Greatly appreciate for comments/suggestions.
This is NOT an answer to your specific question / issue, but rather, an alternative implentation approach.
I, too, wanted thumbnails for my video(s), so I proto-typed a page
that used videoJS's plugin. I don't recall all the details of the
issues that I ran into trying to use that plugin, but I finally decided
to abandon the plugin, and design an alternative, which has its own
separate 'slider' just above the viewer. [ One 'drags' my slider,
(rather than hover along it, as you do on YouTube's videos), so that it
can work straight-forwardly on touch-screens...i.e. on Android, etc. ]
And, rather than try to extract images from the video in real-time,
(See: How to generate video preview thumbnails for use in VideoJS? ), I chose to prepare the images, ahead of time, using 'ffmpeg' and the cmd-line interface to 'ImageMagick'.
Details of that part are here:
http://weasel.firmfriends.us/GeeksHomePages/subj-video-and-audio.html#implementing-video-thumbnails
My 'proof-of-concept' webpage based on that approach is here:
https://weasel.firmfriends.us/Private3-BB/
I hope this is helpful.
Is it a good idea to use function name property instead of constants for actions/mutations, like the code below?
Author of Vuex official documentation says that it is not required to use constants for actions/mutations. So I want to try to use type is based on function name.
Component:
this.$store.dispatch(authActions.login.name, {
email: this.email,
password: this.password
})
Action:
async login(context, { email, password }) {
// some code
}
I am waiting for the following answers:
1) Yes, you can use it, there are no potential problems with this
approach.
2) Yes, but these problems [problems] can happen.
3) No, there are a lot of problems: [problems].
I think it's option number 2).
The problem comes when you want to dispatch namespaced modules actions.
You can do this and it does work, but I noticed when I minify my code for production it stops working.
I suspect there's some code that maps the function names (ie login()) to their minified version (ie h()) during bundling, and that's breaking things.
I've been trying to figure this out for a while with no luck. I agree defining constants to use as function names, instead of grabbing the name after like myFunction.name, is stupid. I'll update my comment if I figure it out. I'll keep trying...
I have to implement a page with multiple google-powered search forms. We have a license from Google for CSE, and this is the situation:
I have a search form that's present at the top of every page that performs a simple search and displays the results in a separate page. This works.
I have a particular page that, in addition, shows another two search forms: one should filter articles by category, another should filter articles by category and restrict the result to a certain month. I have added a meta key with the publication date to each article for this.
I have gotten a bit lost in the documentation, though: if I add
<gcse:searchbox-only resultsUrl="/[site]/stat/search/google_search_results.html"></gcse:searchbox-only></div>
to the page, I can't filter the results. If I start to meddle with a CustomSearchObject, I don't see an option to show results on a different page.
For category-based filtering, I've tried appending
more:pagemap:metatags-taxonomies:news
to the query argument in the results page URL, and it does work, but I don't understand how to inject this to the form.
For restricting based on dates, I tried adding
&sort=more:pagemap:metatags-pubdate:r:YYYYMMDD:YYYYMMDD
but haven't been able to make it work. Getting the XML does work:
http://www.google.com/search?q=intitle:[mysite]%20more:pagemap:metatags-taxonomies:News&sort=metatags-pubdate:r:20120401:20120830&cx=[mykey]client=google-csbe&output=xml
returns correct results.
Is there documentation that doesn't assume so much? All I find are code snippets without context. I've checked Filtering and sorting, Custom Search Element Control API, and of course this site, but I can't put all the pieces together.
I managed to implement what I wanted. In the search page, I built simple forms pointing to my results pages (this might not be doable if you must implement google branding), and in the results page I put the following:
(in the <head>)
<script src="http://www.google.com/jsapi"></script>
<script>
// This function extracts the query from the URL (if GET) or builds a search query.
// Code removed to simplify the example.
function buildQuery () {
return '<?php echo $_POST['q'];?> more:pagemap:metatags-taxonomias:News'); // injecting the taxonomy metatag filter
}
google.load('search', '1', {language : 'es'});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
customSearchOptions[google.search.Search.RESTRICT_EXTENDED_ARGS] = {'sort':'metatags-pubdate:d,metatags-pubdate:r:<?php echo $_POST['startdate'];?>:<?php echo $_POST['enddate'];?>'}; // these come from the POST request, are processed earlier in the script.
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXX', customSearchOptions); // Put your own App key here.
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var drawOptions = new google.search.DrawOptions();
drawOptions.enableSearchResultsOnly(); // I don't want the search box here
customSearchControl.draw('cse-results-press', drawOptions);
var query = parseQuery();
if (query) {
customSearchControl.execute(query);
}
}, true);
</script>
In the <body>:
<div id="cse-results-press">Loading...</div>