Search code examples
androidhighchartsbar-chartandroid-highcharts

Android highcharts display single entry bar chart


I am working on highcharts in android. I am trying to display a barchart with a single entry. Below is the code

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    HIChartView chartView = findViewById(R.id.hc);

    HIOptions options = new HIOptions();

    HIChart chart = new HIChart();
    chart.setType("bar");
    options.setChart(chart);

    HITitle title = new HITitle();
    title.setText("Historic World Population by Region");
    options.setTitle(title);

    HISubtitle subtitle = new HISubtitle();
    subtitle.setText("Source: <a href=\\\"https://en.wikipedia.org/wiki/World_population\\\">Wikipedia.org</a>Source: <a href=\\\"https://en.wikipedia.org/wiki/World_population\\\">Wikipedia.org</a>");
    options.setSubtitle(subtitle);

    HIXAxis xaxis = new HIXAxis();
    String[] categories = new String[] { "Africa", "America", "Asia", "Europe", "Oceania"};
    xaxis.setCategories(new ArrayList<>(Arrays.asList(categories)));
    options.setXAxis(new ArrayList<HIXAxis>(){{add(xaxis);}});

    HIYAxis yaxis = new HIYAxis();
    yaxis.setMin(0);
    yaxis.setTitle(new HITitle());
    yaxis.getTitle().setText("Population (millions)");
    yaxis.getTitle().setAlign("high");
    yaxis.setLabels(new HILabels());
    yaxis.getLabels().setOverflow("justify");
    options.setYAxis(new ArrayList<HIYAxis>(){{add(yaxis);}});

    HITooltip tooltip = new HITooltip();
    tooltip.setValueSuffix(" millions");
    options.setTooltip(tooltip);

    HILegend legend = new HILegend();
    legend.setLayout("vertical");
    legend.setAlign("right");
    legend.setVerticalAlign("top");
    legend.setX(-40);
    legend.setY(80);
    legend.setFloating(true);
    legend.setBorderWidth(1);
    legend.setBackgroundColor(HIColor.initWithHexValue("FFFFFF"));
    legend.setShadow(true);
    options.setLegend(legend);

    HICredits credits = new HICredits();
    credits.setEnabled(false);
    options.setCredits(credits);

    HIBar bar1 = new HIBar();
    bar1.setName("Year 1800");
    Number[] bar1Data = new Number[] {107, 31, 635, 203, 2 };
    bar1.setData(new ArrayList<>(Arrays.asList(bar1Data)));

    HIBar bar2 = new HIBar();
    bar2.setName("Year 1900");
    Number[] bar2Data = new Number[] { 133, 156, 947, 408, 6 };
    bar2.setData(new ArrayList<>(Arrays.asList(bar2Data)));

    HIBar bar3 = new HIBar();
    bar3.setName("Year 2012");
    Number[] bar3Data = new Number[] { 1052, 954, 4250, 740, 38 };
    bar3.setData(new ArrayList<>(Arrays.asList(bar3Data)));

    options.setSeries(new ArrayList<>(Arrays.asList(bar1, bar2,bar3)));

    chartView.setOptions(options);
}
}

Output

enter image description here

Expected Output

I want a single entry against each month like below.

enter image description here

What I Have tried

I have tried the below code

    HIXAxis xaxis = new HIXAxis();
    String[] categories = new String[] { "Mar-2021", "Apr-2021","May-2021"};
    xaxis.setCategories(new ArrayList<>(Arrays.asList(categories)));
    options.setXAxis(new ArrayList<HIXAxis>(){{add(xaxis);}});

    HIBar bar1 = new HIBar();
    bar1.setName("March");
    Number[] bar1Data = new Number[]{10};
    bar1.setData(new ArrayList<>(Arrays.asList(bar1Data)));

    HIBar bar2 = new HIBar();
    bar2.setName("April");
    Number[] bar2Data = new Number[] {15};
    bar2.setData(new ArrayList<>(Arrays.asList(bar2Data)));

    HIBar bar3 = new HIBar();
    bar3.setName("May");
    Number[] bar3Data = new Number[] {20};
    bar3.setData(new ArrayList<>(Arrays.asList(bar3Data)));

Output

The output is not what I have expected as it's showing all the 3 values against the single month

enter image description here

Update 1

I have found a solution for the web but unfortunately, I am unable to do the same in my android code. here is the fiddle


Solution

  • You need to increase data amount, not series amount. So instead of multiple series:

    HIBar bar1 = new HIBar();
    Number[] bar1Data = new Number[]{10};
    ...
    
    HIBar bar2 = new HIBar();
    Number[] bar2Data = new Number[] {15};
    ...
    
    HIBar bar3 = new HIBar();
    Number[] bar3Data = new Number[] {20};
    ...
    

    Use one series with multiple points:

    HIBar bar1 = new HIBar();
    Number[] bar1Data = new Number[] {107, 31, 635, 203, 2 };
    bar1.setData(new ArrayList<>(Arrays.asList(bar1Data)));