Develop Reference

why my text is not appearing above jsPdf Autotable?

I'm using autotable in jsPDF to create index page,
my code looks likes this :
let page_3_main_title = "Index";
pdf.setFontSize(12);
pdf.setFontType("Times New Roman");
pdf.text(page_3_main_title, 105, 20, "center");
var page_3_title = ['Sr No.', 'Particulars', 'Page No']
var page_3_body = [
[1, "Location and location sketch"],
[2, "Details of beds"],
[3, "Seed details"],
[4, "Pre-treatment of Seeds"],
[5, "Details of Sowing"],
[6, "Watering"],
[7, "Plant/Seedlings Protection measure"],
[8, "Observations"],
[9, "Inspection Notes"],
[10, "Cost Analysis"],
[11, "Details of Disposal of Seedlings"],
[12, "Photograph"],
];
pdf.autoTable(page_3_title, page_3_body, { theme: "grid" });
I'm able to print the index in a table but the text "INDEX" above the table is not printing, what might be the reason?

I think you had the same issue as I had.. you need to adjust the y axis coordinate of the starting point of your table. Add the option startY: 75 to your autotable creation function and it will be set lower so you will see your text as it should be the case.
should look like:
*pdf.autoTable(page_3_title, page_3_body, startY: 75, { theme: "grid" });*

how can I see the current element that represents a bar to which the hovering is applied

I have a chart in which hovering shows all the elements represented by bars, but they are too many and this produces problems such as the appearance of a scrollbar.
I would like to know if there is a way to show only the current bar that is hovering. In the c3.js documentation I see that this property exists to change the content of the tooltip, but I don't know how to get the current bar to which it is hovering.
With this:
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
console.log(d, defaultTitleFormat, defaultValueFormat, color);
return "fds";
}
this is my live code:
var query = [
["x", "Usuarios"],
["Berta Arroyave", 53],
["Rogelio Zuluaga", 52],
["Manrique Perez", 42],
["Justin Vargas", 33],
["Believer qw", 28],
["María Jimenez", 14],
["Nairo Quintan", 12],
["Adriana Cardona", 11],
["Departamento Idio", 9],
["Natalia Benjumea", 7],
["Bibliotecatos", 7],
["Jose Herrera", 7],
["Doralibia", 6],
["Secretaría General ", 6],
["Natalia Ochoa", 6],
["Viviana Cano", 5],
["Erika Valencia", 5],
["Sandra Cañon", 3],
["Lina Constanza Suaza", 3],
["Recepción User", 2],
["Facultad Medicina ", 2],
["Sandra Valencia", 2],
["Luz Sepulveda", 2],
["Heidy Zapata", 2],
["Gabriela García", 2],
["Auxiliar Administrativo", 2],
["Adriana Mejia", 2],
["Administrador", 1],
["Nathaly", 1]
]
c3.generate({
data: {
x: 'x',
columns: query,
type: 'bar'
},
axis: {
x: {
type: 'category' // this needed to load string x value
}
}
});
how can I do it?
https://jsfiddle.net/50uej3at/

I think your problem here is that your data is in the wrong format to what you appear to be aiming for... rather than having one entry per category you've got one category with everything as an entry within it...
If you put this line after your query data definition:
query = d3.transpose(query);
You should get one bar per person and no massive tooltips
https://jsfiddle.net/yta1s9cz/1/
(I also adjusted the axis label rotation to make the labels readable)

Easiest Way to AutoRefresh Google Charts embeded within a page

I have two files, one outputting data from a MySQL database and one drawing a Google Graph within a page with other metrics:
grab_twitter_stats.php Output:
[15, 32], [14, 55], [13, 45], [12, 52], [11, 57], [10, 55], [9, 58], [8, 42], [7, 44], [6, 40], [5, 54], [4, 52], [3, 60], [2, 71], [1, 43],
index.php Output:
<div id="curve_chart" style="width: 900px; height: 500px">
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Minutes', 'Tweets'],
<?php require('grab_twitter_stats.php');?>
]);
var options = {
title: 'Tweets in last 15 Minutes',
curveType: 'function',
hAxis: {
title: 'Last 15 Minutes',
direction: '-1'
},
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</div>
This draws a graph that shows tweets in the last 15 minutes. I can get the graph to appear once, but upon trying to load a SetInterval, it does not refresh the Google Graph on the interval. I have tried wrapping the entire drawChart() function in it, and it doesn't seem to be working. I tried using AJAX but it is not formatted in JSON so ajax doesn't like it. Any suggestions on the easiest way to make this graph auto refresh?

although not JSON, you can still use ajax, even with plain text
something like this should get you close...
google.charts.load('current', {
callback: function () {
drawChart();
setInterval(drawChart, (15 * 60 * 1000));
function drawChart() {
$.ajax({
url: 'grab_twitter_stats.php',
type: 'get',
success: function (txt) {
// check for trailing comma
if (txt.slice(-1) === ',') {
txt = txt.substring(0, txt.length - 1);
}
var txtData = JSON.parse('[["Minutes", "Tweets"],' + txt + ']');
var data = google.visualization.arrayToDataTable(txtData);
var options = {
title: 'Tweets in last 15 Minutes',
curveType: 'function',
hAxis: {
title: 'Last 15 Minutes',
direction: '-1'
},
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
});
}
},
packages: ['corechart']
});

Data driven line-width in Mapbox JS GL

I have added a geojson to my map. One of the feature's properties is called delay - it contains numbers between 0 and 160. Below, I have tried to make line-width a function of the value in this property (using this link as an example), just as one would style color. In fact, I would like it to be a mathematical function ( sqrt(delay) as opposed to using categories), but in either case I receive a syntax error in the console every time unexpected ")", suggesting that one cannot style line-width in the same way as color. What would be the best workaround in Mapbox JS GL?
map.on('load', function () {
map.addSource("routes", {
"type": "geojson",
"data": "simplify_830.geojson"
});
map.addLayer({
"id": "routes",
"type": "line",
"source": "routes",
"layout": {},
"paint": {
"line-color": "#FFA500",
'line-width': {
property: 'delay',
stops: [
[0, 2],
[20, 4],
[40, 6],
[60, 8],
[80, 10],
[100, 12],
[120, 14],
[140, 16],
[160, 20]
]
},
"filter": ["==", "name", ""]
});

We don't yet support data-driven styling for line properties.
We plan to add it very soon per http://github.com/mapbox/mapbox-gl-js/issues/2729.
My apologies for not more clearly communicating the state of data-driven styling support. A colleague of mine is working on a support table now! https://github.com/mapbox/mapbox-gl-style-spec/pull/465

Dashboard using google charts with two tables

I'm trying to create a Dashboard with column chart and a few category filters in my app, I have data like this :
['First name', 'City', 'Number of children'],
['Michael' , 'London', 2],
['Elisa', 'Paris', 3],
['Robert', 'Moskov', 3],
['John','LA', 1],
['Jessica', 'Kyiv', 3],
['Aaron', 'New York', 2],
['Margareth','Tokyo', 3 ]
but I have to visualize not this data, but a table with total amount of people with same number of children:
['1 child', '2 children', '3 children'],
[1, 2 , 4]
So when I apply some filter to first table than data in second table must be re-calculated automatically. Can I somehow bind this tables and controls together ? Or I have to put some handlers for each filter and re-calculate data manually ?

I assume that given your data:
['First name', 'City', 'Number of children'],
['Michael' , 'London', 2],
['Elisa', 'Paris', 3],
['Robert', 'Moskov', 3],
['John','LA', 1],
['Jessica', 'Kyiv', 3],
['Aaron', 'New York', 2],
['Margareth','Tokyo', 3 ]
You want to group by your 2nd column (number of children) to get this result:
[1, 1],
[2, 2],
[3, 4]
You can do this easily using the group by aggregation feature for data tables.
Here is sample code:
function drawJoin() {
var dt = google.visualization.arrayToDataTable([
['First name', 'City', 'Number of children'],
['Michael' , 'London', 2],
['Elisa', 'Paris', 3],
['Robert', 'Moskov', 3],
['John','LA', 1],
['Jessica', 'Kyiv', 3],
['Aaron', 'New York', 2],
['Margareth','Tokyo', 3 ]
]);
// Group dt by column 2, and count number of entries for each.
var grouped_dt = google.visualization.data.group(
dt, [2],
[{'column': 0, 'aggregation': google.visualization.data.count, 'type': 'number'}]);
var table = new google.visualization.Table(document.getElementById('table'));
table.draw(dt, null);
var grouped_table = new google.visualization.Table(document.getElementById('grouped_table'));
grouped_table.draw(grouped_dt, null);
}
Feel free to try it out on Google Playground (just copy-paste the above code in).
You can graph that as is, or you can transpose it using a javascript function to transcribe rows/columns in your datatable.
So you should filter using your controls on the original data table, and then create a grouping function, and draw the grouped table in your chart.
If you want the labels to read '1 child' instead of just the number 1, then you need to create a function using SetFormattedValue() since the output of the group would be a number. You could mix this with the transpose function above since you're already doing work on the data table.

Assume I have the same data, group them and build column chart based on grouped data. Now I want to add some filters. I can easy add any filter for the column I use in grouping data, but when I add some filter for another column I got error "Invalid column label". For example if I add :
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Performance',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
everything will be fine, but my aim is to add filters for columns 'City' and 'First name' and changing their values should effect on my column chart with grouped data. If this possible to do?