Hello to the community,
I would have one more question on Highcharts. I am working closely with designers and they prefer to have charts given to them with a predefined height, width, and text size, in millimetres (not pixels). That is because ultimately these charts are going to be printed out in reports.
Right now designers enter the value they want for a specific chart in millimetres onto a spreadsheet, and I convert all that to px before making the chart.
To convert pixel to mm I use:
px = mm * DPI / 25.4 since 1in = 25.4 mm.
For point (pt) to pixel I use:
px = pt * DPI/72 since 1pt = 1/72th of 1in.
Where DPI is a variable given to me: usually 300.
However the font size tends to be much bigger than it should be (it looks like it is 20 pt on the chart when I want 12 pt), and the chart dimensions also seem to be wrong.
My first question: do my calculations look right? (I am afraid I am not much of an image expert).
My second question: would there be a way to specify chart dimensions in a different format than pixel when configuring a chart on Highcharts, by any chance?
Thank you so very much!
You can use some of the already existing converters to get those values, like: https://www.unitconverters.net/typography/millimeter-to-pixel-x.htm
You can use CSS to set parameters for the container that the chart is rendered inside, demo: https://jsfiddle.net/BlackLabel/vu41gdt6/
#container {
height: 15rem;
width: 15rem;
}
Consider use regular CSS units for the charts on you web app and change them only for printing needs.
API: https://api.highcharts.com/highcharts/chart.events.beforePrint
Useful article: Using cm/mm on the CSS of a web app that replicates paper interaction is a good practice?
Related
I am plotting data where all 3 piece of data for a data point are in the same units.
While the bubble size is correct relative to the other bubbles, I would really like it to scale with the horizontal axis ie for the data below, I would like the bubble to to measure about 30 units across on the x axis.
x(mm)
y(mm)
colour
bubble (mm)
Bubble 1
5
5
1
30
Bubble 2
10
5
1
20
I am pretty sure this is not a native behaviour, and I only need a rough visual match, rather than a fully accurate representation.
Does anyone have any ideas how to bodge this?
Thanks!
I have tried multiplying up the values to enlarge bubble size, but it seems that the size of the largest bubble is fixed
As I only require a visual approximation have also looked at using AppScript to create this (my coding is basic at best) but, while I can open a drawing canvas, there does not seem to be any way to automatically create a drawing from there.
In Vaadin 14.6.1, I tried to create a Vaadin heatmap foollowing the documentation / example from here.
However, I encountered a few problems/questions, listed in descending order of importance below:
The heatmap supported 30 rows by 30 columns; but when I tried 40 rows by 40 columns, the entire heatmap showed a single color (blue in my case).
Is it possible to manually set the minimum numeric value and maximum numeric value for the color scheme. This way, if I plot my data one day and it has values in the range of 0 to 1, but on another dataset from another day, the numeric values range from between 0 and 0.5, the color scheme range won't automatically change (to being between 0 and 0.5) and confuse the user.
In the documentation, it has the following methods listed, but they do not seem to exist in Vaadin 14.6.1
plotOptions.setBorderColor(SolidColor.WHITE);
plotOptions.setBorderWidth(2);
When I hover over the datapoints, is there a way that the tooltip can only show the numeric value (and not the x, y coordinate or the series name etc.?)
Is there any limit to the number of datapoints? I'm hoping that if #1 above is resolved that I can plot a 100 by 100 (ie 10,000) point heatmap.
If I plot 100by100, there will be many labels on the x and y axis. In my case, the x and y axis are actually numerical, so I did what the documentation suggested and just placed category labels in the xaxis and yaxis spots. However, is there any way to only display every "nth" label, so that the x-axis and y-axis is not so crowded? (This would essentially mimic what Vaadin does for normal line charts' xaxis and yaxis).
I'm not that experienced with Vaadin Chart, but these are the questions that I can comment on:
(1) With 40x40 items you go over the threshold of 1000 in which the Chart switches into "turbo" mode for performance reasons. This seems to not be compatible with the heatmap series. You can disable turbo mode by setting plotOptions.setTurboThreshold(0);
(2) Unfortunately the ColorAxis doesn't support this, it only has an API for min and max color. Definitely a valid use-case though, and it seems to be supported by the Highcharts library that the Vaadin Chart uses under the hood. You should consider opening a feature request for this in the Github repo.
(3) This seems to be a documentation issue. The methods are available in later Vaadin platform versions, but not in 14.6.
(5) In theory not, but in practice there will be a huge performance hit in the browser due to the excessive amount of DOM elements (quick test of 100x100 froze the browser for 10s). I'm afraid the component isn't really made for such extreme use-cases. In this case it might be better to utilize a low-level JS drawing library using the canvas, or draw an image on the server-side and display that in the browser. Maybe you can also consider modifying your use-case so that you only display one slice of your data and allow the user to switch between slices.
I need the points of my chart to have a fixed width (say, 100px each). If the needed space exceed the width of the chart, I just want to be able to scroll horizontally (with the scrollbar.enabled parameter set to true).
This is the basic setup, without setting the points width:
http://jsfiddle.net/wxxdne19/
If I set the column width like this:
http://jsfiddle.net/wxxdne19/1/
The tickPixelInterval parameter is ignored (as the documentation says, of course).
I tried a bunch of other things, but none of them worked, and I ran out of ideas. How can I do what I need?
Update
To clarify what I need, think of it as if I have a column chart, and I need to force all the columns to have a fixed width. Something like this:
http://jsfiddle.net/4rx4snjh/
But, instead of the columns overlapping each other, I'd like the scrollbar to do its job :-) Furthermore, I need it to work with any kind of series (lines, areas...), not just columns.
It seems that the solution here is to compute extremes manually and set them in load event:
load: function() {
var chart = this,
xAxis = this.xAxis[0],
visibleColumns = (xAxis.width - pointWidth) / pointWidth;
xAxis.setExtremes(pointStart, pointStart + pointInterval * visibleColumns);
}
Live demo: http://jsfiddle.net/kkulig/mpancrbc/
For some reason (bug probably) xAxis.min value must be initialized when the container width is a small value (in my example it's less that 400 px or so).
API reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I'm trying to use the print() function on a Highstock chart, but its not printing well when my chart is very large (almost full screen, for example 1800x1000 pixels),
The problem is that it prints over multiple pages, and also most part of the right half of the chart gets cut off...
Is there a way to resize the chart before printing (but not resize on screen), or is there some sort of "scale to fit page" functionality?
Basically I just want it to look nice on a4 / letter paper format.
Take a look at the exporting parameters here. You can specify scale and sourceWidth and sourceHeight. As for "look nice" you will have to play around with the sizes until you reach this subjective goal.
I am trying to generate PDF documents server side containing data tables and charts generated by HighCharts. I am using highchart-serverside-export and iText.
I have been able to generate the documents but the chart images are grainy when printed. From what I understand, iText uses 72dpi by default when inserting an image. The correct way to get higher fidelity images is to start with a larger image and scale it down using one of the scaling functions such as scalePercent().
I can easily generate a larger chart image by passing in larger height and width parameters to Highcharts. The problem is that when you increase the dimensions of the chart, the content does not scale up (eg. font size of lables). In fact, you get more detail in some places (eg. more axis ticks). The reason this is a problem is that when you then apply the scaling down via iText, these items become very small and hard to read.
I have looked at the Highcharts API and cannot see a way to get Highcharts to scale up the contents rather than add more detail. How do I get this to work?
If the approach I am using is completely wrong, the wider question is how do I get print resolution server-side Highcharts charts? I have to use iText but am willing to try an alternative technology to do the chart rendering.
try this
exporting: {
sourceWidth: 1000,
sourceHeight: 400,
},
Link to JsFiddle
You can specify the width of the exported image using the exporting.width property.
This will not increase the size of the div or add/remove details or anything of that sort, it will simply scale the generated svg according to the specified width, maintaining the aspect ratio. Hence also scaling everything including texts etc.
exporting: {
width:2000 // or scale down to 100
}
Upscaling exported images / pdf | Highcharts & Highstock # jsFiddle