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" });*
Related
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)
I would like to find an approach on how to draw 2 lines in ECharts and fill up the space between them like this:
So that each line has it's own color. Depending on order of lines - area is filled into one color or another (see image).
Is there a native way of doing it? I found that some people are mentioning extensions, but nobody is providing any kind of instructions on how to write them from scratch.. Nor I found any examples on official documentation page. I would appreciate if somebody could point me to correct direction on how to achieve this goal.
In the worst case - I would accept other libraries if they have such very needed option.
The best I could do is this:
var chartOptions = {
xAxis: [{
type: 'value'
}],
yAxis: [{
type: 'value'
}],
series: [{
type: "line",
data: [[0, 4], [1, 3], [2, 2], [3, 2], [4, 1], [5, 2]],
}, {
type: "line",
data: [[0, 2], [1, 3], [2, 4], [3, 8], [4, 5], [5, 0]],
}],
};
var aChart = echarts.init(document.getElementById('aGraph'));
aChart.setOption(chartOptions);
I've used areaStyle to fill the area between the axisLine and the data. I would try to solve this issue by adding the green/yellow areaStyle to the green series, adding a pink areaStyle to the red series, and then adding a white areaStyle to a new series made up from the min values from the other two series. Combined with a lineStyle with a width of 0, you could mostly achieve the look in the sketch, however, the minimum series fill would probably also obscure the interior grid lines.
I want to set a custom color for missing values in plotly javascript and cannot figure out how.
In the following example the missing value is represented by null in the array given to the color property.
<script src="https://cdn.plot.ly/plotly-latest.js" ></script>
<div id="myDiv" style="width:100%;height:100%" ></div>
<script>
var color_scale = [[0, "#ff0000"], [1, "#00ff00"]];
var trace = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
marker: {
color: [1, 2, 3, null],
colorscale: color_scale
},
mode: 'markers',
type: 'scatter'
};
var data = [trace];
Plotly.newPlot('myDiv', data);
</script>
If I understand correctly, you want to break out of the defined color-scale from #ff0000 to #00ff00?
in the marker.color-array, you can also specify strings, which can contain any way of defining a color: hex-notation, name, rgb, ...
So this should be along the lines of what you are looking for:
color: [1,2,3,'#0000ff'],
I have built a Form Designing application on top of
dsmorse(dsmorse.github.io/gridster.js/)
grister and I can't add widget in more than 15 rows. I tried gridster.options.max_rows=60; but it didn't worked in my case.
set max_rows to the number the rows desired
example
gridster[{0}] = $('#grTer_{0} ul').gridster({
widget_base_dimensions: ['auto', 55],
autogenerate_stylesheet: true,
min_cols: 1,
max_cols: 12,
max_rows: 140,
extra_rows : 40,
widget_margins: [30, 30]
}).data('gridster');
by default max_rows is 15 row max
I want to create a flot bar chart that will display true and false figures, like my example below.
I want the true bar to be green and the false one to be red. I've tried using the colors array but it doesn't work properly.
My current code:
var options3 = {grid: {hoverable: true},series: {bars: {show: true,barWidth: 0.6,align: "center"}},yaxis: {min:0,tickSize: 1},xaxis: {mode: "categories",ticks: [ [0, 'True'], [1, 'False'] ],tickLength: 0},tooltip: true,tooltipOpts: {content: '%y Votes', defaultTheme: false}, colors: [ "#FF0000", "#00FF00"]};
var data3 = [ [0, 3], [1, 9] ];
$(document).ready(function() {
$.plot('#graph3', [data3], options3);
});
Example: http://joshblease.co.uk/Maths/Admin/chart.php#graph3
The problem is that you have only one data series, which is assigned the first color in your array (red). You will get the result you want if you replace
var data3 = [ [0, 3], [1, 9] ];
with
var data3 = [
[[0, 3]],
[[1, 9]]
];
Then use data3 in the plot instead of [data3]. See the jsFiddle.