Extend legend with an own image

[ludi81]

Hi,

I would like to extend the legend with an own image.
Ideally the legend looks like a table.
1. column contains the color of the part (in a dot)
2. column contains the name (as a string)
3. column contains the individual image (png)

Im not able to draw an image within the legend, does anyone have an idea?

Thanks a lot!
Ludi

[paradoxoff]

You will have to do some coding to achieve what you want.
A LegendTitle is composed of several blocks. For every "legend entry", you have two blocks, one is an instance of LegendGraphic (which hold the shape) amd the other is an instance of LabelBlock (which displays the text). These individual blocks are put together in LegendTitle.createLegendItemBlock(LegendItem item).
Suggestion: extend LegendTitle and override createLegendItemBlock(LegendItem item). In addition to the LegendGraphic lg, and the LabelBlock labelBlock, you could add an instance of ImageTitle to the BlockContainer "result" which is created in createLegendItemBlock.
If you need to have columns of equal width, even for labels of different size, this approach won´t give good results. E. g. the labelBlocks of the different rows will not be aligned, because the different BlockContainers of the different rows are not aware of each other. In order to enforce a strict grid-line arrangement, you could also override fetchLegendItems() of the LegendTitle class and use a GridArrangement.
If you want to have different images per-series, you would probabaly also need an extended LegendItem class which can hold that information, and an extended renderer to provide that information.
All in all this looks like "doable with reasonable effort". Good luck anyways!

[ludi81]

You will have to do some coding to achieve what you want.
A LegendTitle is composed of several blocks. For every "legend entry", you have two blocks, one is an instance of LegendGraphic (which hold the shape) amd the other is an instance of LabelBlock (which displays the text). These individual blocks are put together in LegendTitle.createLegendItemBlock(LegendItem item).
Suggestion: extend LegendTitle and override createLegendItemBlock(LegendItem item). In addition to the LegendGraphic lg, and the LabelBlock labelBlock, you could add an instance of ImageTitle to the BlockContainer "result" which is created in createLegendItemBlock.
If you need to have columns of equal width, even for labels of different size, this approach won´t give good results. E. g. the labelBlocks of the different rows will not be aligned, because the different BlockContainers of the different rows are not aware of each other. In order to enforce a strict grid-line arrangement, you could also override fetchLegendItems() of the LegendTitle class and use a GridArrangement.
If you want to have different images per-series, you would probabaly also need an extended LegendItem class which can hold that information, and an extended renderer to provide that information.
All in all this looks like "doable with reasonable effort". Good luck anyways!

Thank you very much for your ideas! The first version works great!

[ludi81]

You will have to do some coding to achieve what you want.
A LegendTitle is composed of several blocks. For every "legend entry", you have two blocks, one is an instance of LegendGraphic (which hold the shape) amd the other is an instance of LabelBlock (which displays the text). These individual blocks are put together in LegendTitle.createLegendItemBlock(LegendItem item).
Suggestion: extend LegendTitle and override createLegendItemBlock(LegendItem item). In addition to the LegendGraphic lg, and the LabelBlock labelBlock, you could add an instance of ImageTitle to the BlockContainer "result" which is created in createLegendItemBlock.
If you need to have columns of equal width, even for labels of different size, this approach won´t give good results. E. g. the labelBlocks of the different rows will not be aligned, because the different BlockContainers of the different rows are not aware of each other. In order to enforce a strict grid-line arrangement, you could also override fetchLegendItems() of the LegendTitle class and use a GridArrangement.
If you want to have different images per-series, you would probabaly also need an extended LegendItem class which can hold that information, and an extended renderer to provide that information.
All in all this looks like "doable with reasonable effort". Good luck anyways!

Thank you very much for your ideas! The first version works great!

[raulh]

You will have to do some coding to achieve what you want.
A LegendTitle is composed of several blocks. For every "legend entry", you have two blocks, one is an instance of LegendGraphic (which hold the shape) amd the other is an instance of LabelBlock (which displays the text). These individual blocks are put together in LegendTitle.createLegendItemBlock(LegendItem item).
Suggestion: extend LegendTitle and override createLegendItemBlock(LegendItem item). In addition to the LegendGraphic lg, and the LabelBlock labelBlock, you could add an instance of ImageTitle to the BlockContainer "result" which is created in createLegendItemBlock.
If you need to have columns of equal width, even for labels of different size, this approach won´t give good results. E. g. the labelBlocks of the different rows will not be aligned, because the different BlockContainers of the different rows are not aware of each other. In order to enforce a strict grid-line arrangement, you could also override fetchLegendItems() of the LegendTitle class and use a GridArrangement.
If you want to have different images per-series, you would probabaly also need an extended LegendItem class which can hold that information, and an extended renderer to provide that information.
All in all this looks like "doable with reasonable effort". Good luck anyways!

Thank you very much for your ideas! The first version works great!

Hi ludi81 can you post the code as example please.