We Keep Coding

How do I scrape an argument of a javascript function inside of a javascript html tag?

I want to scrape out the arguments of the Dygraph function(the long line of dates mainly), as they are points on a graph. Until now, I was scraping other kinds of tags which were easily gettable by using the findAll function, however, looks like I need to dig deeper that that in this problem.
<script type="text/javascript">
g = new Dygraph(
// containing div
document.getElementById('DailySubscribers'),
// CSV or path to a CSV file.
"Date,Daily Subs\n" + "2016-07-31,1\n" + "2016-08-01,1\n" + "2016-08-02,0\n" + "2016-08-03,1\n" + "2016-08-04,0\n" + "2016-08-05,2\n" + "2016-08-06,10\n" + "2016-08-07,5\n" + "2016-08-08,1\n" + "2016-08-09,1\n" + "2016-08-10,2\n" + "2016-08-11,0\n" + "2016-08-12,0\n" + "2016-08-13,0\n" + "2016-08-14,0\n" + "2016-08-15,1\n" + "2016-08-16,1\n" + "2016-08-17,0\n" + "2016-08-18,0\n" + "2016-08-19,1\n" + "2016-08-20,0\n" + "2016-08-21,1\n" + "2016-08-22,0\n" + "2016-08-23,0\n" + "2016-08-24,7\n" + "2016-08-25,2\n" + "2016-08-26,0\n" + "2016-08-27,1\n" + "2016-08-28,1\n" + "2016-08-29,0\n" + "2016-08-30,0\n" + "2016-08-31,0\n" + "2016-09-01,0\n" + "2016-09-02,0\n" + "2016-09-03,0\n" + "2016-09-04,0\n" + "2016-09-05,1\n" + "2016-09-06,0\n" + "2016-09-07,0\n" + "2016-09-08,0\n", {
title: 'Daily Subs Gained for UCZx2vmIsQQLwzqwGWUbfqQA ',
legend: 'always',
ylabel: 'Daily Subs',
titleHeight: 20,
labelsDivStyles: {
'background': 'none',
'margin-top': '-10px',
'text-align': 'right',
},
strokeWidth: 1,
colors: ["#dd2323",
"#dd2323",
"#dd2323",
"#dd2323"],
labelsKMB: true,
maxNumberWidth: 10
}
);
</script>

Here is a quick way to solve it (Bruteforce but working)
bs = BeautifulSoup(data, 'html.parser')
print(bs)
values = (str(bs).split('"Date,Daily Subs\\n" +')[1].split(', {')[0].replace('\\n" + "', " ").replace('\\n', " ").replace("\"", "").split(" "))[1:-1]
print(values)
Output:
<script type="text/javascript">g = new Dygraph(// containing divdocument.getElementById('DailySubscribers'),// CSV or path to a CSV file."Date,Daily Subs\n" + "2016-07-31,1\n" + "2016-08-01,1\n" + "2016-08-02,0\n" + "2016-08-03,1\n" + "2016-08-04,0\n" + "2016-08-05,2\n" + "2016-08-06,10\n" + "2016-08-07,5\n" + "2016-08-08,1\n" + "2016-08-09,1\n" + "2016-08-10,2\n" + "2016-08-11,0\n" + "2016-08-12,0\n" + "2016-08-13,0\n" + "2016-08-14,0\n" + "2016-08-15,1\n" + "2016-08-16,1\n" + "2016-08-17,0\n" + "2016-08-18,0\n" + "2016-08-19,1\n" + "2016-08-20,0\n" + "2016-08-21,1\n" + "2016-08-22,0\n" + "2016-08-23,0\n" + "2016-08-24,7\n" + "2016-08-25,2\n" + "2016-08-26,0\n" + "2016-08-27,1\n" + "2016-08-28,1\n" + "2016-08-29,0\n" + "2016-08-30,0\n" + "2016-08-31,0\n" + "2016-09-01,0\n" + "2016-09-02,0\n" + "2016-09-03,0\n" + "2016-09-04,0\n" + "2016-09-05,1\n" + "2016-09-06,0\n" + "2016-09-07,0\n" + "2016-09-08,0\n", { title: 'Daily Subs Gained for UCZx2vmIsQQLwzqwGWUbfqQA ', legend: 'always', ylabel: 'Daily Subs', titleHeight: 20, labelsDivStyles: { 'background': 'none', 'margin-top': '-10px', 'text-align': 'right', }, strokeWidth: 1, colors: ["#dd2323", "#dd2323", "#dd2323", "#dd2323"], labelsKMB: true, maxNumberWidth: 10 });</script>
['2016-07-31,1', '2016-08-01,1', '2016-08-02,0', '2016-08-03,1', '2016-08-04,0', '2016-08-05,2', '2016-08-06,10', '2016-08-07,5', '2016-08-08,1', '2016-08-09,1', '2016-08-10,2', '2016-08-11,0', '2016-08-12,0', '2016-08-13,0', '2016-08-14,0', '2016-08-15,1', '2016-08-16,1', '2016-08-17,0', '2016-08-18,0', '2016-08-19,1', '2016-08-20,0', '2016-08-21,1', '2016-08-22,0', '2016-08-23,0', '2016-08-24,7', '2016-08-25,2', '2016-08-26,0', '2016-08-27,1', '2016-08-28,1', '2016-08-29,0', '2016-08-30,0', '2016-08-31,0', '2016-09-01,0', '2016-09-02,0', '2016-09-03,0', '2016-09-04,0', '2016-09-05,1', '2016-09-06,0', '2016-09-07,0', '2016-09-08,0']

Highcharts Bar Graph's Tool Tip Point Format

I have created a bar graph using HighCharts.js. Below is my declaration:
var myChart = Highcharts.chart(id, {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: x,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Amount (Php)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat:'<tr>' +
'<td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td>' +
'</tr>',
footerFormat:'</table>',
shared: true,
useHTML: true
},
plotOptions:{
column:{
pointPadding: 0.2,
borderWidth: 0
}
},
series: data
});
See image below:
I want the Point value's format in the Tooltip to be like this:
Apr
Collections: 7,903,113.53
Disbursements: 218,257,774.81
I tried changing pointFormat attribute in my declaration to the code below:
pointFormat:'<tr>' +
'<td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y.formatMoney(2, ".", ",")}</b></td>' +
'</tr>',
In my java script I created a function below:
Number.prototype.formatMoney = function(c, d, t){
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
But throws an error:
highcharts.js?Z:20 Uncaught TypeError: Cannot read property '", ",")' of undefined
Is there an easy/other way to implement what I want? Here is my jsfiddle.

Instead of using pointFormat, use pointFormatter callback
pointFormatter: function() {
return '<tr>' +
'<td style="color:' + this.series.color + ';padding:0">' +
this.series.name + ': </td>' +
'<td style="padding:0"><b>' + this.y.formatMoney(2, '.', ',') +
'</b></td>' +
'</tr>';
},
Example: https://jsfiddle.net/w64runoo/11/
Also, polluting Number.prototype is a not a clean way to do this. You can check Highcharts' numberFormat callback and extend it with your function.
http://api.highcharts.com/highcharts/Highcharts.numberFormat
Check also global lang options where you can define thousandStep and decimalPoint http://api.highcharts.com/highcharts/lang.thousandsSep

Highchart tooltip customization

I am using highcharts and i would like to customize tooltip.
My tooltip should show the reqName and reqVersion,but currently the tooltip is showing all the values of the 'tipValue' array.
When i hover over the column it shows me tooltip on each column as (1.1,1.0,1.2,1.2)
where as I would like the tooltip to show version
1.1 for column tpReq
1.0 for column opReq
1.2 for column Rex
1.2 for column tpReq
My xVaue is an array of ['tpReq','opReq','Rex','tpReq']
My yValue is an array of [5,8,5,1]
My tipValue is an array of ['1.1','1.0','1.2','1.2']
Here is my function to draw the highcharts
function drawchar(myXAxis,myYAxis,myTooltip)
{
var xValue = JSON.parse(XAxis);
var yValue = JSON.parse(YAxis);
var tipValue = JSON.parse(myTooltip);
var reqTypeChart = new HighCharts.Chart ({
...
...
xAxis: {
categories: xValue,
title: { 'My Requests'
text: null
},
},
....
series: [{
name: 'Status',
data: yValue
}],
legend: { enabled: false },
tooltip: {
formatter: function () {
return '<b>' + this.xValue + '</b><br/>' +
'IssueCount: ' + Highcharts.numberFormat(this.yValue, 0) + '</b><br/>' +
'AppVersion: ' + tipValue ;
}
...
});
}

Try this.
function drawchar(myXAxis, myYAxis, myTooltip) {
var xValue = JSON.parse(myXAxis);
var yValue = JSON.parse(myYAxis);
var tipValue = JSON.parse(myTooltip);
var data = [];
$.each(xValue, function (index, val) {
var tempObj = {
x: val,
y: yValue[index],
tipValue: tipValue[index]
}
data.push(tempObj);
});
// **UPDATED **
data.sort(function(a, b){
if(a.x < b.x) return -1;
if(a.x > b.x) return 1; return 0;
})
var reqTypeChart = new HighCharts.Chart({
xAxis: {
title: {
text: 'My Requests'
}
},
series: [
{
name: 'Status',
data: data
}
],
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.point.x + '</b><br/>' +
'IssueCount: ' + Highcharts.numberFormat(this.point.y, 0) + '</b><br/>' +
'AppVersion: ' + this.point.tipValue;
}
}
});
}
Combine all three values into one array of objects and set that array as data source in series of highchart api. You'll get passed object inside formatter method of tooltip wrapped into this.point object.

I managed to solve this problem by changing the tooltip formater. So first find the index of xValue and find the corresponding tooltip value from tipValue array.
formatter: function () {
var index = xValue.indexOf(this.xValue);
var tip = tipValue[index];
return '<b>' + this.xValue + '</b><br/>' +
'IssueCount: ' + Highcharts.numberFormat(this.yValue, 0) + '</b><br/>' +
'AppVersion: ' + tip ;

Highstock - How can i display the open, high, low, close in the line or area charts tooltip

I'm trying to display the open, high, low, close in the line or area chart's tooltip. Right now, the data for the line and the area charts is being sent in a JSON array which looks like this
{timestamp, close}
Now for OHLC or candlestick charts this JSON changes to
{timestamp,open, high, low, close}
I've tried this method which only works for OHLC and candlestick.
tooltip: {
valueDecimals: 2,
useHTML: true,
formatter: function() {
/*
* tooltip formatter function
*
*/
var d = new Date(this.x);
var s = '';
if (chartGlobalOptions.range.indexOf("m") >= 0) {
s += '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b><br />';
} else {
s += '<b>' + Highcharts.dateFormat('%b %e, %Y [%H:%M]', this.x) + '</b><br />';
}
$.each(this.points, function(i, point) {
if (point.series.name.indexOf("Volume") >= 0) {
/*
* if the series is volume, then don't show the decimals
*
*/
s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' </span>' + ' : ' + Highcharts.numberFormat(point.y, 0) + '</b><br />';
} else if (point.series.type == 'candlestick' || point.series.type == 'ohlc') {
s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' : ' + Highcharts.numberFormat(point.point.close, 3) + '</b><br />';
s += '<span style ="color:' + point.series.color + ';">Open</span>: ' + point.point.open +
'<br/><span style ="color:' + point.series.color + ';">High</span>: ' + point.point.high +
'<br/><span style ="color:' + point.series.color + ';">Low</span>: ' + point.point.low +
'<br/><span style ="color:' + point.series.color + ';">Close</span>: ' + point.point.close + '<br/>';
}
else {
s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' </span>' + ' : ' + Highcharts.numberFormat(point.y, 3) + '</b><br />';
}
});
return s;
},
shared: true
},
What modifications are needed to be done in order to display ohlc values in the tooltip of the line chart ? I've been trying to find a solution for quite some time without any success.
Thanks,
Maxx
EDIT
Here is the series option that i'm setting
series: [{
type: chartGlobalOptions.chartTypes.name,
name: $('#symbol-name').text(),
data: data.prices,
id: 'Price Axes',
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: data.volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits,
approximation: 'close'
}
}]
And here is the data that i'm getting from the server.
{"prices":[{"x":1387377184000,"y":1.05,"high":1.06,"low":1.05,"open":1.06,"close":1.05},{"x":1387377509000,"y":1.04,"high":1.06,"low":1.04,"open":1.05,"close":1.04},{"x":1387378295000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387379370000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387380217000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387381181000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387381324000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03},{"x":1387382146000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03},{"x":1387383229000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03}],
"volume":[[1387377184000,0],[1387377509000,35600],[1387378295000,0],[1387379370000,25300],[1387380217000,0],[1387381181000,0],[1387381324000,4500],[1387382146000,1700],[1387383229000,4000],[1387383788000,2600],[1387384004000,1000],[1387384218000,2900],[1387385045000,0],[1387385840000,10000],[1387386013000,100],[1387386627000,6200],[1387386981000,0],[1387387439000,2500],[1387387728000,2500],[1387387950000,0],[1387388920000,0],[1387389210000,500],[1387389890000,15500],[1387390124000,400],[1387390988000,11900],[1387391264000,4900],[1387391832000,0],[1387392803000,0],[1387393369000,6200],[1387393774000,200],[1387394744000,0],[1387395716000,0],[1387395904000,2800],[1387396334000,15000],[1387396689000,0],[1387397664000,0],[1387398328000,12300],[1387398706000,7000],[1387400379000,13000],[1387463638000,0],[1387464573000,46200],[1387465371000,4000],[1387465588000,0],[1387465948000,33000],[1387466607000,0],[1387466883000,11400],[1387468648000,13500],[1387470272000,12800],[1387470693000,0],[1387471718000,0],[1387472674000,0],[1387472742000,0],[1387473768000,100],[1387474795000,0],[1387475319000,29500],[1387475698000,99100],[1387475822000,14400],[1387476297000,3400]]}
Here is how i'm setting the data in the server
$this->price[] = array (
$eachRow[ "timestamp" ] * 1000 ,
$eachRow[ "close" ] * 1 ,
$eachRow[ "high" ] * 1 ,
$eachRow[ "low" ] * 1 ,
$eachRow[ "open" ] * 1 ,
$eachRow[ "close" ] * 1
) ;
return json_encode ( array (
"prices" => $this->resultArray[ "prices" ] ,
"volume" => $this->resultArray[ "volume" ] ));
And i do a var data = JSON.parse(data); at the very beginning just after i get the values from the server. Please let me know what is wrong with my program. I mean if i hardcode the same values directly in the data object i get the correct result.

You need to add that info to your points, for example:
series: [{
//type : 'ohlc',
name: 'AAPL Stock Price',
data: [{
x: 1367884800000,
y: 100,
high: 150,
low: 90,
close: 120,
open: 100
}, {
x: 1367984800000,
y: 120,
high: 170,
low: 120,
close: 160,
open: 120
}, {
x: 1368084800000,
y: 160,
high: 160,
low: 90,
close: 120,
open: 160
}]
}]
jsFiddle demo: http://jsfiddle.net/UTsT4/
Note: when you will have a lot of points, and dataGrouping will be used, point info (opten/high/low/close) will be lost. So that will only work with disabled dataGrouping.

How to get multiple series data in tooltip highcharts?

I want to display multiple series Data in tooltip on every column
tooltip: {
formatter: function() {
return '<span style="color:#D31B22;font-weight:bold;">' +this.series.name +': '+ this.y +'<br/>'+
'<b style="color:#D31B22;font-weight:bold;">'+this.x +'</b><span>';
}
},
and Data
series: [{
showInLegend: false,
name: 'Total Click',
data: [3000,200,50,4000],
color: '#9D9D9D'
}, {
showInLegend: false,
name: 'Total View',
data: [100,2000,3000,4000],
color: '#D8D8D8'
}]
I am using like this but in tool tip only one series data is showing at a time.
I want to display Data like this (Total View:100 and Total Click:3000 )

please try using this code
updated DEMO
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">'+ point.series.name +' : '+
point.y +'<span>');
});
return s.join(' and ');
},
shared: true
},

You need to use shared parameter http://api.highcharts.com/highcharts#tooltip.shared and then in formater iterate on each point.

If anybody looking for scatterplot, here is solution to show shared tooltip.
formatter: function(args) {
var this_point_index = this.series.data.indexOf( this.point );
var this_series_index = this.series.index;
var that_series_index = this.series.index == 0 ? 1 : 0; // assuming 2 series
var that_series = args.chart.series[that_series_index];
var that_point = that_series.data[this_point_index];
return 'Client: ' + this.point.name +
'<br/>Client Health: ' + this.x +
'<br/>' + this.series.name + ' Bandwidth: ' + this.y + 'Kbps' +
'<br/>' + that_series.name + ' Bandwidth: ' + that_point.y + 'Kbps';
}
Jsfiddle link to Solution