Cannot create more then two c3js graphs on a page - html

We are using the following code (generated by php but finally this is on client side)
c3.generate({'bindto':'#b65d3422__salestaffcommunication_xepan_base_view_chart_chart','data':{'keys':{'x':'name','value':['Email','Call','Meeting']},'groups':[['Email','Call','Meeting']],'json':[],'type':'bar'},'axis':{'x':{'type':'category'},'rotated':true},'onrendered':function(ev,ui){$(".widget-grid").masonry({'itemSelector':'.widget'})}});
c3.generate({'bindto':'#f67e14d8__t_masscommunication_xepan_base_view_chart_chart','data':{'keys':{'x':'name','value':['Newsletter','TeleMarketing']},'groups':[['Newsletter','TeleMarketing']],'json':[],'type':'bar'},'axis':{'x':{'type':'category'},'rotated':true},'onrendered':function(ev,ui){$(".widget-grid").masonry({'itemSelector':'.widget'})}});
c3.generate({'bindto':'#517df254__ableworkforce_xepan_base_view_chart_chart','data':{'columns':[['present',11.111111111111]],'type':'gauge'},'color':{'pattern':['#FF0000','#F97600','#F6C600','#60B044'],'threshold':{'values':[30,60,90,100]}},'onrendered':function(ev,ui){$(".widget-grid").masonry({'itemSelector':'.widget'})}});
And last graph is not drawn. showing
SyntaxError (DOM Exception 12): The string did not match the expected pattern.
However, I can run ANY two and it works fine. that means all code is perfect but once second one is drawn ( no matter in which order). Third one doesn't draws.
Is it any known bug, or any workaround known.
Using v0.4.11 of c3 from c3js.org
Here is my jsfiddle
https://jsfiddle.net/2yy2mjaf/1/
Thank you.

IDs cannot start with a number, which is the case of your third ID.
The simple solution is just adding a letter to it:
'bindto':'#a517df254_ //just put an "a" before the number here
Here is your fiddle: https://jsfiddle.net/7dkLdg32/

Related

What does the "ved" parameter in a google search refer to?

I've spent like two hours or more trying to figure out what a "ved" parameter on a Google search means. A curious person I am.
My finds so far:
$ved value changes-
1 - every different search result (diff keywords)
2 - every different resulted block (the url blocks/boxed on the resulted google search, but they are quite similar, as I'll write down below)
3 - every different geolocation perhaps
Consider these tests or lookups:
1-
Diff keywords, but first block/position in list:
&ved=2ahUKEwidsaSd4M_1AhVlk_0HHUxOCQYQFnoECAsQAg
&ved=2ahUKEwj2pZyN5s_1AhVRmuYKHZ5IB5EQFnoECAcQAg
I thought the "ved" value refers to the block/position of a url in the result list, but no.
2-
Twree different urls, first and second from the 1st and 2nd blocks of first page, then third from a "much farther on the list" block:
ved=2ahUKEwjq1-Wb1s_1AhW6SWwGHZwpBMwQFnoECD8QAQ
ved=2ahUKEwjq1-Wb1s_1AhW6SWwGHZwpBMwQFnoECCAQAQ
ved=2ahUKEwiZ2NDe1s_1AhVaTmwGHThIA5U4PBAWegQIGRAB
The same website url, from different countries (not considering blocks or position in list):
&ved=2ahUKEwiopK2X08_1AhUgxzgGHQEbDkcQFnoECBIQAQ
&ved=2ahUKEwjpueqC1M_1AhWJq3IEHYEDAfc4FBAWegQIDBAB
&ved=2ahUKEwih09Wz08_1AhUY7WEKHQYdBB8QFnoECEIQAQ
Very similar they are.
I'd really love to know what they mean. Any ideas are appreciated too!
I found an interesting article explaining the subject : https://moz.com/blog/inside-googles-ved-parameter
TL;DR:
A ved code contains up to five separate parameters, which each tell you something about the link that was clicked on:
1st (parameter1: Link index) gives you an idea of where the link was on the page.
2nd (parameter2: Link type) is a number that corresponds to the 'type' of the link that was clicked.
3rd (parameter7: Start result position) is the cumulative result position of the first result on the page.
4th (parameter 6: Result position) indicates the position of your page in the search results.
5th (parameter 5: Sub-result position) like the (parameter 6), except it tells you the position in a list of sub-results, such as breadcrumbs, or one-page sitelinks.

In R package Formattable, how to apply digits and conditional formatting at the same time?

I have the object TABLE_LIST which is a list that has tables (I can't provide the contents for privacy policies, sorry).
I first created the object TABLE_LIST (It is a list of data.frames 2x12)
TABLE_LIST=lapply(1:4, function(x) data.frame(rbind(total.ratio4[[x]][-(1)], total.ratio2[[x]][-(1)]), row.names=row))
The following code gives me red and green font colors based on the value on the cell, and it works like a charm:
formattable(TABLE_LIST[[1]], list(area(,-(c(5,10)))~formatter("span", style=x~style(color=ifelse(x>1,"red","green"))),area(,(c(5,10)))~formatter("span", style=x~style(color=ifelse(x>1,"green","red")))))
However, I need COLOR AND comma separated numbers. My failed attempt is:
formattable(TABLE_LIST[[1]], list(area(,-(c(5,10)))~formatter("span", style=x~style(color=ifelse(x>1,"red","green"))),area(,(c(5,10)))~formatter("span", style=x~style(color=ifelse(x>1,"green","red"),digits(x,2))),
area(1:2,1:10)~formatter("span",x~ style(digits(x,2)))))
This code works well, but erases the formatting of the color. I do not know what else to do.
I have to mention I cannot change the original data.frame without messing everything up. So I gotta make the changes on table_list or formattable. Thank you.
I think I solved it. So I will share this small knowledge to people who may have the same problems as me:
formattable(TABLE_LIST[[1]],
list(
area(,-(c(5,10)))~formatter("span",
style=x~style(color=ifelse(x>1,"red","green")),
x~style(digits(x,4))),
area(,(c(5,10)))~formatter("span",
style=x~style(color=ifelse(x>1,"green","red")),
x~style(digits(x,4)))))
Basically, inside the same formatter, on the level of style, add a comma and x~style.

Selecting some kind of closest child with jQuery seems not to work

I try to implement a nested tab module the following way.
By clicking on a .tabs__menu item I want to get the next .tabs__contents to display the correct entry.
I've prepared a codepen with markup and leave out all unimportant code so don't be irritated that it's not working. I don't understand why the variable debug2 is 0 and debug3 is 1. I expect debug2 to be 1 as well since I expect the following expression should find the element. Can anyone help me with this?:
.find(".tabs__contents").not(".tabs__contents .tabs__contents");
https://codepen.io/anon/pen/JNLWQp
Thanks in advance and best wishes,
duc
ok I have an assumption why it's not working. It seems that the .not method doesn't starts to search relatively from the given collection but globally. With this statement
.not(".tabs__contents .tabs__contents")
debug2 finds itself and exclude it from the collection thats why the length is 0.

dart HTML TableCellElement - cannot get or set colspan

I am creating a HTML table inside the dart code. then i add rows to the table (TableRowElement) and cells (TableCellElement) to the rows. Then I want to set the colspan of the cells. Or even print the colspan.
Here the program crashes (debugger says that the element has no get$colspan). However the API reference (http://api.dartlang.org/docs/channels/stable/latest/dart_html/TableCellElement.html#colSpan) shows colspan as an int (its not final either).
At the end, I want to create dynamic tables...
Thanks,
imran
p.s.: code looks like this:
var table = new TableElement();
table.addRow();
table.rows.last.addCell();
print(table.rows.last.cells.last.colspan);
table.rows.last.cells.last.colspan=2;
The property is colSpan (capital S)
Issue https://code.google.com/p/dart/issues/detail?id=15256 was created.
What you are seeing are hints, not warnings, out of the analyzer. (There is a bug to fix the UI to make this more clear).
If you change var table to TableElement table, then the analyzer will violate clospan as you probably expected. Since you declared table as a "var" the analyzer doesn't produce a warning. Since this can lead to bugs like the one you encountered, we are always in the process of adding hints.
Unfortunately, there seems to be a bug where the propagated type of table.rows.last.cells.last is not being resolved. I am looking into this now.

GxtRtl Html and HtmlContainer flips input html content

I use Gxt-2.2.5-Rtl (http://code.google.com/p/gxt-rtl/) and try to show html content through HtmlContainer's setUrl() method. But unfortunately the result is flipped version of my expected output. For example suppose our input html contains a table which starts columns from right to left as id, name, description. So what we get is a table that their column starts from expected order BUT FROM LEFT TO RIGHT!
I used Gxt's Html and Gwt's HTML and HtmlPanel classes, but this problem doesn't solve.
In addition I should say when I use TabItem or ContentPanel's setUrl() method this problem disappears. But I prefer to don't use that method and because:
1- Just last loaded iFrame is visible at a time. This means that navigating through other preloaded tab items displays a blank page.
2- Poor control over loaded page through GWT, like catching click events and etc.
Expected output:
http://www.freeimagehosting.net/yow6l
Wrong output:
http://www.freeimagehosting.net/8opdt
I changed the titles to English for better communicating! :)
Thanks!