Highcharts Graph not recreating on same Android activity

Question

I am using Android Highcharts Graph Library in my project.

https://github.com/highcharts/highcharts-android

I have Four Buttons Day, Hour, Minute, Week as below image.

When Activity starts first time it works fine, Graph is also showing correctly all things are working fine but when again API is hitting again on same activity response I am getting correctly but graph is not recreating.

I checked with LOG inside callGraphView() Log prints Correctly but no change detected in graph.

I also checked it without API but same thing happens again. In Web/iOS its working fine.

Below is the URL of This Graph :

https://www.highcharts.com/android/demo/line-basic

Below is my Code :

private void JsonRequestOrderVelocity(String dmhw) {
    utils.showDialog();

    String url = Constants.ORDER_VELOCITY_API+"stemSku=com-1&type="+dmhw+"&warehouse_id="+whareHouse;
    Log.e("URL", "" + url);

    JsonObjectRequest request = new JsonObjectRequest(url, null,
            response -> {
                Log.e("onResponse",""+response);
                try {
                    Gson gson = new Gson();
                    Type listType = new TypeToken<OrderVelocityPojo>() {}.getType();
                    orderVelocityPojo = gson.fromJson(response.toString(), listType);

                    if(dmhw.equalsIgnoreCase("day")){
                        callGraphView("Daily");
                    }else if(dmhw.equalsIgnoreCase("hour")){
                        callGraphView("Hourly");
                    }else if(dmhw.equalsIgnoreCase("minute")){
                        callGraphView("Minute-wise");
                    }else{
                        callGraphView("Weekly");
                    }
                        ...................
}

Graph call Method :

 private void callGraphView(String timeType) {
    Log.e("TIMETYPE",""+timeType);
    chartView.setWillNotDraw(false);
    HIOptions options = new HIOptions();

    HIChart chart = new HIChart();
    chart.type = "line";
    options.chart = chart;

    HITitle title = new HITitle();
    title.text = "("+getIntent().getStringExtra("WHARE_HOUSE_NAME")+") "+timeType+" Sales Trend";
    options.title = title;

    HISubtitle subtitle = new HISubtitle();
    subtitle.text = "Source: thesolarfoundation.com";
    options.subtitle = subtitle;

    HIYAxis yaxis = new HIYAxis();
    yaxis.title = new HITitle();
    yaxis.title.text = "Quantity Sold";
    options.yAxis = new ArrayList<>(Collections.singletonList(yaxis));

    HIXAxis xaxis = new HIXAxis();
    xaxis.categories=orderVelocityPojo.getRange();
    options.xAxis = new ArrayList<>(Collections.singletonList(xaxis));

    HILegend legend = new HILegend();
    legend.layout = "vertical";
    legend.align = "right";
    legend.verticalAlign = "middle";
    options.legend = legend;

    HIPlotOptions plotoptions = new HIPlotOptions();
    plotoptions.series = new HISeries();
    plotoptions.series.label = new HILabel();
    plotoptions.series.label.connectorAllowed = false;;
    plotoptions.series.pointStart = 2010;

    HILine line1 = new HILine();
    line1.name = "Actual Sales("+orderVelocityPojo.getFromDate()+" to "+orderVelocityPojo.getToDate()+")";
    line1.data = count;

    HILine line2 = new HILine();
    line2.name = "Inventory Projected";
    line2.visible=false;
    line2.data = null;

    HILine line3 = new HILine();
    line3.name = "Previous Day Sales("+orderVelocityPojo.getPreviousIntervalFromDateDay()+" to "+orderVelocityPojo.getPreviousIntervalToDateDay()+")";
    line3.visible=false;
    line3.data = previousCountDay;

    HILine line4 = new HILine();
    line4.name = "Previous Week Sales("+orderVelocityPojo.getPreviousIntervalFromDateWeek()+" to "+orderVelocityPojo.getPreviousIntervalToDateWeek()+")";
    line4.visible=false;
    line4.data = previousCountWeek;

    HILine line5 = new HILine();
    line5.name = "Previous Month Sales("+orderVelocityPojo.getPreviousIntervalFromDateMonth()+" to "+orderVelocityPojo.getPreviousIntervalToDateMonth()+")";
    line5.visible=false;
    line5.data = previousCountMonth;

    HILine line6 = new HILine();
    line6.name = "Previous 3 Month Sales("+orderVelocityPojo.getPreviousIntervalFromDate3Month()+" to "+orderVelocityPojo.getPreviousIntervalToDate3Month()+")";
    line6.visible=false;
    line6.data = previousCount3_Month;

    HILine line7 = new HILine();
    line7.name = "Previous 6 Month Sales("+orderVelocityPojo.getPreviousIntervalFromDate6Month()+" to "+orderVelocityPojo.getPreviousIntervalToDate6Month()+")";
    line7.visible=false;
    line7.data = previousCount6_Month;

    HILine line8 = new HILine();
    line8.name = "Previous Years Sales("+orderVelocityPojo.getPreviousIntervalFromDateYear()+" to "+orderVelocityPojo.getPreviousIntervalToDateYear()+")";
    line8.visible=false;
    line8.data = previousCountYear;

    HILine line9 = new HILine();
    line9.name = "MDay 2016 Week Sales("+orderVelocityPojo.getPreviousIntervalFromMothersDay()+" to"+orderVelocityPojo.getPreviousIntervalToMothersDay()+")";
    line9.visible=false;
    line9.data = previousCountMothersDay;

    HILine line10 = new HILine();
    line10.name = "MDay 2016(-1) Week Sales("+orderVelocityPojo.getPreviousIntervalFromMothersDayMinusOne()+" to "+orderVelocityPojo.getPreviousIntervalToMothersDay()+")";
    line10.visible=false;
    line10.data = previousCountMothersDayMinusOne;

    HILine line11 = new HILine();
    line11.name = "MDay 2017 Week Sales("+orderVelocityPojo.getPreviousIntervalFromMothersDay2017()+" to "+orderVelocityPojo.getPreviousIntervalToMothersDay2017()+")";
    line11.visible=false;
    line11.data = previousCountMothersDay2017;

    HILine line12 = new HILine();
    line12.name = "MDay 2017 (-1)Week Sales("+orderVelocityPojo.getPreviousIntervalFromMothersDay2017MinusOne()+" to "+orderVelocityPojo.getPreviousIntervalToMothersDay2017MinusOne()+")";
    line12.visible=false;
    line12.data = previousCountMothersDay2017MinusOne;

    HILine line13 = new HILine();
    line13.name = "VDay 2017 Week Sales("+orderVelocityPojo.getPreviousIntervalFromValentinesDay()+" to "+orderVelocityPojo.getPreviousIntervalToValentinesDay()+")";
    line13.visible=false;
    line13.data = previousCountValentinesDay;

    HILine line14 = new HILine();
    line14.name = "VDay 2017 (-1) Week Sales("+orderVelocityPojo.getPreviousIntervalFromValentinesDayMinusOne()+" to "+orderVelocityPojo.getPreviousIntervalToValentinesDayMinusOne();
    line14.visible=false;
    line14.data = previousCountValentinesDayMinusOne;

    HILine line15 = new HILine();
    line15.name = "Inventory Received";
    line15.visible=false;
    line15.data = null;


    HIResponsive responsive = new HIResponsive();

    HIRules rules1 = new HIRules();
    rules1.condition = new HICondition();
    rules1.condition.maxWidth = 500;
    HashMap<String, HashMap> chartLegend = new HashMap<>();
    HashMap<String, String> legendOptions = new HashMap<>();
    legendOptions.put("layout", "horizontal");
    legendOptions.put("align", "center");
    legendOptions.put("verticalAlign", "bottom");
    chartLegend.put("legend", legendOptions);
    rules1.chartOptions = chartLegend;
    responsive.rules = new ArrayList<>(Collections.singletonList(rules1));
    options.responsive = responsive;
    options.series = new ArrayList<HISeries>(Arrays.asList(line1,line2,line3,line4,line5,line6,line7,line8,line9,line10,line11,line12,line13,line14,line15));
    chartView.options = options;
}

Answer 1

First Solution :

We can use HIChartView object like this: chartView.reload() after each request.

full Code :

 dayButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                manager.updateChart(chartView, c, "area", "DataSteps.json", "day");
                chartView.reload();
            }
        });
        weekButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                manager.updateChart(chartView, c, "area", "DataSteps.json", "week");
                chartView.reload();
            }
        });
        monthButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                manager.updateChart(chartView, c, "area", "DataSteps.json", "month");
                chartView.reload();
            }
        });
        yearButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                manager.updateChart(chartView, c, "area", "DataSteps.json", "year");
                chartView.reload();
            }
        });

Second Solution :

I solved this issue by myself, I created one fragment inside Activity for graph, also I'm hitting API inside fragment with highcharts-graphView.

So when i taps on any of them Day,Hour,Minute,Week button it creates fragment every time and graph showing.

Here is the code :

 @Override
public void onClick(View view) {
    if(view.getId()==R.id.btndayOV){

        OrderVelocityFragment fragment = new OrderVelocityFragment().newInstance(whareHouse,whareHouseName,"day");
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame_home, fragment)
                .commit();

        day.setTextColor(Color.WHITE);
        day.setBackgroundResource(R.color.orderVelocity);
        hour.setBackgroundResource(R.color.orderVelocityLight);
        minute.setBackgroundResource(R.color.orderVelocityLight);
        week.setBackgroundResource(R.color.orderVelocityLight);
    }
    else if(view.getId()==R.id.btnHourOV){

        OrderVelocityFragment fragment = new OrderVelocityFragment().newInstance(whareHouse,whareHouseName,"hour");
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame_home, fragment)
                .commit();

        hour.setTextColor(Color.WHITE);
        day.setBackgroundResource(R.color.orderVelocityLight);
        hour.setBackgroundResource(R.color.orderVelocity);
        minute.setBackgroundResource(R.color.orderVelocityLight);
        week.setBackgroundResource(R.color.orderVelocityLight);
    }
    else if(view.getId()==R.id.btnMinuteOV){

        OrderVelocityFragment fragment = new OrderVelocityFragment().newInstance(whareHouse,whareHouseName,"minute");
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame_home, fragment)
                .commit();

        minute.setTextColor(Color.WHITE);
        day.setBackgroundResource(R.color.orderVelocityLight);
        hour.setBackgroundResource(R.color.orderVelocityLight);
        minute.setBackgroundResource(R.color.orderVelocity);
        week.setBackgroundResource(R.color.orderVelocityLight);
    }
    else if(view.getId()==R.id.btnWeekOV){

        OrderVelocityFragment fragment = new OrderVelocityFragment().newInstance(whareHouse,whareHouseName,"week");
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame_home, fragment)
                .commit();

        week.setTextColor(Color.WHITE);
        day.setBackgroundResource(R.color.orderVelocityLight);
        hour.setBackgroundResource(R.color.orderVelocityLight);
        minute.setBackgroundResource(R.color.orderVelocityLight);
        week.setBackgroundResource(R.color.orderVelocity);
    }
}