Can't change HIChartView height dynamically multiple times

[pradeep2424]

Now I am trying to change HIChartView height multiple times on same page. I have three buttons and using below code on button click.

Button 1) chartView.getLayoutParams().height = 300;
Button 2) chartView.getLayoutParams().height = 500;
Button 3) chartView.getLayoutParams().height = 700;

only first time height changes. After that HIChartView is not changing its height.

[soommy12]

Hi @pradeep2424 ! Thanks for the question. I will investigate the problem.

[soommy12]

I have created a simple app where I dynamically change chart height 4 times and everything works as intended. Can you please share some more code? Maybe that way I could find a problem?

[pradeep2424]

I am attaching my Java and XML layout file. I am using this dependency for HighCharts but still I can't change height multiple times. implementation 'com.highsoft.highcharts:highcharts:7.0.3'

TestActivity.java -

` package com.test.graph.utils;

import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button;

import com.highsoft.highcharts.common.hichartsclasses.HIBar; import com.highsoft.highcharts.common.hichartsclasses.HICSSObject; import com.highsoft.highcharts.common.hichartsclasses.HIChart; import com.highsoft.highcharts.common.hichartsclasses.HICredits; import com.highsoft.highcharts.common.hichartsclasses.HIExporting; import com.highsoft.highcharts.common.hichartsclasses.HILabels; import com.highsoft.highcharts.common.hichartsclasses.HILegend; import com.highsoft.highcharts.common.hichartsclasses.HIOptions; import com.highsoft.highcharts.common.hichartsclasses.HITitle; import com.highsoft.highcharts.common.hichartsclasses.HITooltip; import com.highsoft.highcharts.common.hichartsclasses.HIXAxis; import com.highsoft.highcharts.common.hichartsclasses.HIYAxis; import com.highsoft.highcharts.core.HIChartView; import com.highsoft.highcharts.core.HIFunction; import com.sogo.sogosurvey.R; import com.sogo.sogosurvey.drawer.mySurveys.reports.omniReports.ReportsQuestionAdapter;

import java.util.ArrayList; import java.util.Arrays; import java.util.HashMap;

public class TestActivity extends AppCompatActivity {

HIChartView chartView;
Button btn1;
Button btn2;
Button btn3;

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

    chartView = (HIChartView) findViewById(R.id.hc);
    btn1 = (Button) findViewById(R.id.button1);
    btn2 = (Button) findViewById(R.id.button2);
    btn3 = (Button) findViewById(R.id.button3);

    initGraph();
    events();
}

private void events() {
    btn1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            calculateHorizontalBarHeightDynamically(300);
        }
    });

    btn2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            calculateHorizontalBarHeightDynamically(500);
        }
    });

    btn3.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            calculateHorizontalBarHeightDynamically(700);
        }
    });
}

private void initGraph() {
    HIOptions options = new HIOptions();
    HIChart chart = new HIChart();

    chart.setType("bar");
    chart.setMarginLeft(60);
    chart.setMarginRight(30);
    chart.setMarginTop(10);
    chart.setMarginBottom(30);
    options.setChart(chart);

    HITitle title = new HITitle();
    title.setText("");
    options.setTitle(title);

    HITooltip tooltip = new HITooltip();
    tooltip.setPointFormat("{series.name}<b>{point.y:.0f}%</b>");
    options.setTooltip(tooltip);

    HICSSObject hicssObject = new HICSSObject();
    hicssObject.setWidth(40);
    hicssObject.setWhiteSpace("nowrap");
    hicssObject.setTextOverflow("ellipsis");

    HILabels hiLabels1 = new HILabels();
    hiLabels1.setStyle(hicssObject);

    final HIXAxis xAxis = new HIXAxis();
    xAxis.setLabels(hiLabels1);
    xAxis.setType("category");
    options.setXAxis(new ArrayList<HIXAxis>() {{
        add(xAxis);
    }});

    HILabels hiLabels = new HILabels();
    hiLabels.setFormatter(new HIFunction("function () { return Math.abs(this.value) + '%'; }"));

    final HIYAxis yAxis = new HIYAxis();
    yAxis.setMin(0);
    yAxis.setMax(100);
    yAxis.setTitle(title);
    yAxis.setLabels(hiLabels);
    options.setYAxis(new ArrayList<HIYAxis>() {{
        add(yAxis);
    }});

    HILegend legend = new HILegend();
    legend.setEnabled(false);
    options.setLegend(legend);

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

    HIExporting hiExporting = new HIExporting();
    hiExporting.setEnabled(false);
    options.setExporting(hiExporting);

    HIBar series1 = new HIBar();
    series1.setName("");  // tooltip text
    series1.setColorByPoint(true);  // to set custom colors
    series1.setPointWidth(20);

    HashMap<String, Object> map1 = new HashMap<>();
    map1.put("name", "Apples");
    map1.put("y", 50);

    HashMap<String, Object> map2 = new HashMap<>();
    map2.put("name", "Oranges");
    map2.put("y", 30);

    HashMap<String, Object> map3 = new HashMap<>();
    map3.put("name", "Pears");
    map3.put("y", 40);

    HashMap<String, Object> map4 = new HashMap<>();
    map4.put("name", "Grapes");
    map4.put("y", 70);

    HashMap<String, Object> map5 = new HashMap<>();
    map5.put("name", "Bananas");
    map5.put("y", 20);

    series1.setData(new ArrayList<>(Arrays.asList(map1, map2, map3, map4, map5)));
    options.setSeries(new ArrayList<>(Arrays.asList(series1)));

    chartView.setOptions(options);
    chartView.reload();
}

private void calculateHorizontalBarHeightDynamically(int dynamicHeight) {
    chartView.getLayoutParams().height = dynamicHeight;
}

} `

activity_test.xml - `

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">

<LinearLayout
    android:id="@+id/ll_chartView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.highsoft.highcharts.core.HIChartView
        android:id="@+id/hc"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="4dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="4dp" />

</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:padding="10dp">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="300 dp"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="500 dp"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="700 dp"
        android:textAllCaps="false" />

</RelativeLayout>

`

[soommy12]

Please change your method as follows:

    private void calculateHorizontalBarHeightDynamically(int dynamicHeight) {
        ViewGroup.LayoutParams layoutParams = chartView.getLayoutParams();
        layoutParams.height = dynamicHeight;
        chartView.setLayoutParams(layoutParams);
    }

[pradeep2424]

I tried your solution. Its working fine now, height of HIChartView changes but graph is not getting resized. Instead it shows scroll inside HIChartView.

I am attaching screenshot below which displays that HIChartView height changes but graph is not resized according to provided height.

[soommy12]

That's a different story. The chart itself didn't resize when android called setLayoutParams for the HIChartView (chart dimensions are fixed from the first initialization - that's why it was scrollable instead of being cut off). We have made the fix, it will be introduced in the next release.

[pradeep2424]

Ok. When it will be release? can you give me approximate date.

[soommy12]

As the Android version of the library is dependent on the core javascript version the new release will come out in the late august.

[adenisyuk]

Hi @soommy12 ,

Could you please share if there are any updates regarding the next release containing the fix of HIChartView size change handling?

This issue introduces a really bad UX for our users.

[shiv19]

@soommy12 The chart scrolling behaviour still persists. Is there any ETA on the next release?

[pradeep2424]

Yes This issue still exists. I am also looking for the solution on this. Can't understand why it is in 'Closed' state. @soommy12 When can we expect solution on this??

[soommy12]

Hi @shiv19 @pradeep2424 @adenisyuk ! We have solved this problem already and it will be introduced in 8.2 version of the library. Stay tuned!

[shiv19]

@soommy12, it's been 21 days and we're still waiting for the 8.2 release. Can we please have an ETA on this :) Thanks!

[soommy12]

I am really sorry @shiv19 but each new version must match the main library. When the core is released, usually it takes some time until we prepare the mobile versions. This time it took a bit longer, although it will be released this week definitely!

[shiv19]

Thanks for the update @soommy12! looking forward to this update :)

[shiv19]

@soommy12 Is there no clear deadline for the 8.2.0 release? We're still waiting for it :(

[soommy12]

Hi @shiv19 ! Sorry, but we have some issues with releasing a new version due to pandemic matters, please be understanding.

[shiv19]

Hi @soommy12, is there any update about when the 8.2.0 release is coming?

[MikolajMichalczak]

Hello, I'm glad to inform you that a new version of the library, 11.4.0, has been released and it includes a fix for the problem described here. Please feel free to update to the latest release and verify if the issue has been resolved on your end. If you encounter any further issues or have any questions, don't hesitate to let us know.