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.

Sign up for GitHub

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

Jump to bottom

E/TEST: Uncaught ReferenceError: pareto32 is not defined #36

Closed
RajaParikshit opened this issue Sep 14, 2018 · 3 comments
Closed

E/TEST: Uncaught ReferenceError: pareto32 is not defined #36

RajaParikshit opened this issue Sep 14, 2018 · 3 comments
Assignees
@ArsenyMalkov @Shestac92

Comments

@RajaParikshit
Copy link

I am trying to display 3 charts on single fragment like below code. But only one chart (3rd) is getting displayed and for first two charts it giving me error

E/TEST: Uncaught ReferenceError: circularGauge1 is not defined E/TEST: Uncaught ReferenceError: pareto32 is not defined

My fragment ->

     @Override
public void onViewCreated(final View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    setTypeWiseOrderChart();
    setCustomerWiseOrderChart();
    setStatusWiseOrderChart();


}                                                                                                                                                         
     private void setTypeWiseOrderChart(){

    AnyChartView typeWiseOrderChartView = (AnyChartView) getView().findViewById(R.id.type_wise_order_chart_view);

    CircularGauge circularGauge = AnyChart.circular();
    circularGauge.data(new SingleValueDataSet(new String[] { "23", "34", "67", "93", "56", "100"}));
    circularGauge.fill("#fff")
            .stroke(null)
            .padding(0d, 0d, 0d, 0d)
            .margin(100d, 100d, 100d, 100d);
    circularGauge.startAngle(0d);
    circularGauge.sweepAngle(270d);

    Circular xAxis = circularGauge.axis(0)
            .radius(100d)
            .width(1d)
            .fill((Fill) null);
    xAxis.scale()
            .minimum(0d)
            .maximum(100d);
    xAxis.ticks("{ interval: 1 }")
            .minorTicks("{ interval: 1 }");
    xAxis.labels().enabled(false);
    xAxis.ticks().enabled(false);
    xAxis.minorTicks().enabled(false);

    circularGauge.label(0d)
            .text("Temazepam, <span style=\"\">32%</span>")
            .useHtml(true)
            .hAlign(HAlign.CENTER)
            .vAlign(VAlign.MIDDLE);
    circularGauge.label(0d)
            .anchor(Anchor.RIGHT_CENTER)
            .padding(0d, 10d, 0d, 0d)
            .height(17d / 2d + "%")
            .offsetY(100d + "%")
            .offsetX(0d);
    Bar bar0 = circularGauge.bar(0d);
    bar0.dataIndex(0d);
    bar0.radius(100d);
    bar0.width(17d);
    bar0.fill(new SolidFill("#64b5f6", 1d));
    bar0.stroke(null);
    bar0.zIndex(5d);
    Bar bar100 = circularGauge.bar(100d);
    bar100.dataIndex(5d);
    bar100.radius(100d);
    bar100.width(17d);
    bar100.fill(new SolidFill("#F5F4F4", 1d));
    bar100.stroke("1 #e5e4e4");
    bar100.zIndex(4d);

    circularGauge.label(1d)
            .text("Guaifenesin, <span style=\"\">34%</span>")
            .useHtml(true)
            .hAlign(HAlign.CENTER)
            .vAlign(VAlign.MIDDLE);
    circularGauge.label(1d)
            .anchor(Anchor.RIGHT_CENTER)
            .padding(0d, 10d, 0d, 0d)
            .height(17d / 2d + "%")
            .offsetY(80d + "%")
            .offsetX(0d);
    Bar bar1 = circularGauge.bar(1d);
    bar1.dataIndex(1d);
    bar1.radius(80d);
    bar1.width(17d);
    bar1.fill(new SolidFill("#1976d2", 1d));
    bar1.stroke(null);
    bar1.zIndex(5d);
    Bar bar101 = circularGauge.bar(101d);
    bar101.dataIndex(5d);
    bar101.radius(80d);
    bar101.width(17d);
    bar101.fill(new SolidFill("#F5F4F4", 1d));
    bar101.stroke("1 #e5e4e4");
    bar101.zIndex(4d);

    circularGauge.label(2d)
            .text("Salicylic Acid, <span style=\"\">67%</span>")
            .useHtml(true)
            .hAlign(HAlign.CENTER)
            .vAlign(VAlign.MIDDLE);
    circularGauge.label(2d)
            .anchor(Anchor.RIGHT_CENTER)
            .padding(0d, 10d, 0d, 0d)
            .height(17d / 2d + "%")
            .offsetY(60d + "%")
            .offsetX(0d);
    Bar bar2 = circularGauge.bar(2d);
    bar2.dataIndex(2d);
    bar2.radius(60d);
    bar2.width(17d);
    bar2.fill(new SolidFill("#ef6c00", 1d));
    bar2.stroke(null);
    bar2.zIndex(5d);
    Bar bar102 = circularGauge.bar(102d);
    bar102.dataIndex(5d);
    bar102.radius(60d);
    bar102.width(17d);
    bar102.fill(new SolidFill("#F5F4F4", 1d));
    bar102.stroke("1 #e5e4e4");
    bar102.zIndex(4d);

    circularGauge.label(3d)
            .text("Fluoride, <span style=\"\">93%</span>")
            .useHtml(true)
            .hAlign(HAlign.CENTER)
            .vAlign(VAlign.MIDDLE);
    circularGauge.label(3d)
            .anchor(Anchor.RIGHT_CENTER)
            .padding(0d, 10d, 0d, 0d)
            .height(17d / 2d + "%")
            .offsetY(40d + "%")
            .offsetX(0d);
    Bar bar3 = circularGauge.bar(3d);
    bar3.dataIndex(3d);
    bar3.radius(40d);
    bar3.width(17d);
    bar3.fill(new SolidFill("#ffd54f", 1d));
    bar3.stroke(null);
    bar3.zIndex(5d);
    Bar bar103 = circularGauge.bar(103d);
    bar103.dataIndex(5d);
    bar103.radius(40d);
    bar103.width(17d);
    bar103.fill(new SolidFill("#F5F4F4", 1d));
    bar103.stroke("1 #e5e4e4");
    bar103.zIndex(4d);

    circularGauge.label(4d)
            .text("Zinc Oxide, <span style=\"\">56%</span>")
            .useHtml(true)
            .hAlign(HAlign.CENTER)
            .vAlign(VAlign.MIDDLE);
    circularGauge.label(4d)
            .anchor(Anchor.RIGHT_CENTER)
            .padding(0d, 10d, 0d, 0d)
            .height(17d / 2d + "%")
            .offsetY(20d + "%")
            .offsetX(0d);
    Bar bar4 = circularGauge.bar(4d);
    bar4.dataIndex(4d);
    bar4.radius(20d);
    bar4.width(17d);
    bar4.fill(new SolidFill("#455a64", 1d));
    bar4.stroke(null);
    bar4.zIndex(5d);
    Bar bar104 = circularGauge.bar(104d);
    bar104.dataIndex(5d);
    bar104.radius(20d);
    bar104.width(17d);
    bar104.fill(new SolidFill("#F5F4F4", 1d));
    bar104.stroke("1 #e5e4e4");
    bar104.zIndex(4d);

    circularGauge.margin(50d, 50d, 50d, 50d);
    circularGauge.title()
            .text("Medicine manufacturing progress' +\n" +
                    "    '<br/><span style=\"color:#929292; font-size: 12px;\">(ACME CORPORATION)</span>")
            .useHtml(true);
    circularGauge.title().enabled(true);
    circularGauge.title().hAlign(HAlign.CENTER);
    circularGauge.title()
            .padding(0d, 0d, 0d, 0d)
            .margin(0d, 0d, 20d, 0d);

    typeWiseOrderChartView.setChart(circularGauge);
}

private void setCustomerWiseOrderChart(){

    AnyChartView customerWiseOrderChartView = (AnyChartView) getView().findViewById(R.id.customer_wise_order_chart_view);

    Pareto pareto = AnyChart.pareto();

    List<DataEntry> data = new ArrayList<>();

    data.add(new ValueDataEntry("Food is tasteless", 65));
    data.add(new ValueDataEntry("Wait time", 109));
    data.add(new ValueDataEntry("Unfriendly staff", 12.5));
    data.add(new ValueDataEntry("Not clean", 45));
    data.add(new ValueDataEntry("Overpriced", 250));
    data.add(new ValueDataEntry("To noisy", 27));
    data.add(new ValueDataEntry("Food not fresh", 35));
    data.add(new ValueDataEntry("Small portions", 170));
    data.add(new ValueDataEntry("Not atmosphere", 35));
    data.add(new ValueDataEntry("Food is to salty", 35));

    pareto.data(data);

    pareto.title("Pareto Chart of Restaurant Complaints");

    pareto.yAxis(0d).title("Defect frequency");

    pareto.yAxis(1d).title("Cumulative Percentage");

    pareto.animation(true);

    pareto.lineMarker(0)
            .value(80d)
            .axis(pareto.yAxis(1d))
            .stroke("#A5B3B3", 1d, "5 2", StrokeLineJoin.ROUND, StrokeLineCap.ROUND);

    pareto.getSeries(0d).tooltip().format("Value: {%Value}");

    Base line = pareto.getSeries(1d);
    line.seriesType("spline")
            .markers(true);
    line.labels().enabled(true);
    line.labels()
            .anchor(Anchor.RIGHT_BOTTOM)
            .format("{%CF}%");
    line.tooltip().format("Cumulative Frequency: {%CF}% \\n Relative Frequency: {%RF}%");

    pareto.crosshair().enabled(true);
    pareto.crosshair().xLabel(true);

    customerWiseOrderChartView.setChart(pareto);
}

private void setStatusWiseOrderChart(){
    AnyChartView statusWiseOrderChartView = (AnyChartView) getView().findViewById(R.id.status_wise_order_chart_view);

    Pie pie = AnyChart.pie();

    pie.setOnClickListener(new ListenersInterface.OnClickListener(new String[]{"x", "value"}) {
        @Override
        public void onClick(Event event) {
            Toast.makeText(getActivity(), event.getData().get("x") + ":" + event.getData().get("value"), Toast.LENGTH_SHORT).show();
        }
    });

    List<DataEntry> data = new ArrayList<>();
    data.add(new ValueDataEntry("Apples", 6371664));
    data.add(new ValueDataEntry("Pears", 789622));
    data.add(new ValueDataEntry("Bananas", 7216301));
    data.add(new ValueDataEntry("Grapes", 1486621));
    data.add(new ValueDataEntry("Oranges", 1200000));

    pie.data(data);

    pie.title("Fruits imported in 2015 (in kg)");

    pie.labels().position("outside");

    pie.legend().title().enabled(true);
    pie.legend().title()
            .text("Retail channels")
            .padding(0d, 0d, 10d, 0d);

    pie.legend()
            .position("center-bottom")
            .itemsLayout(LegendLayout.HORIZONTAL)
            .align(Align.CENTER);

    statusWiseOrderChartView.setChart(pie);
}`

My fragment view ->

`<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".views.OrdersPlacedFragment"
android:background="@color/colorWhite">

    <com.anychart.AnyChartView
        android:id="@+id/type_wise_order_chart_view"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        />

    <com.anychart.AnyChartView
        android:id="@+id/customer_wise_order_chart_view"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        />

    <com.anychart.AnyChartView
        android:id="@+id/status_wise_order_chart_view"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        />

</LinearLayout></androidx.core.widget.NestedScrollView>`
@Shestac92 Shestac92 self-assigned this Sep 17, 2018
@ArsenyMalkov ArsenyMalkov self-assigned this Sep 17, 2018
@Shestac92
Copy link

Shestac92 commented Sep 17, 2018 •
edited by ArsenyMalkov

@RajaParikshit
Every time after the following code:

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

You should add the following line:

APIlib.getInstance().setActiveAnyChartView(anyChartView);

Just like it was described in this issue.
This should help you!

@lalitsharma1607
Copy link

I am having the same issue. I have 4 charts to draw. The all of 4 works fine first time by using APIlib.getInstance().setActiveAnyChartView(anyChartView); but when I get the data again and draw the graph it draws only one at a time.

@Shestac92
Copy link

@lalitsharma1607
We can solve it, but can you share with us the code of your chart config to check the way how you update charts? The proper solution depends on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ArsenyMalkov ArsenyMalkov

@Shestac92 Shestac92

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@lalitsharma1607 @ArsenyMalkov @Shestac92 @RajaParikshit