Highcharts custom text right to left export - javascript

Well my problem is that i have a chart and on it i have some custom text that has to be in the top right and top bottom corner of the chart im using renderer.text('text', 600, 30).add();
I first had it like renderer.text('text', 600, 30).css('direction': 'rtl').add();
this worked fine but when i exported it didn't recognize the stlye
then i tried to use renderer.text('<span style="direction:rtl;">text</span>', 600, 30).add();
this also worked only to show it on the page, but the exporting doesn't
Is there any way to fix this to work for exporting?
sample

A way to avoid the whole "CSS and exporting" issue for this particular problem is to use the bounding box of the text to place it correctly, instead of the CSS solution.
function (chart) { // on complete
var rightTop = [590,85];
var element = chart.renderer.text('This is a looooong text', 0, -100).add();
var boundingBox = element.getBBox();
element.destroy();
chart.renderer.text('This is a looooong text',
rightTop[0] - boundingBox.width,
rightTop[1]).add();
}
Here the rightTop variable represents where we want it to be placed. Then the text is added (out of vision), we get the bounding box to know the size of it, and then destroy it. Then we recreate the text in the correct position.
See this JSFiddle example for a demonstration of how it may work.

Related

In mxGraph how can I automatically put a text label on a new graph cell?

I'm starting with the mxGraph JavaScript example dynamictoolbar.html and adding some extra functionally to it to create my own simple tool. I want to have a default text label on a new cell when it's created by dragging from the toolbar; ideally a different default label for each shape.
For example, if I drag the ellipse icon from the toolbar to the graph, I want a new ellipse vertex on the graph automatically displaying text "New Ellipse".
I've already enabled later editing of the default label (by double-click or F2) by setting:
var vertexStyle = graph.getStylesheet().getDefaultVertexStyle();
vertexStyle[mxConstants.STYLE_NOLABEL] = false;
and this works fine. But how can I get a default label when the new cell is dropped ? I'm new to mxGraph and don't understand all the classes yet. I've gone all the way through mxCellRenderer, mxCell, mxStyleSheet, mxShape and several others and can't find it. If possible I'd like to avoid using CSS, customised XML etc because I don't want to add those to my already huge learning curve ! A simple text label is fine. Thanks in advance.
I am not sure if I understood the question... But in the "addVertex" function here:
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
The first "null" is the default label... If you put tere for example "test" every shape that you will drop will have the label "test".

How to expand chart to match width of container using ngx-charts

I'm trying to use ngx-charts to display an area chart that spans the full width of my page (it's supposed to match the width of the horizontal line above it). However, it appears that when generating a chart there is some sort of padding inside the svg, which I imagine is useful if you have a legend etc but I am not using that, here's what I see:
See how the actual area chart doesn't expand the full width?
My code:
<ngx-charts-area-chart
[scheme]="colorScheme"
[results]="heatmaps"
[curve]="curve"
[showGridLines]="showGridLines"
[tooltipDisabled]="tooltipDisabled"
(select)="onSelect($event)">
</ngx-charts-area-chart>
And my config variables in my component.ts
curve = d3.curveNatural;
showGridLines = false;
tooltipDisabled = true;
colorScheme = {
domain: ['#3f3f3f']
};
As you can see I am not using the view attribute so the chart should expand to the width of the page. I was thinking I could utilize a viewBox on the svg but not quite sure, any thoughts?
Thanks!

Using SVG.JS to overlap two SVG Elements - one responsive, one fixed

So I am building a website using an SVG element to cover the entire viewport. I then have a responsive polygon which stretches the entire width of the viewport with some text on it. The issue I am having is such that I don't want the text to stretch, which when you use SVG.JS, the text is simply another child of the SVG canvas and in turn stretches with the viewport. I also want the text to be parallel to part of the polygon, which you can see in the diagram I have provided.
So, in a way, I need the text to respond to the SVG Polygon, but also not respond to it.
I was able to get the non-scaling text to work by creating another SVG element overlapping the original one with a preserved aspect ratio... however, as in diagram 3 of the image, I want to click the polygon for an animation, and by having another SVG canvas over the top this is not possible. Your canvas on top would appear to block the one below for onClick events, plus it's difficult to make the text parallel.
Diagram of polygon / text
I am using SVG.JS, but if you can offer help using SVG,HTML,CSS that is also useful.
HTML:
<div id="maindiv">
</div>
JS (SVG.JS) with text created on a new canvas:
var draw = SVG('maindiv').viewbox('0 0 500 500').attr({ 'preserveAspectRatio': 'none' })
var polyg = draw.polygon('0,100 500,200 500,500 0,500').fill('black')
polyg.click(function() {
this.animate().attr({'points':'0,200 500,300 500,500 0,500'})
})
var txtcanv = SVG('maindiv').style({'position':'fixed'})
var title = txtcanv.text('Tim Iland Design').font({
family: 'Arial'
, weight: 'bold'
, size: 30
,fill: '#f06'
})
Any ideas are greatly appreciated! Thanks.

Chartjs extended doughnut with text tooltip issue

I am trying to build an extended doughnut in chartjs. I want to display the highest value as percent and its label in the middle. It works fine on load but breaks after an hover event. One a tooltip is being displayed something breaks the first draw event and move the text on the left and i can't figure how to solve this. I made a fiddle to describe this issue :
http://fiddle.jshell.net/3be5zb0v/
Any ideas on how to fix this ?
Working fiddle - http://fiddle.jshell.net/3be5zb0v/1/
Just add this before your fillText
thechart.textAlign = 'start';

jqplot pie chart legend width

I'm trying to render the legend of a pie chart so that it has a fixed width, and when the labels reach that width (the div holder) to hyphenate on the next line. I tried the row option but it doesn't work very well because my data is dynamic and at times i have say 3 data sets, and each one of them gets rendered in a separate row, while at other times i have 15-20 data sets and it becomes messy.
Anyway the solution is to restrain the legend to the width of the div, that it is rendered into, yet it doesn't seem to be accepting any css alterations. I tried adding width:250px; to the "jqplot-table-legend" in jqPlot css, i also tried adding it into various places using Inspect Element in Chrome to test whether it works, but it doesn't seem to accept the new width. I also tried to hard code it into the javascript file at various places with no luck.
I'm not sure what I can add to the question in terms of code. Everything is pretty standard on the jqPlot side.
Any suggestions on how to get around this will be much appreciated.
This seems like the quick and dirty way, but it gets the job done. I'll use the jqplot.pieRenderer.js file as the example since it's easier to read than the minified version. Open the js file and scroll down to line 568. Right under
this._elem = $(document.createElement('table'));
this._elem.addClass('jqplot-table-legend');
add
this._elem.css({width: 300});
That will stretch the table out to whatever width you need it to be. Unfortunately, it also stretches out the column with the color swatch so you'll now need to scroll down a little further until you find
td1.css({textAlign: 'center', paddingTop: rs});
change that to
td1.css({width: 16, textAlign: 'center', paddingTop: rs});
and you should be all set.
Another method:
Just add these lines:
if (this.width) {
ss['width'] = this.width;
}
They allow you to set an arbitrary width in each different graph
You might also want to add these lines in jquery.jqplot.js (i.e if rendering bars)
Search for "createElement('table')" as described by mike
Worked for me

Categories