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.
Related
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?
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.
We are using the Highchart bubble diagram, however when bubble x and y are on the same place in the diagram and bubble y is smaller there is no way to neither see nor much less click the smaller bubble.
Is there any way to plot the bigger bubbles first and then plot the smaller ones on top? Or a setting which says that smaller ones always are on top of the bigger ones?
Just sort the series data in descending order and pass it to the highcharts.
So that, the bigger bubbles will be plotted first and then the smaller ones, thereby the user will be able to hover on smaller as well as bigger bubbles.
Tried this in my project, and it's working perfectly fine !
I have two axis in highcharts and I dont specify the range for either. Please see graph.
For some reason, series one from 201 to 206 is taking up the whole chart while series 2 which is only -2k to 2k is being squeezed to the bottom, thereby extending the range all the way to 30k which is totally unnecessary. I think highcharts by nature wants to not have any overlap but I want that. What I'd like is for the right series to be centered, in fact I want the right axis to be centered at 0 always and can grow unrestricted in either direction. I can't hardcode any of these since I have no idea what the values could be. So Series 1 on the left is ok, but I want the value 0 for series 2 to always start at the middle of the chart. Any way to achieve that?
Try to set alignTicks as false.
I am working on a pie chart with a smaller display area of around 250*250 and willing to utilize the available space wisely as the labels are taking most of the space and reducing the actual pie size.
Is it possible to render labels inside/outside of the pie based on data for each slices. for example in the classic browser share example, if the Firefox is at 45%, I want to be rendered inside the pie (distance -40 may be) and where the slice is less such as Opera at 6% - I want it to be shown outside with a connector.
You can define only general distance for labels.