Develop Reference

A problem with the Blogger JavaScript code

I have a code that fetches the categorized posts, but the code when adding 150 posts or above is slow to fetch posts. This is the code
if(-1 < e.indexOf("://")) return (-1 < e.indexOf("://www.") ? e.split("://www.") : e.split("://"))[1].split(".")[0]
}
$(document).ready(function() {
$.each($(".emped-tv .views"), function(e, t) {
var a = $(this),
i = new Firebase("https://episode-viewer.firebaseIO.com/pages/id/" + a.attr("data-id"));
i.once("value", function(e) {
var t = e.val(),
e = !1;
null == t && ((t = {
value: 0
}).url = window.location.href, t.id = a.attr("data-id"), e = !0), a.html('<i class="fa fa-eye" aria-hidden="true"></i> ' + t.value), t.value++, "/" != window.location.pathname && (e ? i.set(t) : i.child("value").set(t.value))
})
}), $(".episodes-get").each(function() {
for(var e = $(this).find(".server-get i"), t = "", a = "", i = 0; i < e.length; i++) {
var s, n, o = e[i].textContent,
r = o.split("*");
r[1] ? (s = r[1], n = r[0], 0) : (s = i + 1, n = o);
o = smart_domain(n);
null == o && (o = "سيرفر مشاهدة"), 0 == i ? (t += '<a class="server-link active waves-effect waves-light" href="' + n + '" target="abdoutech">' + o + '<span class="server-num">' + s + '<i class="fa fa-play"></i></span></a>', a += '<iframe allowfullscreen="" class="embed-item" frameborder="0" height="1080" marginheight="0" marginwidth="0" name="abdoutech" scrolling="no" src="about:blank" width="1920"></iframe>') : t += '<a class="server-link waves-effect waves-light" href="' + n + '" target="abdoutech">' + o + '<span class="server-num">' + s + '<i class="fa fa-play"></i></span></a>'
}
$(".embed-responsive").append(a), $("#servers-content").html(t), $(".embed-responsive .play").click(function() {
$(".embed-item").attr("src", $(".server-link.active").attr("href")), $(this).remove()
}), $(".server-link").click(function() {
$(".server-link").removeClass("active"), $(this).addClass("active")
}), $(".tabs-content button").click(function(e) {
e.preventDefault();
var t = $(this),
e = $(this).data("content");
$(".tabs-content button,.content-div").removeClass("active"), t.toggleClass("active"), $("#" + e).toggleClass("active")
});
for(var l = $(this).find(".download-get i"), c = "", i = 0; i < l.length; i++) {
var d, f, v = l[i].textContent,
p = v.split("*"),
h = "";
p[1] ? (f = d = p[1], h = smart_domain(m = p[0])) : (d = "", h = smart_domain(m = v), f = "fa fa-download");
var m = encode_be64(m, $(".home-anime").text(), $(this).attr("number-episode"));
c += l ? '<a class="waves-effect waves-light" href="' + m + '" target="_blank"><span class="icon-M ' + f + '">' + d + "</span> " + h + "</a>" : "لايوجد روابط تحميل"
}
$("#download-content").html('<div class="outer-download">' + c + "</div>");
var u = $(".home-anime").text(),
g = document.location.origin + u;
$.get(g, function(e) {
var t = $(e).find(".info-post .rating").text();
$(".emped-tv .details .info h3.rat").html(t + "/10");
t = $(e).find(".info-post .date").text();
$(".emped-tv .details .info h3.release").html(t);
t = $(e).find(".main-posts .post-outer .thumb img").attr("src"), e = $(e).find(".titlepost").text();
$(".emped-tv .info-container a.cover").attr("href", g).html('<img alt="' + e + '" class="cover" src="' + t + '">'), $(".emped-tv .details .info h1").html('<a title="' + e + '" href="' + g + '">' + e + "</a>")
}, "html"), $(".info-container").removeClass("hide")
}), $("[name-anime]").each(function() {
var m = $("#episodes-content"),
e = $(this).attr("name-anime");
$.ajax({
type: "GET",
url: "https://www.blogger.com/feeds/" + idblogger + "/posts/default/-/" + e + "?alt=json-in-script&max-results=" + numposts,
dataType: "jsonp",
success: function(e) {
var t = "",
a = "";
if(e.feed.entry) {
for(var i = 0; i < e.feed.entry.length; i++) {
for(var s = 0; s < e.feed.entry[i].link.length; s++)
if("alternate" == e.feed.entry[i].link[s].rel) {
var n = e.feed.entry[i].link[s].href;
break
} var o, r, l = e.feed.entry[i].title.$t,
c = e.feed.entry[i].content.$t,
d = $(c).find(".episodes-get").attr("number-episode"),
f = "";
d && (o = d.split("."), c = d.split("-"), o[1] || (c[1] ? (d = c[0], f = " - " + c[1]) : d = (d = d.match(/\d/g)).join(""))), r = d ? " الحلقة : " + d + f : (r = l, ""), t += n == $($("html").html()).filter('meta[property="og:url"]').attr("content") ? '<a data-position="' + d + '" class="active waves-effect" href="' + n + '" ><i class="fa fa-pause"></i> ' + r + "</a>" : '<a data-position="' + d + '" class="waves-effect" href="' + n + '" ><i class="fa fa-play-circle"></i> ' + r + "</a>", a += '<option data-position="' + d + '" value="' + n + '">' + r + "</option>"
}
m.html('<div class="episodes-list">' + t + "</div>"), m.append('<select class="ep-select" onchange="if (this.value) window.location.href=this.value">' + a + "</select>"), $(".episodes-list a").sort(function(e, t) {
return $(t).data("position") > $(e).data("position") ? 1 : -1
}).appendTo(".episodes-list"), $(".ep-select option").sort(function(e, t) {
return $(t).data("position") > $(e).data("position") ? 1 : -1
}).appendTo(".ep-select");
var v = $(".episodes-get").attr("number-episode");
$('option[data-position="' + v + '"]').attr("selected", "selected");
var p = $("option[value*='" + location.pathname + "']"),
h = (p.text(), p.next().attr("value")),
v = p.prev().attr("value"),
p = $(".episodesfastReach"),
v = (h ? '<li ><a class="waves-effect" href="' + h + '">الحلقة السابقة</a></li>' : "") + (v ? '<li ><a class="waves-effect" href="' + v + '">الحلقة التالية</a></li>' : "");
$(p).html(v)
} else m.html('<div class="box-error"><i class="fa fa-exclamation" aria-hidden="true"></i><div class="info-error"></div></div>')
}
})
})
});
But I saw a blogger site that brings the classified posts in another way, as it brings 150 posts, and when you go down to the last post, it downloads 150 others.
This is the code for that site that you saw
$.ajax({
url: url,
type: get,
dataType: jsonp,
success: function(responce) {
fn(responce, type);
}
});
}
function lazy(fn, done, err, modules) {
var document;
var _0xE6BD = err[2][3];
if(done.scrollTop() + done.innerHeight() >= done[0].scrollHeight && !modules && $(".ep").length < _0xE6BD) {
document = true; <
div class = 'lds-ring' > < div > < /div><div></div > < div > < /div><div></div > < /div>;
load($(".ae-title .loader"), document, < div class = 'lds-ring' > < div > < /div><div></div > < div > < /div><div></div > < /div>);
fn(err); modules = true; document = false;
}
}
function load(ast, document, name) {
if(document) {
ast.append(name);
} else {
ast.html("");
}
}
function np(session, lib, end) {
var THREAD_STARTED = [];
var cb = 0;
for(; cb < parseInt(end / 150) + 1; cb++) {
var id = si(cb);
ajax(/feeds/posts /
default / -/ + lib + ?alt=json-in-script&max-results=150&start-index= + id, json_to_np, [THREAD_STARTED]);
}
links_ready(THREAD_STARTED, end, append_np, [THREAD_STARTED, window.location.href, session]);
}
function links_ready(type, done, error, callback) {
if(type.length < done) {
setTimeout(links_ready, 1e3, type, done, error, callback);
} else {
error(callback);
}
}
function append_np(right) {
var [typeR, cardR, nameR] = right;
var s3 = typeR.indexOf(cardR);
var managementcommandsdns = 0 == s3 ? : < div class = 'next' > < span > الحلقة التالية < /span><a href=' + typeR[s3 - 1] + '><i class='fa fa-chevron-right'></i > < /a></div > ;
var siteName = s3 + 1 == typeR.length ? : < div class = 'previous' > < span > الحلقة السابقة < /span><a href=' + typeR[s3 + 1] + '><i class='fa fa-chevron-left'></i > < /a></div > ;
nameR.append(managementcommandsdns + siteName);
}
function json_to_np(globalComponentsContext, componentStack) {
var data;
var PL$13 = globalComponentsContext.feed.entry;
var command_codes = componentStack[0];
if(void 0 !== PL$13) {
var PL$17 = 0;
for(; PL$17 < PL$13.length; PL$17++) {
var signedTransactionsCounter = PL$13[PL$17].link.length - 1;
for(; 0 <= signedTransactionsCounter; signedTransactionsCounter--) {
if(alternate == PL$13[PL$17].link[signedTransactionsCounter].rel) {
data = PL$13[PL$17].link[signedTransactionsCounter].href;
break;
}
}
command_codes.push(data);
}
}
}
function json_to_episodes(enumValueDeclaration, parameters) {
var i;
var sprite;
var _0xE6A1;
var PL$13 = enumValueDeclaration.feed.entry;
var GET_AUTH_URL_TIMEOUT = ;
var [type, timestamp, totalSecondsToStayOpen, inhibitorObjectPaths, pkg] = parameters;
var document = true;
if(void 0 !== PL$13) {
var PL$17 = 0;
for(; PL$17 < PL$13.length; PL$17++) {
var signedTransactionsCounter = 0;
for(; signedTransactionsCounter < PL$13[PL$17].link.length; signedTransactionsCounter++) {
if(alternate == PL$13[PL$17].link[signedTransactionsCounter].rel) {
_0xE6A1 = PL$13[PL$17].link[signedTransactionsCounter].href;
break;
}
}
i = PL$13[PL$17].content.$t;
PL$13[PL$17].title.$t.match(/\u0627\u0644\u062d\u0644\u0642\u0629\s\d+(\.\d+)?/g);
GET_AUTH_URL_TIMEOUT = GET_AUTH_URL_TIMEOUT + ( < div class = 'ep' > < a href = ' + _0xE6A1 + ' > +( != (sprite = get_element(i, type)) ? sprite : الحلقة + (inhibitorObjectPaths - (PL$17 + totalSecondsToStayOpen) + 1)) + < /a></div > );
}
$(timestamp).find(".eps").append(GET_AUTH_URL_TIMEOUT);
document = false;
load(timestamp.find(".ae-title .loader"), document, pkg);
}
}
function get_element(i, name) {
var flags;
var regex = ;
i = < div > +i + < /div>;
var template = 0;
for(; template < name.length; template++) {
regex = regex + (flags = null != (flags = $(i).find(name[template]).html()) ? flags : );
}
return regex;
}
function get_episodes(layoutItems) {
var [inputElement, floatLabelOffsetLeft, success] = layoutItems;
ajax(/feeds/posts /
default / -/ + floatLabelOffsetLeft + ?alt=json-in-script&max-results=150&start-index= + inputElement, json_to_episodes, success);
}
function si(name) {
return start_ind = 150 * name + 1, start_ind;
}
function forward(name, res) {
var DLF = name.feed.openSearch$totalResults.$t;
var args = si(0);
var pkg = < div class = 'lds-ring' > < div > < /div><div></div > < div > < /div><div></div > < /div>;
var [chain_from, label, chain_memo_sender, chain_propose_account] = res;
if(load(container.find(".ae-title .loader"), true, pkg), get_episodes([args, chain_from, [chain_propose_account, label, args, DLF, pkg]]), np($("#select-chapter .np"), chain_from, DLF), DLF > 150) {
var cb = 1;
for(; cb < parseInt(DLF / 150) + 1; cb++) {
args = si(cb);
$(label).find(".eps").on(scroll, function() {
lazy(get_episodes, $(label).find(".eps"), [args, chain_from, [chain_propose_account, label, args, DLF, pkg]], executed = false);
});
executed = true;
}
}
}
var anime = $(".anname").attr("data-anime");
var episode = $(".post-title").text();
var container = $("#select-chapter");
var url = /feeds/posts /
default / -/ + anime + ?alt=json-in-script&max-results=0;
var go = ajax(url, forward, [anime, container, episode, [.nofe, .noff]]);
I want to convert my code to make it like its code

I wanted to comment this solution, but unfortunately could not.
Add a read more (jump link) in every post, then it will load as its supposed to.

JSON to HTML with jQuery (2 tables from 1 json)

This jQuery code parse json data and create html table to div:
$(document).ready(function () {
const jsonData = $.getJSON("js/quotes.json");
function quotes(a, b) {
(this.$div = $(a)),
(this._quotes = b),
(this._init = function () {
var a = this;
jsonData.then(function (b) {
if ("object" != typeof b) return !1;
var c = [];
a._quotes.forEach(function (a) {
(a = a.trim()),
b[a] &&
c.push(
'<tr data-name="' + b[a].code + '" class="' + b[a].movement + '"><td>' +
b[a].code +
'</td><td>' +
b[a].bid +
'</td><td>' +
b[a].ask +
'</td><td>' +
b[a].spread +
"</td></tr>"
);
}),
c.length > 0 && a.$div.html("<table><tr><th>Symbol</th><th>Bid</th><th>Ask</th><th>Spread</th></tr>" + c.join("") + "</table>"),
setTimeout(a._init, 50e3);
});
}),
this._init();
}
quotes("#quotes-block1", $("#quotes-block1").data("quotes1").split(","));
quotes("#quotes-block2", $("#quotes-block2").data("quotes2").split(","));
});
HTML code:
<div id="quotes-block1" data-quotes1="EUR/USD, GBP/USD, USD/CHF, USD/JPY"></div>
<div id="quotes-block2" data-quotes2="XRP/USD, LTC/USD"></div>
Json:
"XRP\/USD": {
"bid": 0.5676,
"ask": 0.5698,
"type": "Cryptos",
"code": "XRP\/USD",
"mid": 0.5687,
"movement": "down",
"spread": 0.0022
},
"LTC\/USD": {
"bid": 82.89,
"ask": 83.72,
"type": "Cryptos",
"code": "LTC\/USD",
"mid": 83.305,
"movement": "down",
"spread": 0.83
},
"ETH\/USD": {
"bid": 588.62,
"ask": 589.63,
"type": "Cryptos",
"code": "ETH\/USD",
"mid": 589.125,
"movement": "up",
"spread": 1.01
},
etc.
I need create table in div id="quotes-block1" and id="quotes-block2", but work only div id="quotes-block2"
What is my mistake? Help!
Live example:
json file: http://maxbeaub.bget.ru/json/js/quotes.json
jquery function: http://maxbeaub.bget.ru/json/js/quotes.js (get data from json and append table to div)
html result: http://maxbeaub.bget.ru/json/json.html (append table only to second div)

The reason being is content being overwritten in second div only get referenced in an a.
function quotes(a, b) {
(this.$div = $(a)),
(this._quotes = b),
(this._init = function (div) {
var a = this;
jsonData.then(function (b) {
if ("object" != typeof b) return !1;
var c = [];
a._quotes.forEach(function (a) {
(a = a.trim()),
b[a] &&
c.push(
'<tr data-name="' + b[a].code + '" class="' + b[a].movement + '"><td>' +
b[a].code +
'</td><td>' +
b[a].bid +
'</td><td>' +
b[a].ask +
'</td><td>' +
b[a].spread +
"</td></tr>"
);
}),
c.length > 0 && div.html("<table><tr><th>Symbol</th><th>Bid</th><th>Ask</th><th>Spread</th></tr>" + c.join("") + "</table>"),
setTimeout(a._init, 5e3);
});
}),
this._init(this.$div);

Extract the data between script tag using java regular expression

I want to extract the data given between the script tag. I also made a regex for this but it is not working on this string -
<script>
var arrowimages = {
down: ['downarrowclass', 'Images/arrow-down.gif', 23],
right: ['rightarrowclass', 'Images/submenu-pointer.png']
}
var jqueryslidemenu = {
animateduration: {
over: 400,
out: 400
}, //duration of slide in/ out animation, in milliseconds
buildmenu: function (menuid, arrowsvar) {
jQuery(document).ready(function ($) {
var $mainmenu = $("#" + menuid + ">ul")
var $headers = $mainmenu.find("ul").parent()
$headers.each(function (i) {
var $curobj = $(this)
var $subul = $(this).find('ul:eq(0)')
this._dimensions = {
w: this.offsetWidth,
h: this.offsetHeight,
subulw: $subul.outerWidth(),
subulh: $subul.outerHeight()
}
this.istopheader = $curobj.parents("ul").length == 1 ? true : false
$subul.css({
top: this.istopheader ? this._dimensions.h + "px" : 0
})
$curobj.children("a:eq(0)").css(this.istopheader ? {
paddingRight: arrowsvar.down[2]
} : {}).append(
'<img src="' + (this.istopheader ? arrowsvar.down[1] : arrowsvar.right[1]) + '" class="' + (this.istopheader ? arrowsvar.down[0] : arrowsvar.right[0]) + '" style="border:0;top:12px;" />'
)
$curobj.hover(
function (e) {
var $targetul = $(this).children("ul:eq(0)")
this._offsets = {
left: $(this).offset().left,
top: $(this).offset().top
}
var menuleft = this.istopheader ? 0 : this._dimensions.w
menuleft = (this._offsets.left + menuleft + this._dimensions.subulw > $(window).width()) ? (this.istopheader ? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft
if($targetul.queue().length <= 1) //if 1 or less queued animations
$targetul.css({
left: menuleft + "px",
width: this._dimensions.subulw + 'px'
}).slideDown(jqueryslidemenu.animateduration.over)
},
function (e) {
var $targetul = $(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
$curobj.click(function () {
$(this).children("ul:eq(0)").hide()
})
}) //end $headers.each()
$mainmenu.find("ul").css({
display: 'none',
visibility: 'visible'
})
}) //end document.ready
}
}
//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myjquerymenu", arrowimages)
</script>
My regex is- <script[^>]*>(.*?)</script>
other normal script tags like <script type="text/javascript" src="JsFiles/jquery.min.js"></script> are retrieved by my regular expression but i don't know why it is not working on that particular string. I needed the data between text to modify that data so grouping is required too. i have also tried jsoup for doing this task -
Elements scripts = doc.select("script");
for(Element script: scripts) {
System.out.println("src " + script);
String lineread = script.toString();
String data = script.data();
if(!data.isEmpty()) {
System.out.println(data);
Pattern p = Pattern.compile("\\\"([^\\\"]*)\\\"|'([^']*)'");
Matcher m = p.matcher(lineread);
while(m.find()) {
if(m.group(0).contains(".axd") || m.group(0).contains(".JPG") || m.group(0).contains(".jpg") || m.group(0).contains(".jpeg") || m.group(0).contains(".png") || m.group(0).contains(".js") || m.group(0).contains(".ico") || m.group(0).contains(".gif")) {
System.out.println("m.g(0) " + m.group(0));
System.out.println("m.g(1) " + m.group(1));
String changepath;
Pattern p1 = Pattern.compile("src=(.*?)>|src=\"(.*?)\"");
Matcher m1 = p1.matcher(m.group(0));
if(m1.find()) {
if(m1.group(0).contains(".axd") || m1.group(0).contains(".JPG") || m1.group(0).contains(".jpg") || m1.group(0).contains(".jpeg") || m1.group(0).contains(".png") || m1.group(0).contains(".js") || m1.group(0).contains(".ico") || m1.group(0).contains(".gif")) {
System.out.println("inner " + m1.group(0));
changepath = "\"" + main_url + "" + m1.group(1).replace("\"", "").replace("'", "") + "\"";
lineread = lineread.replace(m1.group(1), changepath);
System.out.println("data " + lineread);
}
} else {
changepath = "\"" + main_url + "" + m.group(0).replace("\"", "").replace("'", "") + "\"";
lineread = lineread.replace(m.group(0), changepath);
System.out.println("data in src " + lineread);
}
}
}
script = script.text(lineread);
System.out.println("final script " + script);
}
}
but the problem in this is the value i am getting in script(the last variable) remove all the spaces that are present in data between the script tag.
so basically i want either a regular expression for getting the data between script tag or how can i get the data without loosing spaces from second solution.

you can use the lib js2xml.
https://github.com/redapple/js2xml
import js2xml
jscode = """var arrowimages = {
down: ['downarrowclass', 'Images/arrow-down.gif', 23],
right: ['rightarrowclass', 'Images/submenu-pointer.png']
}
var jqueryslidemenu = {
animateduration: {
over: 400,
out: 400
}, //duration of slide in/ out animation, in milliseconds
buildmenu: function (menuid, arrowsvar) {
jQuery(document).ready(function ($) {
var $mainmenu = $("#" + menuid + ">ul")
var $headers = $mainmenu.find("ul").parent()
$headers.each(function (i) {
var $curobj = $(this)
var $subul = $(this).find('ul:eq(0)')
this._dimensions = {
w: this.offsetWidth,
h: this.offsetHeight,
subulw: $subul.outerWidth(),
subulh: $subul.outerHeight()
}
this.istopheader = $curobj.parents("ul").length == 1 ? true : false
$subul.css({
top: this.istopheader ? this._dimensions.h + "px" : 0
})
$curobj.children("a:eq(0)").css(this.istopheader ? {
paddingRight: arrowsvar.down[2]
} : {}).append(
'<img src="' + (this.istopheader ? arrowsvar.down[1] : arrowsvar.right[1]) + '" class="' + (this.istopheader ? arrowsvar.down[0] : arrowsvar.right[0]) + '" style="border:0;top:12px;" />'
)
$curobj.hover(
function (e) {
var $targetul = $(this).children("ul:eq(0)")
this._offsets = {
left: $(this).offset().left,
top: $(this).offset().top
}
var menuleft = this.istopheader ? 0 : this._dimensions.w
menuleft = (this._offsets.left + menuleft + this._dimensions.subulw > $(window).width()) ? (this.istopheader ? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft
if($targetul.queue().length <= 1) //if 1 or less queued animations
$targetul.css({
left: menuleft + "px",
width: this._dimensions.subulw + 'px'
}).slideDown(jqueryslidemenu.animateduration.over)
},
function (e) {
var $targetul = $(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
$curobj.click(function () {
$(this).children("ul:eq(0)").hide()
})
}) //end $headers.each()
$mainmenu.find("ul").css({
display: 'none',
visibility: 'visible'
})
}) //end document.ready
}
}
//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myjquerymenu", arrowimages)"""
parsed = js2xml.parse(jscode)
print js2xml.pretty_print(parsed)
Example output:
<program>
<var name="arrowimages">
<object>
<property name="down">
<array>
<string>downarrowclass</string>
<string>Images/arrow-down.gif</string>
<number value="23"/>
</array>
</property>
<property name="right">
<array>
<string>rightarrowclass</string>
<string>Images/submenu-pointer.png</string>
</array>
</property>
</object>
</var>
And then you can parse the XML. (is more easy with xpath)
Regards
Nelson.

Instead of using the data() method, try the html() method.
The line String data = script.data(); becomes String data = script.html().
On the other hand, if you want to change the src attributes of script tags, you can simply tell Jsoup to find them for you:
Elements scripts = doc.select("script[src]");
for(Element script: scripts) {
String src = script.attr("src");
if (src.contains(".axd")) {
script.attr("src", main_url + src);
}
}

How to change tooltip content in c3js

I'm working on a timeline display and I have data that I want to show on the tooltip. currently it only shows the value at each time. and I cannot find a way to change it. the example below shows how to change the value's format but not what values are displayed
var chart = c3.generate({
data: {
columns: [
['data1', 30000, 20000, 10000, 40000, 15000, 250000],
['data2', 100, 200, 100, 40, 150, 250]
],
axes: {
data2: 'y2'
}
},
axis : {
y : {
tick: {
format: d3.format("s")
}
},
y2: {
show: true,
tick: {
format: d3.format("$")
}
}
},
tooltip: {
format: {
title: function (d) { return 'Data ' + d; },
value: function (value, ratio, id) {
var format = id === 'data1' ? d3.format(',') : d3.format('$');
return format(value);
}
//value: d3.format(',') // apply this format to both y and y2
}
}
});
it's taken from http://c3js.org/samples/tooltip_format.html
they do admit that there isn't an example for content editing but I couldn't find anything in the reference or forums, but a suggestion to change the code (it's here: https://github.com/masayuki0812/c3/blob/master/c3.js in line 300) and below:
__tooltip_contents = getConfig(['tooltip', 'contents'], function (d, defaultTitleFormat, defaultValueFormat, color) {
var titleFormat = __tooltip_format_title ? __tooltip_format_title : defaultTitleFormat,
nameFormat = __tooltip_format_name ? __tooltip_format_name : function (name) { return name; },
valueFormat = __tooltip_format_value ? __tooltip_format_value : defaultValueFormat,
text, i, title, value, name, bgcolor;
for (i = 0; i < d.length; i++) {
if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
if (! text) {
title = titleFormat ? titleFormat(d[i].x) : d[i].x;
text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
}
name = nameFormat(d[i].name);
value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
bgcolor = levelColor ? levelColor(d[i].value) : color(d[i].id);
text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
text += "<td class='value'>" + value + "</td>";
text += "</tr>";
}
return text + "</table>";
})
did anyone attempted to do so? developed some function to facilitate the process? have any tips on how to do so correctly? I do not know how to change their code in a way I could use more data or data different than the d value the function gets.

If you use the function getTooltipContent from https://github.com/masayuki0812/c3/blob/master/src/tooltip.js#L27 and add it in the chart declaration, in tooltip.contents, you'll have the same tooltip content that the default one.
You can make changes on this code and customize it as you like. One detail, as CLASS is not defined in the current scope, but it's part chart object, I substituted CLASS for $$.CLASS, maybe you don't even need this Object in your code.
var chart = c3.generate({
/*...*/
tooltip: {
format: {
/*...*/
},
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
var $$ = this, config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value, name, bgcolor;
for (i = 0; i < d.length; i++) {
if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
if (! text) {
title = titleFormat ? titleFormat(d[i].x) : d[i].x;
text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
}
name = nameFormat(d[i].name);
value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
text += "<td class='value'>" + value + "</td>";
text += "</tr>";
}
return text + "</table>";
}
}
});

If you want to control tooltip render and use default rendering depending on data value you can use something like this:
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
if (d[1].value > 0) {
// Use default rendering
return this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color);
} else {
return '<div>Show what you want</div>';
}
},
format: {
/**/
}
}

In my case i had to add the day for the date value(x axis) in tool tip. Finally i came came up with the below solution
References for js and css
https://code.jquery.com/jquery-3.2.1.js
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js
https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css
function toDate(dateStr)
{
var numbers = dateStr.match(/\d+/g);
return new Date(numbers[0], numbers[1]-1, numbers[2]);
}
function GetMonthFromString(month)
{
var months = {'Jan' : '01','Feb' : '02','Mar':'03','Apr':'04',
'May':'05','Jun':'06','Jul':'07','Aug':'08','Sep':'09',
'Oct':'10','Nov':'11','Dec':'12'};
return months[month];
}
function GetFullDayName(formatteddate)
{
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var dayofdate = weekday[formatteddate.getDay()];
return dayofdate;
}
//Chart Data for x-axis, OnHours and AvgHours
function CollectChartData()
{
var xData = new Array();
var onHoursData = new Array();
var averageHoursData = new Array();
var instanceOccuringDatesArray = ["2017-04-20","2017-04-21","2017-04-22","2017-04-23","2017-04-24","2017-04-25","2017-04-26","2017-04-27","2017-04-28","2017-04-29","2017-04-30","2017-05-01","2017-05-02","2017-05-03","2017-05-04","2017-05-05","2017-05-06","2017-05-07","2017-05-08","2017-05-09","2017-05-10","2017-05-11","2017-05-12","2017-05-13","2017-05-14","2017-05-15","2017-05-16","2017-05-17","2017-05-18","2017-05-19","2017-05-20"];
var engineOnHoursArray = ["4.01","14.38","0.10","0.12","0.01","0.24","0.03","6.56","0.15","0.00","1.15","0.00","1.21","2.06","8.55","1.41","0.03","1.42","0.00","3.35","0.02","3.44","0.05","5.41","4.06","0.02","0.04","7.26","1.02","5.09","0.00"];
var avgUtilizationArray = ["2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29"];
xData.push('x');
onHoursData.push('OnHours');
averageHoursData.push('Project Average');
for(var index=0;index<instanceOccuringDatesArray.length;index++)
{
xData.push(instanceOccuringDatesArray[index]);
}
for(var index=0;index<engineOnHoursArray.length;index++)
{
onHoursData.push(engineOnHoursArray[index]);
}
for(var index=0;index<avgUtilizationArray.length;index++)
{
averageHoursData.push(avgUtilizationArray[index]);
}
var Data = [xData, onHoursData, averageHoursData];
return Data;
}
function tooltip_contents(d, defaultTitleFormat, defaultValueFormat, color) {
var $$ = this, config = $$.config, CLASS = $$.CLASS,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value, name, bgcolor;
// You can access all of data like this:
//$$.data.targets;
for (i = 0; i < d.length; i++) {
if (! text) {
title = titleFormat ? titleFormat(d[i].x) : d[i].x;
var arr = title.split(" ");
var datestr = new Date().getFullYear().toString() + "-"+ GetMonthFromString(arr[1]) + "-"+ arr[0];
var formatteddate = toDate(datestr);
var dayname = GetFullDayName(formatteddate);
title = title + " (" + dayname + ")";
text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
}
name = nameFormat(d[i].name);
var initialvalue = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
if (initialvalue.toString().indexOf('.') > -1)
{
var arrval = initialvalue.toString().split(".");
value = arrval[0] + "h " + arrval[1] + "m";
}
else
{
value = initialvalue + "h " + "00m";
}
bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
text += "<td class='value'>" + value + "</td>";
text += "</tr>";
}
return text + "</table>";
}
$(document).ready(function () {
var Data = CollectChartData();
var chart = c3.generate({
data: {
x: 'x',
columns: Data
},
axis: {
x: {
type: 'timeseries',
tick: {
rotate: 75,
//format: '%d-%m-%Y'
format: '%d %b'
}
},
y : {
tick : {
format: function (y) {
if (y < 0) {
}
return y;
}
},
min : 0,
padding : {
bottom : 0
}
}
},
tooltip: {
contents: tooltip_contents
}
});
});
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<div id="chart"></div>

When we have a stacked bar chart and we would like to show "Total" in the tooltip (but not in the chart as a bar/stack) this can come handy.
C3 charts use a array to store the data for tooltips and before the tooltips are displayed we are adding totals (or anyother data as per our requirement). By doing this though the totals is not available as a stack it is shown in the tooltip.
function key_for_sum(arr) {
return arr.value; //value is the key
};
function sum(prev, next) {
return prev + next;
}
var totals_object = {};
totals_object.x = d[0]['x'];
totals_object.value = d.map(key_for_sum).reduce(sum);
totals_object.name = 'total';
totals_object.index = d[0]['index'];
totals_object.id = 'total';
d.push(totals_object);
Above code has been added to ensure that total is available in
C3.js Stacked Bar chart's tooltip
var chart = c3.generate({
/*...*/
tooltip: {
format: {
/*...*/
},
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
function key_for_sum(arr) {
return arr.value; //value is the key
}
function sum(prev, next) {
return prev + next;
}
var totals_object = {};
totals_object.x = d[0]['x'];
totals_object.value = d.map(key_for_sum).reduce(sum);// sum func
totals_object.name = 'total';//total will be shown in tooltip
totals_object.index = d[0]['index'];
totals_object.id = 'total';//c3 will use this
d.push(totals_object);
var $$ = this,
config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) {
return name;
},
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value, name, bgcolor;
for (i = 0; i < d.length; i++) {
if (!(d[i] && (d[i].value || d[i].value === 0))) {
continue;
}
if (!text) {
title = titleFormat ? titleFormat(d[i].x) : d[i].x;
text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
}
name = nameFormat(d[i].name);
value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
text += "<td class='value'>" + value + "</td>";
text += "</tr>";
}
return text + "</table>";
}
}

Adding additional content or non-numerical data into the chart tooltips can be done.
This builds on #supita's excellent answer http://stackoverflow.com/a/25750639/1003746.
Its possible to insert additional metadata about each line into the classes parameter when generating/updating the chart. These can then be added as rows to the tooltip.
This doesn't seem to affect the chart - unless you are using the data.classes feature.
data: {
classes: {
data1: [{prop1: 10, prop2: 20}, {prop1: 30, prop2: 40}],
data2: [{prop1: 50, prop2: 60}'{prop1: 70, prop2: 80}]
}
}
To pick up the metadata in the config.
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
const $$ = this;
const config = $$.config;
const meta = config.data_classes;
...
for (i = 0; i < d.length; i++) {
if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
if (! text) {
...
}
const line = d[0].id;
const properties = meta.classes[line];
const property = properties? properties[i] : null;
Then add the following rows to the table to show the new properties.
if (property ) {
text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>PROP1</td>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + property.prop1 + "</td>";
text += "</tr>";
text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>PROP2</td>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" +
property.prop2+ " cm/s</td>";

If anybody cares, here is a ClojureScript version of the above algorithm (e.g. supita's answer), slightly simplified (without support for config). (This is probably nothing the OP asked for, but as of now there are so few resources on the net on this topic that most people might wind up here.)
:tooltip {
:contents
(fn [d default-title-format default-value-format color]
(this-as this
(let [this-CLASS (js->clj (.-CLASS this) :keywordize-keys true)
tooltip-name-class (:tooltipName this-CLASS)
rows (js->clj d :keywordize-keys true)
title-row (->> (first rows) (#(str "<table class='" (:tooltip this-CLASS)
"'><tr><th colspan='2'>"
(default-title-format (:x %)) "</th></tr>")))
data-rows (->> rows
(map #(str "<tr class='" tooltip-name-class "--" (:id %) "'>"
"<td class='name'><span style='background-color:"
(color (:id %)) "'></span>" (:name %) "</td>"
"<td class='value'>" (default-value-format (:value %)) "</td>"
"</tr>")))]
(str title-row (string/join data-rows) "</table>"))))}

Your question is about changing the content of the tooltip in c3js.
The tooltip has 3 variables
+----------------+
| title |
+----------------+
| name | value |
+----------------+
Plus, you want to add 'name' from an additional variable, other than those used in 'column'.
tooltip: {
format: {
title(x, index) { return ''; },
name(name, ratio, id, index) { return lst[index + 1]; },
value(value, ratio, id, index) { return value; }
}
},
this worked for me, feel free to play around with the arguments, to get what you need.

I faced a problem which is related tooltip position and style for c3 before. in order to arrange tooltip in c3 freely, my suggestion is manipulating tooltip with d3.
// internal = chart.internal()
const mousePos = d3.mouse(internal.svg.node()); // find mouse position
const clientX = mousePos[0]; //for x
const clientY = mousePos[1]; //for y
const tooltip = d3.select("#tooltip"); //select tooltip div (apply your style)
tooltip.style("display", "initial"); //show tooltip
tooltip.style("left", clientX - mouseOffSet.X + "px"); // set position
tooltip.style("top", clientY - mouseOffSet.Y + "px"); // set position
tooltip.html("<span>" + content + "</span>");
// you can arrange all content and style whatever you want
<div
id="tooltip"
className="your-style"
style={{ display: "none", position: "absolute" }}
/>
Good luck!!

multiple onload error in HTML

HTML:-
In the body tag I have used onload="variable2.init() ; variable1.init();".
JavaScript:-
var variable1 = {
rssUrl: 'http://feeds.feedburner.com/football-italia/pAjS',
init: function() {
this.getRSS();
},
getRSS: function() {
jQuery.getFeed({
url: variable1.rssUrl,
success: function showFeed(feed) {
variable1.parseRSS(feed);
}
});
},
parseRSS: function(feed) {
var main = '';
var posts = '';
var className = 'even';
var pst = {};
for (i = 0; i < feed.items.length; i++) {
pst = variable1.parsefootballitaliaRSS(feed.items[i]);
if (className == 'odd') {
className = 'even';
}
else {
className = 'odd';
}
var shorter = pst.story.replace(/<(?:.|\n)*?>/gm, '');
item_date = new Date(feed.items[i].updated);
main += '<div id="content1" class="post-main ' + className + '" onclick="mwl.setGroupTarget(\'#screens1\', \'#blog_posts1\', \'ui-show\', \'ui-hide\');mwl.setGroupTarget(\'#blog_posts1\', \'#post' + (i+1) + '\', \'ui-show\', \'ui-hide\');">';
main += '<b>' + pst.title.trunc(55, true) + '</b><br />' + shorter.trunc(30, true);
main += '<div class="datetime">' + item_date.getDateTime() + '</div></div>';
posts += '<div class="post-wrapper ui-hide" id="post' + (i+1) + '">';
posts += '<div class="post-title"><b>' + pst.title + '</b></div>';
posts += feed.items[i].description;
posts += '</div>';
}
jQuery('#main_screen1').html(main);
jQuery('#blog_posts1').html(posts);
},
parsefootballitaliaRSS: function(item) {
var match = item.description.match('src="([^"]+)"');
var part = item.description.split('<font size="-1">');
var arr = {
title: item.title,
link: item.link,
image: match,
site_title: item.title,
story: item.description
};
return arr;
}
};
var variable2 = {
weatherRSS: 'http://feeds.feedburner.com/go/ELkW',
init: function() {
this.getWeatherRSS();
},
getWeatherRSS: function() {
jQuery.getFeed({
url: variable2.weatherRSS,
success: function showFeed(feed) {
variable2.parseWeather(feed);
}
});
},
parseWeather: function(feed) {
var main = '';
var posts = '';
var className = 'even';
var pst = {};
for (i = 0; i < feed.items.length; i++) {
pst = variable2.parsegoRSS(feed.items[i]);
if (className == 'odd') {
className = 'even';
}
else {
className = 'odd';
}
var shorter = pst.story.replace(/<(?:.|\n)*?>/gm, '');
item_date = new Date(feed.items[i].updated);
main += '<div id="content2" class="post-main ' + className + '" onclick="mwl.setGroupTarget(\'#screens2\', \'#blog_posts2\', \'ui-show\', \'ui-hide\');mwl.setGroupTarget(\'#blog_posts2\', \'#post' + (i+1) + '\', \'ui-show\', \'ui-hide\');">';
main += '<b>' + pst.title.trunc(55, true) + '</b><br />' + shorter.trunc(30, true);
main += '<div class="datetime">' + item_date.getDateTime() + '</div></div>';
posts += '<div class="post-wrapper ui-hide" id="post' + (i+1) + '">';
posts += '<div class="post-title"><b>' + pst.title + '</b></div>';
posts += feed.items[i].description;
posts += '</div>';
}
jQuery('#main_screen2').html(main);
jQuery('#blog_posts2').html(posts);
},
parsegoRSS: function(item) {
var match = item.description.match('src="([^"]+)"');
var part = item.description.split('<font size="-1">');
var arr = {
title: item.title,
link: item.link,
image: match,
site_title: item.title,
story: item.description
};
return arr;
}
};
When I run the program it only reads one of the variables i.e. either 1 or 2.
How can I correct them to read both the variables?

Use this.
<script type="text/javascript">
window.onload = function() {
variable1.init();
variable2.init();
}
</script>

Try this
<body onload="callFunctions()">
JS-
function callFunctions()
{
variable1.init();
variable2.init();
}
Update-
Also
there are other different ways to call multiple functions on page load
Hope it hepls you.