How to show legend in radar chart

Support
#1

I am able to show radar chart from keyvaluecollection base on this query-

>  <query>
>                     <![CDATA[select SUM(b.housekeepingUnsafe), SUM(b.procedureUnsafe), SUM(b.workareaUnsafe), SUM(b.riskUnsafe), b.location
>                     from BBSObservation b
>                     group by b.location]]>
>                 </query>

How I can show location.name values in legends for multiple series?

thanks

#3

Hi!

Unfortunately, I don’t quite understand the problem you are having.
Could you provide a small test project and point out what doesn’t work?

Regards,
Dmitriy

#5

The example of radar chart on jmix site shows two series radar chart (blue and green). I want the name of series as legend.

download

#6

For now it is impossible to do this, because EСhart doesn’t work with the radar legend correctly.
See related issue: 使用dataset的雷达图，图例的联动效果不能正常触发 · Issue #17498 · apache/echarts · GitHub
An English translation is attached below the issue description.

If your data is static, you can use chart.setNativeJson(json) to draw the required chart.

#7

Thanks for reply, I don’t want click behavior but just to show legend.

How to code this in jmix programaticcaly-

legend: {
show: true,
data: ['Matcha Latte', 'Matcha123']
},

I don’t find any setdata in legend.
Regards

#8

Any suggestion.

#9

Hi!

In order to use the legend in the radarSeries, you need to specify the data and legend in nativeJson, this can be done programmatically using Java or declaratively using XML markup:

        chart.setNativeJson("""
                {
                    "legend": {
                        "show": true,
                        "data": ["Allocated Budget", "Actual Spending"]
                    },
                    "series": {
                        "type": "radar",
                        "data": [
                        {
                            "value": [4200, 3000, 20000, 35000, 50000, 18000],
                            "name": "Allocated Budget"
                        },
                        {
                            "value": [5000, 14000, 28000, 26000, 42000, 21000],
                            "name": "Actual Spending"
                        }]
                    }
                }
                """);

<charts:chart>
            <charts:nativeJson>
                <![CDATA[
                    {
                        "legend": {
                            "show": true,
                            "data": ["Allocated Budget", "Actual Spending"]
                        },
                        "series": {
                            "type": "radar",
                            "data": [
                            {
                                "value": [4200, 3000, 20000, 35000, 50000, 18000],
                                "name": "Allocated Budget"
                            },
                            {
                                "value": [5000, 14000, 28000, 26000, 42000, 21000],
                                "name": "Actual Spending"
                            }]
                        }
                    }
                ]]>
            </charts:nativeJson>
</charts:chart>

Best regards,
Dmitriy

1 Like