Is it possible to make bar chart with string X-axis using Struts2 jQuery Chart plugin?

Question

I'm using struts2-jquery-chart-plugin-3.2.1. I want to show a bar chart which is populated by the list.

Here is my code:

Action class:

public class FinancialChartAction extends ActionSupport{
    private List<FinChartModel> wholeChartModels;

    @SkipValidation
    @Action(value = "getFinancialChartData", results = {
        @Result(name = "success", type = "json", params = {
            "wholeChartModels"
        })}){
        wholeChartModels = new ArrayList<FinChartModel>();     
        wholeChartModels.add(new FinChartModel("2020/01/01", 1000));
        wholeChartModels.add(new FinChartModel("2020/01/02", 2000));
        wholeChartModels.add(new FinChartModel("2020/01/03", 3500));
        wholeChartModels.add(new FinChartModel("2020/01/04", 550));

}

    public List<FinChartModel> getWholeChartModels() {
        return wholeChartModels;
    }
}

Model class:

    private String registerDate;
    private Long sellValue;

    public String getRegisterDate() {
        return registerDate;
    }

    public void setRegisterDate(String registerDate) {
        this.registerDate = registerDate;
    }

    public Long getSellValue() {
        return sellValue;
    }

    public void setSellValue(Long sellValue) {
        this.sellValue = sellValue;
    }

    FinChartModel(String registerDate,Long sellValue){
        this.registerDate = registerDate;
        this.sellValue = sellValue;
    }

JSP:

<div id="gain_chart">
    <sjc:chart
        id="chartAjaxTwo"
        cssStyle="width: 600px; height: 400px;">
        <sjc:chartData
            dataType="json"
            id="chartAjaxTwoData2"
            label="List -ListValue-"
            href="%{getFinancialChartData}"
            list="wholeChartModels"
            listKey="registerDate"
            listValue="sellValue"
            bars="{show : true, barWidth: 0.7}"
            />
    </sjc:chart>
</div>

As you see I want my chart to show strings on x-axis. By this configuration I couldn't see any data on my bar chart . Is it possible to use String as x-axis of bar chart or not? if yes, what is wrong with my code?

Answer 1

You couldn't see any data on your bar chart because you are using wrong URL to get data to the chartData tag. In your chartData tag you are getting data using Ajax. Thus you should reference the URL that returns data in the acceptable format. In your case you were using data type JSON. In your action class you have such action which returns the result of type json. There should be json plugin available on class path. To build URL for the action you can use

<s:url var="chartDataUrl" action="getFinancialChartData"/>

Then reference it in the chartData tag

href="%{#chartDataUrl}"

The json result by default returns top object from the ValueStack serialized to json object and Struts puts the action instance to it.

@Result(name = "success", type = "json")

And the list attribute binds to the variable of the action class which has a corresponding getter. Because you use the list of objects then listKey and listValue are bound to object variables with getters by default.

Note also the version of struts2-jquery-chart should be updated to include Flot library which is used to draw a chart by the plugin. For more details see this answer.