Tuesday, 11 May 2021

Highchart rendering slow in android

I am working on android and trying to create a speedometer. By following this sample I am able to view the speedometer.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<com.highsoft.highcharts.core.HIChartView
    android:id="@+id/hc"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity

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("gauge");
    chart.setPlotBorderWidth(0);
    chart.setPlotShadow(false);
    options.setChart(chart);

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

    HIPane pane = new HIPane();
    pane.setStartAngle(-150);
    pane.setEndAngle(150);
    HIBackground background1 = new HIBackground();
    HIGradient gradient = new HIGradient();
    LinkedList<HIStop> stops = new LinkedList<>();
    stops.add(new HIStop(0, HIColor.initWithHexValue("FFF")));
    stops.add(new HIStop(1, HIColor.initWithHexValue("333")));
    background1.setBackgroundColor(HIColor.initWithLinearGradient(gradient, stops));
    background1.setBorderWidth(0);
    background1.setOuterRadius("109%");
    HIBackground background2 = new HIBackground();
    background2.setBackgroundColor(HIColor.initWithLinearGradient(gradient, stops));
    background2.setBorderWidth(1);
    background2.setOuterRadius("107%");
    HIBackground background3 = new HIBackground();
    HIBackground background4 = new HIBackground();
    background4.setBackgroundColor(HIColor.initWithHexValue("DDD"));
    background4.setBorderWidth(0);
    background4.setOuterRadius("105%");
    background4.setInnerRadius("103%");
    pane.setBackground(new ArrayList<>(Arrays.asList(background1, background2, background3, background4)));
    options.setPane(pane);

    HIYAxis yaxis = new HIYAxis();
    yaxis.setMin(-100);
    yaxis.setMax(100);
    yaxis.setMinorTickWidth(1);
    yaxis.setMinorTickLength(10);
    yaxis.setMinorTickPosition("inside");
    yaxis.setMinorTickColor(HIColor.initWithHexValue("666"));
    yaxis.setTickPixelInterval(30);
    yaxis.setTickWidth(2);
    yaxis.setTickPosition("inside");
    yaxis.setTickLength(10);
    yaxis.setTickColor(HIColor.initWithHexValue("666"));
    yaxis.setLabels(new HILabels());
    yaxis.getLabels().setStep(2);
    yaxis.setTitle(new HITitle());
    yaxis.getTitle().setText("km/h");

    HIPlotBands plotband1 = new HIPlotBands();
    plotband1.setFrom(-100);
    plotband1.setTo(-50);
    plotband1.setColor(HIColor.initWithName("Red"));

    HIPlotBands plotband2 = new HIPlotBands();
    plotband2.setFrom(-50);
    plotband2.setTo(0);
    plotband2.setColor(HIColor.initWithName("Yellow"));

    HIPlotBands plotband3 = new HIPlotBands();
    plotband3.setFrom(0);
    plotband3.setTo(50);
    plotband3.setColor(HIColor.initWithName("Blue"));

    HIPlotBands plotband4 = new HIPlotBands();
    plotband4.setFrom(50);
    plotband4.setTo(100);
    plotband4.setColor(HIColor.initWithName("Green"));

    yaxis.setPlotBands(new ArrayList<>(Arrays.asList(plotband1, plotband2, plotband3,plotband4)));
    options.setYAxis(new ArrayList<>(Collections.singletonList(yaxis)));

    HIGauge gauge = new HIGauge();
    gauge.setName("Speed");
    gauge.setTooltip(new HITooltip());
    gauge.getTooltip().setValueSuffix(" km/h");
    gauge.setData(new ArrayList<>(Collections.singletonList(80)));

    options.setSeries(new ArrayList<>(Collections.singletonList(gauge)));

    chartView.setOptions(options);

}
}

Output

enter image description here

As seen above the speedometer is render after sometime likely 2-3 seconds after the app is executed. I remember once when working with highcharts on a web app there was an option for setting up turboThreshold. But I couldn't find it in android, although I have added HIPlotOptions plotOptions = new HIPlotOptions(); but no luck.

How can I minimize the rendering time? Any help would be highly appreciated.



from Highchart rendering slow in android

No comments:

Post a Comment