Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to reload chart with new data? #28

Closed
trungdn0401 opened this issue Aug 21, 2018 · 19 comments
Closed

How to reload chart with new data? #28

trungdn0401 opened this issue Aug 21, 2018 · 19 comments
Assignees

Comments

@trungdn0401
Copy link

Hi,

I'm using trial version, how to reload chart with new data?

Thanks!

@Shestac92 Shestac92 self-assigned this Aug 21, 2018
@ArsenyMalkov ArsenyMalkov self-assigned this Aug 21, 2018
@Shestac92
Copy link

@trungdn0401
There's no need in recreating chart to apply new data. You can add new data using its API. Please, check this sample, you can use the same approach for your charts.

@trungdn0401
Copy link
Author

trungdn0401 commented Aug 21, 2018

@Shestac92
I tried to change all data of chart, but it show wrong result. My code like this (tried from Column3DChartActivity sample).

//test new data
Button btnAbc = findViewById(R.id.btnAbc);
btnAbc.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        List<DataEntry> test = new ArrayList<>();
        test.add(new CustomDataEntry("Espresso", 1, 2, 3, null, null, null));
        test.add(new CustomDataEntry("Doppio", 2, null, null, null, null, null));
        test.add(new CustomDataEntry("Trippio", 3, null, null, null, null, null));
        test.add(new CustomDataEntry("Americano", 1, 3, null, null, null, null));
        test.add(new CustomDataEntry("Cappuchino", 1, null, 1, 2, null, null));
        test.add(new CustomDataEntry("Macchiato", 2.5, null, null, 1, null, null));
        test.add(new CustomDataEntry("Latte", 1, null, 2, 1, null, null));
        test.add(new CustomDataEntry("Latte Macchiato", 1, null, 2, null, 1, null));
        test.add(new CustomDataEntry("Vienna Coffee", 1, null, null, null, 2, null));
        test.add(new CustomDataEntry("Mocco", 1, null, 1, null, 1, 1));
        column3d.setData(test);
    }
});

image

@Shestac92
Copy link

@trungdn0401
Thank you for the screenshot! Now I see all your requirements. Unfortunately, in the current version of the library multi-series chart can be updated with new data only by recreating the chart. The single series chart like Pie and Gauges can be updated without recreating.
Soon we will release a major update of the Android library which will allow updating chart and series data without recreating the chart and many other features and improvements.

@Shestac92
Copy link

Shestac92 commented Sep 3, 2018

@trungdn0401
We are glad to notify you that we have updated the library.
Now you can update your data like this using the latest version:

private Set set;

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

        AnyChartView anyChartView = findViewById(R.id.any_chart_view);

        Cartesian3d column3d = AnyChart.column3d();

        column3d.yScale().stackMode(ScaleStackMode.VALUE);

        column3d.title("Types of Coffee");
        column3d.title().padding(0d, 0d, 15d, 0d);

        List<DataEntry> seriesData = new ArrayList<>();
        seriesData.add(new CustomDataEntry("Espresso", 1, null, null, null, null, null));

        set = Set.instantiate();
        set.data(seriesData);
        Mapping series1Data = set.mapAs("{ x: 'x', value: 'value' }");

        Column3d series1 = column3d.column(series1Data);
        series1.name("Espresso");
        series1.fill(new SolidFill("#3e2723", 1d));
        series1.stroke("1 #f7f3f3");
        series1.hovered().stroke("3 #f7f3f3");

        column3d.legend().enabled(true);
        column3d.legend().fontSize(13d);
        column3d.legend().padding(0d, 0d, 20d, 0d);

        column3d.yScale().ticks("[0, 1, 2, 3, 4, 5]");
        column3d.xAxis(0).stroke("1 #a18b7e");
        column3d.xAxis(0).labels().fontSize("#a18b7e");
        column3d.yAxis(0).stroke("1 #a18b7e");
        column3d.yAxis(0).labels().fontColor("#a18b7e");
        column3d.yAxis(0).labels().format("{%Value}{groupsSeparator: }");

        column3d.yAxis(0).title().enabled(true);
        column3d.yAxis(0).title().text("Portions of Ingredients");
        column3d.yAxis(0).title().fontColor("#a18b7e");

        column3d.interactivity().hoverMode(HoverMode.BY_X);

        column3d.tooltip()
               .displayMode(TooltipDisplayMode.UNION)
               .format("{%Value} {%SeriesName}");

        column3d.yGrid(0).stroke("#a18b7e", 1d, null, null, null);
        column3d.xGrid(0).stroke("#a18b7e", 1d, null, null, null);

        anyChartView.setChart(column3d);

        
      Button btnAbc = findViewById(R.id.btnAbc);
      btnAbc.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              List<DataEntry> seriesData = new ArrayList<>();
              seriesData.add(new CustomDataEntry("Espresso", new Random().nextInt(10), new Random().nextInt(10), new Random().nextInt(10), null, null, null));
              set.data(seriesData);
          }
      });
   }

@trungdn0401
Copy link
Author

trungdn0401 commented Sep 4, 2018

@Shestac92
Thanks in advance!

And, Is there any ways to fixed column width of chart above pls?

@Shestac92
Copy link

@trungdn0401
Yes, you can adjust column width by the following line:
column3d.barGroupsPadding(0);

Padding is measured as a ratio to the width of columns (the width is calculated automatically). So, if it is < 1, the space between columns or column groups is less than the width of columns, and vice versa. If padding is set to 0, there is no space between columns/groups, and a negative parameter makes columns overlap each other.

@trungdn0401
Copy link
Author

Hello @Shestac92 ,
How to dismiss progress_bar after update data to chart by above way, or after chart is rendered?

@Shestac92
Copy link

@trungdn0401
The progress bar is shown only once when the chart was rendered at the first time.
Do you want to show the progress bar when the chart's data is updating and hide the bar when the chart has been updated?

@trungdn0401
Copy link
Author

trungdn0401 commented Sep 14, 2018

@trungdn0401
The progress bar is shown only once when the chart was rendered at the first time.
Do you want to show the progress bar when the chart's data is updating and hide the bar when the chart has been updated?
@Shestac92
Q1: Yes, hide the bar when the chart has been updated.
Q2: I have 2 charts (3D column and Line) on same layout. I used anyChartView.setChart(column3d) and anyChartView.setChart(line) to change the chart, but it doesn't work, it show white blank on screen? How to change the chart in my case?

@Shestac92
Copy link

@trungdn0401

  1. Can you provide us with an example or gif how should the progress act?
  2. We have just updated the library to handle this issue. Please, update you library and use the following approach:
// remove old chart
anyChartView.clear();

// and only than create a new chart and add to the view
Pie pie = AnyChart.pie();

List<DataEntry> data = new ArrayList<>();
data.add(new ValueDataEntry("Apples", 6371664));
data.add(new ValueDataEntry("Pears", 789622));

pie.data(data);

anyChartView.setChart(pie);

@trungdn0401
Copy link
Author

trungdn0401 commented Sep 14, 2018

@Shestac92
It's show me double charts at 2nd drawing (the 1st drawing is ok) after apply your code: clear -> setChart

Hi @Shestac92 , It's OK if I does not clear, just setChart. Thank you!

device-2018-09-14-161156

@trungdn0401
Copy link
Author

Hi @Shestac92 ,

Are there anychart like this?
image

@Shestac92
Copy link

@trungdn0401
You can implement a similar chart like this:

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

        AnyChartView anyChartView = findViewById(R.id.any_chart_view);

        Cartesian column = AnyChart.column();

        List<DataEntry> seriesData = new ArrayList<>();
        seriesData.add(new CustomDataEntry("1990", 10, 40, 10));
        seriesData.add(new CustomDataEntry("1991", 40, 5, 50));
        seriesData.add(new CustomDataEntry("1992", 80, 50, 30));
        seriesData.add(new CustomDataEntry("1993", 80, 20, 90));
        seriesData.add(new CustomDataEntry("1994", 40, 80, 85));
        seriesData.add(new CustomDataEntry("1995", 15, 50, 60));

        Set set = Set.instantiate();
        set.data(seriesData);
        Mapping series1Data = set.mapAs("{ x: 'x', value: 'value' }");
        Mapping series2Data = set.mapAs("{ x: 'x', value: 'value2' }");
        Mapping series3Data = set.mapAs("{ x: 'x', value: 'value3' }");

        Column series1 = column.column(series1Data);
        series1.name("Company 1")
                .color("#00ff00");

        Column series2 = column.column(series2Data);
        series2.name("Company 2")
                .color("#0000ff");

        Column series3 = column.column(series3Data);
        series3.name("Company 3")
                .color("#ffff00");

        column.xAxis(0).orientation(Orientation.TOP)
                .stroke(null)
                .ticks(false);
        column.xGrid(0).enabled(true);

        column.legend(true);
        column.legend()
                .position(Orientation.RIGHT)
                .itemsLayout(LegendLayout.VERTICAL);

        anyChartView.setChart(column);
    }

private class CustomDataEntry extends ValueDataEntry {
    CustomDataEntry(String x, Number value, Number value2, Number value3) {
        super(x, value);
        setValue("value2", value2);
        setValue("value3", value3);
    }
}

@shiv2810
Copy link

@trungdn0401

  1. Can you provide us with an example or gif how should the progress act?
  2. We have just updated the library to handle this issue. Please, update you library and use the following approach:
// remove old chart
anyChartView.clear();

// and only than create a new chart and add to the view
Pie pie = AnyChart.pie();

List<DataEntry> data = new ArrayList<>();
data.add(new ValueDataEntry("Apples", 6371664));
data.add(new ValueDataEntry("Pears", 789622));

pie.data(data);

anyChartView.setChart(pie);

Hi,
I am using this approach in my chart. but after using it. chart is not showing.
Here is my code

  anyChartView.clear();
    APIlib.getInstance().setActiveAnyChartView(anyChartView);
    
    Cartesian areaChart = AnyChart.area();

    areaChart.animation(true);

    Crosshair crosshair = areaChart.crosshair();
    crosshair.enabled(true);
    // TODO yStroke xStroke in crosshair
    crosshair.yStroke((Stroke) null, null, null, (String) null, (String) null)
            .xStroke("#fff", 1d, null, (String) null, (String) null)
            .zIndex(39d);
    crosshair.yLabel(0).enabled(true);

    areaChart.yScale().stackMode(ScaleStackMode.VALUE);

    List<DataEntry> seriesData = new ArrayList<>();
    for (int i = 0; i < reinsuranceGraphPojo.getChart().size(); i++) {
        seriesData.add(new CustomDataEntry(reinsuranceGraphPojo.getChart().get(i).getYear(), reinsuranceGraphPojo.getChart().get(i).getLimitReducedByPrepayM1(), reinsuranceGraphPojo.getChart().get(i).getLimitReducedByPrepayM2(),reinsuranceGraphPojo.getChart().get(i).getLimitReducedByPrepayM3(),reinsuranceGraphPojo.getChart().get(i).getLimitReducedByPrepayM4(), reinsuranceGraphPojo.getChart().get(i).getLimitReducedByPrepayB1(), reinsuranceGraphPojo.getChart().get(i).getLimitReducedByPrepayB2(), reinsuranceGraphPojo.getChart().get(i).getLimitReducedByPrepayB3(), reinsuranceGraphPojo.getChart().get(i).getLimitReducedByPrepayB4(),reinsuranceGraphPojo.getChart().get(i).getCumloss()));

    }



    Set set = Set.instantiate();
    set.data(seriesData);

    Mapping series1Data = set.mapAs("{ x: 'x', value: 'value' }");
    Mapping series2Data = set.mapAs("{ x: 'x', value: 'value2' }");
    Mapping series3Data = set.mapAs("{ x: 'x', value: 'value3' }");
    Mapping series4Data = set.mapAs("{ x: 'x', value: 'value4' }");
    Mapping series5Data = set.mapAs("{ x: 'x', value: 'value5' }");
    Mapping series6Data = set.mapAs("{ x: 'x', value: 'value6' }");
    Mapping series7Data = set.mapAs("{ x: 'x', value: 'value7' }");
    Mapping series8Data = set.mapAs("{ x: 'x', value: 'value8' }");
    Mapping jumpLineData = set.mapAs("{ x: 'x', value: 'jumpLine' }");

    Line jumpLine = areaChart.line(jumpLineData);
    jumpLine.stroke("2 #7700ce");
    jumpLine.labels().enabled(false);

    Area series1 = areaChart.area(series1Data);
    series1.name("M1");
    series1.normal().fill("#11e200", 0.3);
    series1.markers().zIndex(100d);

    Area series2 = areaChart.area(series2Data);
    series2.name("M2");
    series2.stroke("3 #fff");
    series2.hovered().stroke("3 #fff");
    series2.hovered().markers().enabled(true);
    series2.hovered().markers().type(MarkerType.CIRCLE).size(4d).stroke("1.5 #fff");
    series2.normal().fill("#18a5d2", 0.3);
    series2.markers().zIndex(100d);

    Area series3 = areaChart.area(series3Data);
    series3.name("M3");
    series3.stroke("3 #fff");
    series3.hovered().stroke("3 #fff");
    series3.hovered().markers().enabled(true);
    series3.hovered().markers()
            .type(MarkerType.CIRCLE)
            .size(4d)
            .stroke("1.5 #fff");
    series3.normal().fill("#e91c73", 0.3);

    series3.markers().zIndex(100d);

    Area series4 = areaChart.area(series4Data);
    series4.name("M4");
    series4.stroke("3 #fff");
    series4.hovered().stroke("3 #fff");
    series4.hovered().markers().enabled(true);
    series4.hovered().markers()
            .type(MarkerType.CIRCLE)
            .size(4d)
            .stroke("1.5 #fff");
    series4.normal().fill("#ffae0b", 0.3);
    series4.markers().zIndex(100d);

    Area series5 = areaChart.area(series5Data);
    series5.name("M5");
    series5.stroke("3 #fff");
    series5.hovered().stroke("3 #fff");
    series5.hovered().markers().enabled(true);
    series5.hovered().markers()
            .type(MarkerType.CIRCLE)
            .size(4d)
            .stroke("1.5 #fff");
    series5.normal().fill("#11e200", 0.3);
    series5.markers().zIndex(100d);
    Area series6 = areaChart.area(series6Data);
    series6.name("M6");
    series6.stroke("3 #fff");
    series6.hovered().stroke("3 #fff");
    series6.hovered().markers().enabled(true);
    series6.hovered().markers()
            .type(MarkerType.CIRCLE)
            .size(4d)
            .stroke("1.5 #fff");
    series6.normal().fill("#18a5d2", 0.3);
    series6.markers().zIndex(100d);

    Area series7 = areaChart.area(series7Data);
    series7.name("M7");
    series7.stroke("3 #fff");
    series7.hovered().stroke("3 #fff");
    series7.hovered().markers().enabled(true);
    series7.hovered().markers()
            .type(MarkerType.CIRCLE)
            .size(4d)
            .stroke("1.5 #fff");
    series7.normal().fill("#e91c73", 0.3);
    series7.markers().zIndex(100d);

    Area series8 = areaChart.area(series8Data);
    series8.name("M8");
    series8.stroke("3 #fff");
    series8.hovered().stroke("3 #fff");
    series8.hovered().markers().enabled(true);
    series8.hovered().markers()
            .type(MarkerType.CIRCLE)
            .size(4d)
            .stroke("1.5 #fff");
    series8.normal().fill("#ffae0b", 0.3);
    series8.markers().zIndex(100d);




    areaChart.legend().enabled(false);
    areaChart.legend().fontSize(13d);
    areaChart.legend().padding(0d, 0d, 20d, 0d);

    areaChart.xAxis(0).title(false);
    areaChart.interactivity().hoverMode(HoverMode.BY_X);

    anyChartView.setChart(areaChart);

@phuquy2114
Copy link

@trungdn0401
We are glad to notify you that we have updated the library.
Now you can update your data like this using the latest version:

private Set set;

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

        AnyChartView anyChartView = findViewById(R.id.any_chart_view);

        Cartesian3d column3d = AnyChart.column3d();

        column3d.yScale().stackMode(ScaleStackMode.VALUE);

        column3d.title("Types of Coffee");
        column3d.title().padding(0d, 0d, 15d, 0d);

        List<DataEntry> seriesData = new ArrayList<>();
        seriesData.add(new CustomDataEntry("Espresso", 1, null, null, null, null, null));

        set = Set.instantiate();
        set.data(seriesData);
        Mapping series1Data = set.mapAs("{ x: 'x', value: 'value' }");

        Column3d series1 = column3d.column(series1Data);
        series1.name("Espresso");
        series1.fill(new SolidFill("#3e2723", 1d));
        series1.stroke("1 #f7f3f3");
        series1.hovered().stroke("3 #f7f3f3");

        column3d.legend().enabled(true);
        column3d.legend().fontSize(13d);
        column3d.legend().padding(0d, 0d, 20d, 0d);

        column3d.yScale().ticks("[0, 1, 2, 3, 4, 5]");
        column3d.xAxis(0).stroke("1 #a18b7e");
        column3d.xAxis(0).labels().fontSize("#a18b7e");
        column3d.yAxis(0).stroke("1 #a18b7e");
        column3d.yAxis(0).labels().fontColor("#a18b7e");
        column3d.yAxis(0).labels().format("{%Value}{groupsSeparator: }");

        column3d.yAxis(0).title().enabled(true);
        column3d.yAxis(0).title().text("Portions of Ingredients");
        column3d.yAxis(0).title().fontColor("#a18b7e");

        column3d.interactivity().hoverMode(HoverMode.BY_X);

        column3d.tooltip()
               .displayMode(TooltipDisplayMode.UNION)
               .format("{%Value} {%SeriesName}");

        column3d.yGrid(0).stroke("#a18b7e", 1d, null, null, null);
        column3d.xGrid(0).stroke("#a18b7e", 1d, null, null, null);

        anyChartView.setChart(column3d);

        
      Button btnAbc = findViewById(R.id.btnAbc);
      btnAbc.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              List<DataEntry> seriesData = new ArrayList<>();
              seriesData.add(new CustomDataEntry("Espresso", new Random().nextInt(10), new Random().nextInt(10), new Random().nextInt(10), null, null, null));
              set.data(seriesData);
          }
      });
   }

Hi everybody. When I use the code in fragment then It's not working when the add new data

@phuquy2114
Copy link

@Shestac92 I can't reload new data when it's action in fragment class. please help me. thanks so much

@herou
Copy link

herou commented Jun 13, 2019

@trungdn0401
We are glad to notify you that we have updated the library.
Now you can update your data like this using the latest version:

private Set set;

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

        AnyChartView anyChartView = findViewById(R.id.any_chart_view);

        Cartesian3d column3d = AnyChart.column3d();

        column3d.yScale().stackMode(ScaleStackMode.VALUE);

        column3d.title("Types of Coffee");
        column3d.title().padding(0d, 0d, 15d, 0d);

        List<DataEntry> seriesData = new ArrayList<>();
        seriesData.add(new CustomDataEntry("Espresso", 1, null, null, null, null, null));

        set = Set.instantiate();
        set.data(seriesData);
        Mapping series1Data = set.mapAs("{ x: 'x', value: 'value' }");

        Column3d series1 = column3d.column(series1Data);
        series1.name("Espresso");
        series1.fill(new SolidFill("#3e2723", 1d));
        series1.stroke("1 #f7f3f3");
        series1.hovered().stroke("3 #f7f3f3");

        column3d.legend().enabled(true);
        column3d.legend().fontSize(13d);
        column3d.legend().padding(0d, 0d, 20d, 0d);

        column3d.yScale().ticks("[0, 1, 2, 3, 4, 5]");
        column3d.xAxis(0).stroke("1 #a18b7e");
        column3d.xAxis(0).labels().fontSize("#a18b7e");
        column3d.yAxis(0).stroke("1 #a18b7e");
        column3d.yAxis(0).labels().fontColor("#a18b7e");
        column3d.yAxis(0).labels().format("{%Value}{groupsSeparator: }");

        column3d.yAxis(0).title().enabled(true);
        column3d.yAxis(0).title().text("Portions of Ingredients");
        column3d.yAxis(0).title().fontColor("#a18b7e");

        column3d.interactivity().hoverMode(HoverMode.BY_X);

        column3d.tooltip()
               .displayMode(TooltipDisplayMode.UNION)
               .format("{%Value} {%SeriesName}");

        column3d.yGrid(0).stroke("#a18b7e", 1d, null, null, null);
        column3d.xGrid(0).stroke("#a18b7e", 1d, null, null, null);

        anyChartView.setChart(column3d);

        
      Button btnAbc = findViewById(R.id.btnAbc);
      btnAbc.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              List<DataEntry> seriesData = new ArrayList<>();
              seriesData.add(new CustomDataEntry("Espresso", new Random().nextInt(10), new Random().nextInt(10), new Random().nextInt(10), null, null, null));
              set.data(seriesData);
          }
      });
   }

It does not work for me.

@AbnerBaluyut
Copy link

Hi, i'm using vertical chart. the data doesn't update after changing from API. Thanks

@gabriel-TheCode
Copy link

Same issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants