I recently inherited a project that makes extensive use of Kendo charts, with a request to add some information to column labels. The labels currently contain an integer and a percentage, and the revision would add an additional percentage value. Since the labels are getting a little long, they need to be split across multiple lines.
So a column label that currently reads:
3, 0.00%
would now read
3
0.00%
9.99%
The code is arranged MVC style, so the code determining each label looks similar to the following:
.Labels(labels => labels.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd)
.Template("#= value #, #= kendo.format('{0:P}', dataItem.GetPercent)#"))
.Tooltip(t => t.Template("#=series.name#: #= value #, #= kendo.format('{0:P}', dataItem.GetPercent)#").Visible(true));
It seems like this should be a simple thing, but I can't find the syntax for properly working line breaks into the labels. Kendo does seem to attempt to interpret <br /> entries, but these disrupt the flow of the chart and cause all following label values to be displayed below the entire chart rather than in place just above the column. Some forum posts I have searched assert that this is not currently possible in Kendo, but also mention that it 'will be possible in 2014' (most of these are older posts though, and since I don't know much about kendo, I could be misunderstanding which labels they are referring to).
Can anyone provide me with the proper syntax for inserting a line break into this type of label (from code) or a possible workaround if the functionality is not currently supported?
Thank you!
UPDATE
I have found the <tspan> workaround, which does help a little but still looks pretty bad since my charts are resized dynamically with the page (so, for a stacked bar chart, the widths and starting positions of each column are not static). The <tspan> tag respects the y coordinate of each label but not its x coordinate, so that has to be set individually for each column; if left unset, the labels for all columns will appear at the leftmost side of the chart where the y axis values are. Since the charts are dynamic, there is no "correct" static value to put there and I have been unable to find a way to fetch a column's starting position from within the template code. Is there any way to correct this such that the <tspan> workaround becomes a viable option?
(Workaround found here)
From 2014-Q2 versions, Telerik / KendoUI finaly implemented the \n
See the documentation:
The text can be split into multiple lines by using line feed characters ("\n").
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text
Related
Earlier, I asked how to create "spectra" charts in Vaadin (see How to create a "spectrum" chart using Vaadin 14+). It turned out that one didn't actually need to create barcharts -- the only real need seemed to be to set the pointwidth to 1. (This solved the "very wide" widths lines when zooming.)
HOWEVER: I think there's a bug in vaadin charts when one has more than 1 series presents and when one zooms: the line moves to an inccorrect position on the x-axis (or the x-axis is no longer placed correctly.) Any thoughts on how to resolve? Here are two screenshots showing the problem. In the first one, only ONE series is visible and the line is at the correct x-axis point of ~598.36. In the second screenshot, though, (where the only change I have made is to enable the 2nd series), the line moves to an INCORRECT x-axis coordinate (it seems like it's ~598.25!!!).
One theory I have is that adding the second series somehow confuses the chart from determining the correct x-axes....maybe because each series has it's own x axis logic in some way? Not sure....(I'm using Vaadin 14 and I tested this both in my dev env and on production.)
I'm looking for a way to indicate key dates on a highchart with a label eg Public Holiday. I can't find a way to add labeled guidelines or add an opened callout to a point? Help appreciated.
In Highstock you have series type called flags which is a opened callout (similar to Dygraphs annotation). This is probably the closest fit to the indicators you referred. See this JSFiddle example of how it looks. Note how this example uses the Highstock source file, but builds a Highcharts chart. See this documentation for official information.
In Highcharts you can highlight points, labels and value in a wide variety of ways. First of you can add data labels to your points, which renders text next to it. Secondly you can use plot lines to highlight certain values along an axis. See this JSFiddle example of how both of these options can be used.
Of course there are lots of ways to improve and build upon this out of the box functionality, but that is up to your specific demands and desires.
I have a situation where I need to remove all margins from a highchart and remove the x/y axis so it fills a series of columns in a table completely.
I did that, no problem. Chart goes to the extremes as needed.
What I need now is that pesky yaxis I already removed...but displayed in a table cell outside of the existing highcharts object.
It would seem easy, as though I could just set the overflow property of yaxis to 'visible' and play with the offset...which would work however this would only work if I wanted to re-position the axis within the boundaries of the highchart object. I want him in a different cell entirely.
Is there anyone who has had experience in this situation? Is it going to require me to have a secondary highchart with only a y-axis?
Best answer gets a green check.
EDIT :: I now have dispersed each 'day' into their own column (more bars coming per day [scheduled,actual,etc...]). In order to keep the scales lined up, I manipulate the yAxis:max property and set them all to a derived value.
In the open column (currently w/ text Hourly Trends) is where I would put an additional highchart module with no series data but with the same min/max/tickInterval.
The next big leap will be to see the data is alive and changes w/ schedule. May have to start another thread for that one, no?
Create a new HC object with no data but only the yAxis (making sure it is the right scale, etc). Perhaps add the same series of data to it but hide the series? Add it to the location you want. This seems kludge and not very good practice. Each business use is different but why would you want this?
EDIT based on comment of business rules:
Why not come at this from a different direction and have the individual chart elements (the bars/points/etc) be a single point chart. This way you have one chart per column. You can then set up the yAxis to be text and not worry about the position. If we could see an example of the page layout and the desired result that would help.
I'm using PHP to generate docx documents from a database. The generated document contains column charts which have labels attached (i.e. user shapes containing textboxes). In an attempt to get the textboxes to accommodate and display all of the text (i.e. it shouldn't be necessary for the user to resize a textbox to see all the text) my code calculates how many characters will fit into 3cm, adds linefeeds to the string as required and tells me how many lines of text are needed. I have:
<a:xfrm xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
<a:off x="1638276" y="1676399"/>
<a:ext cx="1257325" cy="'.(252000 * $labelLeftLines).'"/>
</a:xfrm>
which I believe should give me a text box around 3.5cm wide (extra .5 for the internal padding) and a height of .7cm multiplied by whatever is the value of $labelLeftLines. However, the text box always turns up as 3.cm wide by .86cm high, which only ever displays one line of text.
If I add in 'autofit':
<a:bodyPr xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" vertOverflow="clip" wrap="square" rtlCol="0">
<a:spAutoFit/>
</a:bodyPr>
the generated file looks just the same, though, when I right click on the textbox to inspect the properties, 'autofit' is indeed applied. I have to uncheck it and recheck it to make it affect the textbox.
Any openXML gurus out there?
Hmm, some random floundering around revealed that the values I need to manipulate are here:
<cdr:relSizeAnchor xmlns:cdr="http://schemas.openxmlformats.org/drawingml/2006/chartDrawing">
<cdr:from>
<cdr:x>0.47</cdr:x>
<cdr:y>0.75</cdr:y>
</cdr:from>
<cdr:to>
<cdr:x>0.67</cdr:x>
<cdr:y>1</cdr:y>
</cdr:to>
Changing those values does actually change the size of the texbox, though I haven't a clue what units are being used. From 0.75 to 1 produces a height of 1.43cm.
One day I'll maybe be able to find my way around the doucmentation.
Is there a native way to have a column chart with each column having a different width? It should be simple enough to define a 'width' property for each point, but it apparently doesn't exist :(
I only found this solution: http://highslide.com/forum/viewtopic.php?f=9&t=6401, but it's a not very pure... Does someone know if Highcharts team plan to work on it?--Should be very useful in many cases.