trying to export a RingChart as png, I don't use title or legend, just the chart, still I have white space on the top and bottom:
creating via factory:
JFreeChart chart = ChartFactory.createRingChart(
null,
dataset,
false,
false,
false
);
the following didn't help:
chart.setPadding(new RectangleInsets(0, 0, 0, 0));
RingPlot plot = (RingPlot) chart.getPlot();
plot.setInsets(new RectangleInsets(0, 0, 0, 0.0));
I need the chart to be without any margins for the exported image, any idea?
Thanks
Related
I have implemented tradingview's lightweight chart in my app, and the chart looks like this. There is a dotted horizontal line for the last price.
Is it possible to hide the horizontal line?
When creating the series, you can set the priceLineVisible option to false to disable that line.
const mainSeries = chart.addLineSeries({
priceLineVisible: false,
});
Documentation: https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinevisible
For removing ltp dotted line in your chart you should set priceLineVisible to false in addAreaSeries.
var areaSeries = chart.addAreaSeries({
priceLineVisible: false,
topColor: this.config.topColor,
bottomColor: this.config.bottomColor,
lineColor: this.config.lineColor,
lineWidth: this.config.lineWidth,
});
Is it possible to add draw a rectangle as a background of Line chart? I'm using react-chartjs-2 and cannot find any examples with drawing a canvas as background...
managed to do this with following code:
const plugins = [
{
beforeDraw: (chartInstance, easing) => {
const ctx = chartInstance.chart.ctx;
ctx.fillStyle = "lightgreen";
ctx.fillRect(30, 200, 955, 50);
},
},
];
//...
<Line
data={data}
plugins={plugins}
/>
You can draw it before the Line chart with drawTime: 'beforeDatasetsDraw'
I'm looking to set the size of a button within a box and row in a listbox to just be the size of a single character. I would like the button to be a small remove button, which is just a small square big enough to hold a single 'X' character.
I'm having trouble getting the button to go any smaller than this:
This is my current code:
GtkWidget *row1;
GtkWidget *box1;
GtkWidget *label1;
GtkWidget *remBox1;
GtkWidget *remBtn1;
GtkWidget *remBtnLbl1;
remBtnLbl1 = gtk_label_new("X");
gtk_widget_set_name(remBtnLbl1,"remBtnLabels");
row1 = gtk_list_box_row_new();
box1 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 100);
label1 = gtk_label_new("Test");
remBox1 = gtk_button_box_new(GTK_ORIENTATION_HORIZONTAL);
remBtn1 = gtk_button_new();
gtk_widget_set_margin_start(remBtnLbl1, 0);
gtk_widget_set_margin_end(remBtnLbl1, 0);
gtk_container_add(GTK_CONTAINER(remBtn1), remBtnLbl1);
gtk_widget_set_name(remBtn1, "remButtons");
gtk_widget_set_size_request(remBox1, 1, -1);
gtk_widget_set_size_request(remBtn1, 1, 5);
gtk_box_pack_start(GTK_BOX(remBox1), remBtn1, FALSE, FALSE, 0);
gtk_box_pack_start(GTK_BOX(box1), label1, TRUE, TRUE, 0);
gtk_box_pack_start(GTK_BOX(box1), remBox1, FALSE, FALSE, 0);
gtk_container_add(GTK_CONTAINER(row1), box1);
gtk_list_box_insert(GTK_LIST_BOX(hashListBox), row1, -1);
Stylesheet.css:
#remBtnLabels {
padding-left: 0px;
padding-right: 0px;
}
I've been trying all sorts of things to try and get the button smaller, and have been having no luck.
Any help would be greatly appreciated. Thanks.
In your specific example, just set the horizontal alignment of button:
gtk_widget_set_halign(remBtn1, GTK_ALIGN_END);
I have the this jsfiddle, it has the ability to draw a polygon on a map which works perfectly. What I can't figure out is how to style the .Draw interaction.
Currently I have a dashed line for the sections of the polygon that the users has already draw and another dashed line connecting the first drawn point to the last drawn point.
When I write styles it seems to effect both lines.
What I need to have is a dashed black line joining points the user has already drawn, and no line (fully transparent) for the line connecting the last drawn point back to the first drawn point.
This is my current style object:
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 3
}),
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }),
stroke: new ol.style.Stroke({
color: [0, 0, 0, 0.5],
width: 1
}),
radius: 4
})
})
I have tried adding arrays of colours and styles but can't seem to get it working.
Has anyone come across this and found a fix?
Ok I have cracked this one, I had to take a dive into the library's source to figure it out, so I'm gonna post the answer here in the hope it helps somebody else in the future, so here goes:
What I could see looking as the source code was that when you are using ol.interaction.Draw to draw a polygon there are multiple pieces of geometry being used. There is the underlying Polygon, this is the bit that has a stroke and fill and shows the connecting line (based on it's stroke style). There is a LineString which shows a line for the points the user has drawn only (no fill and no connecting line). And there is a point, which is attached to the mouse pointer. I have left a `console.log()' in the jsfiddle to show all this.
I have created this working jsfiddle. What I have done is, rather than set the styles directly inside ol.interaction.Draw I have used a styleFunction (see code below). I detect each geometry by type and set a specific style for it.
const styleFunction = feature => {
var geometry = feature.getGeometry();
console.log('geometry', geometry.getType());
if (geometry.getType() === 'LineString') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 1)',
width: 3
})
})
];
return styles;
}
if (geometry.getType() === 'Polygon') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 0)',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 102, 0, 0.3)'
})
})
];
return styles;
}
return false;
};
Hope this helps 🤓
I want to download a pdf file with Arabic fonts in react and haven't found any solution. I am currently using jsPdf but it's not rendering Arabic font's properly
let doc = new PDFDocument
let doc = new pdf();
doc.setFontSize(10);
doc.rect(20, 20, doc.internal.pageSize.getWidth() - 40,
doc.internal.pageSize.getHeight() - 40, 'S');
doc.setTextColor(128,0,128);
doc.text("Date", 30, 25);
doc.text(this.state.date, 50, 25);
doc.text("السلام عليكم", 30, 35);
doc.text("Quantity", 120, 35);
let distance = 30;
doc.save("data.pdf");
Thanks in advance
First download a desired font. Then go to https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html
and convert & download the file. Move it to your project directory and import it in the desired module.
You can also take the large string and put it in a variable const myFont = "VVV....VVV"
Then use it like this.
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont");
Now you will need to right-align the text.
doc.text("Arabic Text", 200, 20, "right");
//OR
doc.text("Arabic Text", 200, 20, { align : "right" } );
/*
200 is the x coordinate and marks the starting position of the text from right.
y coordinate is the distance from the top of the page.
*/
Did you try adding {lang: 'value'} Option ?
doc.text(['لا إله إلا الله Ù…Øمد رسول الله', 'لا إله إلا الله', 'a'], 100, 100, { lang: 'ar' });
The Arabic font can be printed into pdf by following these steps
Convert HTML to canvas using html2canvas
Convert the image to pdf using jspdf
const input = document.getElementById('divIdToPrint');
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save("download.pdf");
});
Details in this blog
Demo link on Stackblitz
Add this styling to the wrapper object to properly render arabic font:
letter-spacing: normal !important;
source : Arabic font rendering