Generate legend

[fanfy]

Is it possible to generate legends for charts? I tried this in BarChartPanel.renderHead:

CharSequence showLegend = String.format("jQuery('#%1$s').html(WicketCharts['%2$s'].generateLegend());", "barChartLegend", getChartCanvas().getMarkupId());
response.render(OnDomReadyHeaderItem.forScript(showLegend));

but I got an exception in browser that says generateLegend is not a function. Is this a problem of chart.js or am I doing something wrong?

Thank you.

[martinspielmann]

i just pushed a small update that will make it work. your code has to be slightly updated:
String.format("jQuery('#%1$s').html(%2$s.generateLegend());", "barChartLegend", getChartCanvas().getMarkupId());
response.render(OnDomReadyHeaderItem.forScript(showLegend));

this was to the examples, so you can just copy paste, if you do a fresh pull.

within the next view hours, this should also be available from maven central -> version 6.19.2

could you give a small feedback if this is working for you?
regards, martin

[fanfy]

I'm just cloned your repository, installed it locally and after running I'm still getting an exception:

Exception evaluating javascript: TypeError: chartb4.generateLegend is not a function

Anyway, I think is is better to expose a setLegendMarkupId in chart base class and render the legend internally if this id is not null. It's error prone to do this manually.

Thank you

[martinspielmann]

ah, just found a limitation of chartjs:
generateCharts() is only available for pie and doughtnut charts:
http://www.chartjs.org/docs/#doughnut-pie-chart

I'll take a look how to implement that for these two. Thanks for your hint

[martinspielmann]

Ok I just did another pull with your idea implemented. pie and doughnut chart panel do now extend the newly created LegendGeneratingChart. You can use LegendGeneratingChart.setLegendMarkupId(String) just as you suggested. I think that was a really good idea.

Could you check if this works as expected for you?

I added this also to the examples with a little CSS snippet.

[fanfy]

Thank you for your effort.

Unfortunately when trying the legend for a pie chart I'm still getting an error in browser:
ERROR: Wicket.Ajax.Call.processEvaluation: Exception evaluating javascript: TypeError: chartaf.generateLegend is not a function, text

The full error message is :

ERROR: Wicket.Ajax.Call.processEvaluation: Exception evaluating javascript: TypeError: chartaf.generateLegend is not a function, text: (function(){Wicket.Ajax.ajax({"u":"./home?2-1.IBehaviorListener.0-contentContainer-content-dashboardPanel-columns-1-widgets-0-widget-widgetContentContainer-content-labelListContainer-labelList-0","e":"click","c":"id0a8"});})();(function(){Wicket.Ajax.ajax({"u":"./home?2-1.IBehaviorListener.0-contentContainer-content-dashboardPanel-columns-1-widgets-0-widget-widgetContentContainer-content-labelListContainer-labelList-1","e":"click","c":"id1a9"});})();(function(){Wicket.Ajax.ajax({"u":"./home?2-1.IBehaviorListener.0-contentContainer-content-dashboardPanel-columns-1-widgets-0-widget-widgetContentContainer-content-labelListContainer-labelList-2","e":"click","c":"id2aa"});})();(function(){Wicket.Ajax.ajax({"u":"./home?2-1.IBehaviorListener.0-contentContainer-content-dashboardPanel-columns-1-widgets-0-widget-widgetContentContainer-content-labelListContainer-labelList-3","e":"click","c":"id3ab"});})();(function(){Wicket.Ajax.ajax({"u":"./home?2-1.IBehaviorListener.0-contentContainer-content-dashboardPanel-columns-1-widgets-0-widget-widgetContentContainer-content-labelListContainer-labelList-4","e":"click","c":"id4ac"});})();(function(){Wicket.Ajax.ajax({"u":"./home?2-1.IBehaviorListener.0-contentContainer-content-dashboardPanel-columns-1-widgets-0-widget-widgetContentContainer-content-labelListContainer-labelList-5","e":"click","c":"id5ae"});})();(function(){WicketCharts['chartaf']=buildChart('chartaf');})();(function(){var chartaf = WicketCharts['chartaf'].Pie([{"value":0,"color":"yellow"},{"value":0,"color":"red"},{"value":1,"color":"gray"},{"value":0,"color":"green"},{"value":0,"color":"#52DBFF"},{"value":0,"color":"#2F8DFF"}], {"tooltipEvents":["mousemove","touchstart","touchmove"],"legendTemplate":"<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%>

<span style="background-color:<%=segments[i].fillColor%>"><%if(segments[i].label){%><%=segments[i].label%><%}%>

<%}%>"});})();(function(){$('#pieChartLegend').html(chartaf.generateLegend());})();

Regarding the chartjs support for bar chart legend I found this:

http://stackoverflow.com/questions/27045840/chartjs-bar-chart-legend

For the moment I manage the legend myself in a custom wicket component but it's not very pleasant :).

Thank you

[chrisco484]

@fanfy Any chance you could make your custom wicket component available?

I am also trying to get a legend to display for a bar chart.

This wicket-chartjs library seems to have the best, groovy, animated charts with the least amount of effort but it could do with some TLC :)

[martinspielmann]

Hi @chrisco484,
I did not any new functionality in a long time and at the moment I've not enough time to add it. If the latest features of Chart.js are needed, I recommend using https://github.com/adessoAG/wicked-charts
It has two downsides unfortunately:

• not available from maven central. you need to add jcenter repository to your pom.xml
• Has no model support by default 😭 But this can be added by extending the existing classes.

[chrisco484]

@pingunaut I've got to say that your implementation of model support "right out of the box" was perfect and I really appreciate it! It's unfortunate that you don't have much time for the development of this library - I think it has real potential!

I can't believe it when some people create Wicket components that don't support models - it kind of misses one of the big advantages of Wicket.