How to populate AnyChart from database values dynamically in android?

Question

I am looking ways to create a line chart using AnyChart library in android. The values are coming dynamically through my api link (in json format).I have tried many times but wasn't able to do it. Some help would be appreciated. Thank you.

The code is as folllows-

 try {
      JSONObject jsonObject = new JSONObject(response);
      String success = jsonObject.getString("status");
      String cdata = jsonObject.getString("chart_data"); // for extra condition
      final JSONArray jsonArray1 = jsonObject.getJSONArray("chart_data");
      if (success.equals("true") && !cdata.equals(null)) {
      for (int i = 0; i < jsonArray1.length(); i++) {
           JSONObject object1 = jsonArray1.getJSONObject(i);
           String devinfo = object1.getString("Device Info");
           dev[i] = object1.getString("Device Info");
           String value = object1.getString("Value");

           // chart AnyChart
           Cartesian cartesian = AnyChart.line();
           cartesian.animation(false);
           cartesian.padding(10d, 20d, 5d, 20d);
           cartesian.crosshair().enabled(true);
           cartesian.crosshair()
                    .yLabel(true)
                  // TODO ystroke
                    .yStroke((Stroke) null, null, null, (String) null, (String) null);
           cartesian.tooltip().positionMode(TooltipPositionMode.POINT);
//         cartesian.title("Trend of Sales of the Most Popular Products of ACME Corp.");
//         cartesian.yAxis(0).title("Number of Bottles Sold (thousands)");
           cartesian.xAxis(0).labels().padding(1d, 1d, 1d, 1d);
           List<DataEntry> seriesData = new ArrayList<>();
           seriesData.add(new CustomDataEntry(dev[i], Integer.parseInt(value)));

           Set set = Set.instantiate();
           set.data(seriesData);
           Mapping series1Mapping = set.mapAs("{ x: 'x', value: 'value' }");
//         Mapping series2Mapping = set.mapAs("{ x: 'x', value: 'value2' }");
//         Mapping series3Mapping = set.mapAs("{ x: 'x', value: 'value3' }");

           Line series1 = cartesian.line(series1Mapping);
           series1.name("Brand");
           series1.hovered().markers().enabled(true);
           series1.hovered().markers()
                            .type(MarkerType.SQUARE)
                            .size(4d);
           series1.tooltip().position("right")
                            .anchor(Anchor.RIGHT_CENTER)
                            .offsetX(5d)
                            .offsetY(5d);

           cartesian.legend().enabled(true);
           cartesian.legend().fontSize(13d);
           cartesian.legend().padding(0d, 0d, 10d, 0d);
           anyChartView.setChart(cartesian);

          }
        }

     } catch (JSONException e) {
        e.printStackTrace();
       }

Hi, welcome to StackOverflow. Please, show us some code you've tried so the community can help you. — nanquim, Mar 02 '20 at 05:14

score 1 · Accepted Answer · answered Mar 03 '20 at 03:08

In your code, you recreate the chart, series, List of DataEntries and config the chart for every point. To create the chart correctly and apply the data from DB you should execute the following steps in order:

Create the list of DataEntries only once
Parse the JSON to the DataEntry in a loop (just like you did, but the List should be created before the loop only once)
Create Set as you did, apply the list of DataEntries to the Set
Create the chart, series, configure it (only once)

score 0 · Answer 2 · answered Oct 25 '21 at 05:10

For anyone whose looking for implementation of code.

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

Scatter bubble = AnyChart.bubble();
bubble.animation(true);
bubble.title().enabled(false);
bubble.title().useHtml(true);
bubble.padding(20d, 20d, 10d, 20d);
bubble.yGrid(true)
                .xGrid(false)
                .xMinorGrid(false)
                .yMinorGrid(false);
bubble.minBubbleSize(5d)
                .maxBubbleSize(40d);
bubble.xAxis(0)
              .title("Variable Cost (₹/MWh)")
              .minorTicks(true);
bubble.yAxis(0)
              .title("Increment/Decrement (MWh)")
              .minorTicks(true);
bubble.legend().enabled(true);
bubble.labels().padding(0d, 0d, 10d, 0d);

anyChartView.setChart(bubble);

StringRequest stringRequest = new StringRequest(Request.Method.POST, URL_SCED,
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {

                        try {
                            JSONObject jsonObject = new JSONObject(response);
                            String success = jsonObject.getString("status");
                            JSONArray jsonArray = jsonObject.getJSONArray("data");

                            if (success.equals("true")) {
                                loadingbuble.setVisibility(View.GONE);

                                List<DataEntry> data1 = new ArrayList<>();
                                List<DataEntry> data2 = new ArrayList<>();
                                for (int i = 0; i < jsonArray.length(); i++) {
                                    JSONObject object = jsonArray.getJSONObject(i);

                                    String SCED_Generator = object.getString("SCED_Generator");
                                    String VC = object.getString("VC");
                                    String Decrement_due_to_SCED = object.getString("Decrement_due_to_SCED");
                                    String Increment_due_to_SCED = object.getString("Increment_due_to_SCED");

                                    data1.add(new CustomBubbleDataEntry(SCED_Generator, Integer.valueOf(VC), Integer.valueOf(Increment_due_to_SCED), Integer.valueOf(Increment_due_to_SCED) / 100));
                                    data2.add(new CustomBubbleDataEntry(SCED_Generator, Integer.valueOf(VC), Integer.valueOf(Decrement_due_to_SCED), Math.abs(Integer.valueOf(Decrement_due_to_SCED)) / 100));
                                }

                                bubble.tooltip()
                                        .useHtml(true)
                                        .fontColor("#fff")
                                        .format("function() {\n" +
                                                "        return this.getData('plant') + '<br/>' +\n" +
                                                "          'Plant Name: <span style=\"color: #ffffff; font-size: 12px\">' +\n" +
                                                "          this.getData('plant') + '</span></strong><br/>' +\n" +
                                                "          'Increment/Decrement: <span style=\"color: #ffffff; font-size: 12px\">' +\n" +
                                                "          this.getData('value') + ' MWh</span></strong><br/>' +\n" +
                                                "          'Variable Cost: <span style=\"color: #ffffff; font-size: 12px\">' +\n" +
                                                "          this.getData('x') + ' ₹/MWh.</span></strong>';\n" +
                                                "      }");

                                bubble.bubble(data1).name("Increment due to SCED").color("#ba68c8");
                                bubble.bubble(data2).name("Decrement due to SCED");

                            }

                        } catch (Exception e) {
                            e.printStackTrace();
                        }

How to populate AnyChart from database values dynamically in android?

2 Answers2