Integrate a Candlestick Graph With Market Pairs Data

Posted By : Keshav Gupta | 21-Oct-2018

Introduction:

A candlestick is a kind of value diagram that shows the high, low, open and shutting costs of security for a particular period. It began from Japanese rice shippers and merchants to track advertising costs and day by day force many years previously getting to be promoted in the United States. The wide piece of the candle is known as the "genuine body" and tells financial specialists whether the end cost was higher or lower than the opening value (dark/red if the stock shut lower, white/green if the stock shut higher).

Requirements:

Android Studio,Java 7 minimum,Android SDK

Step by step integration in Android :

Step1: Install sdk for graph in application by defining this dependency in app/build.gradle.

dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v2.2.2'
}

Step2: Now we will be creating a layout file for the graph. Basically, layout file is assigned as a view to the activity class which will further interact with the layout component.So we will be creating an XML file named as "activity_layout_trade_graph_view" under res/layout/ directory.In this file, we will be declaring a candlestick chart view component which is a customized view group designed by chart view library developer.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     >
    <com.github.mikephil.charting.charts.CandleStickChart
        android:id="@+id/chart1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

Step3: In Step6 code window there is a method updateChartData(),which is used to configure Y-vals of candle based upon server data of orders.Candle Entry is marked as per order object and Candle graph y-vals are plotted.

 private void updateChartData(List<Datum> candleDataList) {
        ArrayList<CandleEntry> yVals1 = new ArrayList<CandleEntry>();
        dates = getDateArraylist(candleDataList);
        for (int i = 0; i < candleDataList.size(); i++) {
            Datum datum = candleDataList.get(i);
            yVals1.add(new CandleEntry(i, Float.valueOf(datum.getHighPrice()),
                    Float.valueOf(datum.getLowPrice()),
                    Float.valueOf(datum.getOpenPrice()),
                    Float.valueOf(datum.getClosePrice())));
        }

        CandleDataSet set1 = new CandleDataSet(yVals1, "Data Set");
        set1.setAxisDependency(YAxis.AxisDependency.LEFT);
        set1.setShadowColor(Color.DKGRAY);
        set1.setShadowWidth(0.7f);
        set1.setDecreasingColor(Color.RED);
        set1.setDecreasingPaintStyle(Paint.Style.FILL);
        set1.setIncreasingColor(Color.GREEN);
        set1.setIncreasingPaintStyle(Paint.Style.FILL);
        CandleData data = new CandleData(dates, set1);
        mChart.setData(data);
        mChart.invalidate();
    }

Step4: We will be setting view of activity class by XML layout file using abstract method setContentView(). Then we are assigning initial configurations for the chart like bg colour, max visible count for columns,pinch-zoom functionality and grid background along with laying down X-axis to bottom and various animation settings. We will also update Yvals of the chart after getting data from the server and making suitable candle entry. We will set increasing and decreasing colour for each candle.

public class TradeGraphViewActivity1 extends AppCompatActivity{

    @BindView(R.id.chart1)
    CandleStickChart mChart;
    private String instrumentPair = "";
    private String selectedTab = "1h";
    private List dates;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layout_trade_graph_view);
        ButterKnife.bind(this);
        initChartConfigs();
    }

    private void initChartConfigs() {
        mChart.setBackgroundColor(Color.WHITE);
        mChart.setMaxVisibleValueCount(60);
        mChart.setPinchZoom(false);
        mChart.setDrawGridBackground(false);

        XAxis xAxis = mChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setDrawGridLines(false);

        YAxis leftAxis = mChart.getAxisLeft();
        leftAxis.setLabelCount(7, false);
        leftAxis.setDrawGridLines(false);
        leftAxis.setDrawAxisLine(false);

        YAxis rightAxis = mChart.getAxisRight();
        rightAxis.setEnabled(false);


        mChart.getLegend().setEnabled(false);
        mChart.animateXY(3000, 3000);
        List<Datum> candleDataList=getDataFromServer();
        updateChartData(candleDataList);
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
    }

    private void updateChartData(List<Datum> candleDataList) {
        ArrayList<CandleEntry> yVals1 = new ArrayList<CandleEntry>();
        dates = getDateArraylist(candleDataList);
        for (int i = 0; i < candleDataList.size(); i++) {
            Datum datum = candleDataList.get(i);
            yVals1.add(new CandleEntry(i, Float.valueOf(datum.getHighPrice()),
                    Float.valueOf(datum.getLowPrice()),
                    Float.valueOf(datum.getOpenPrice()),
                    Float.valueOf(datum.getClosePrice())));
        }

        CandleDataSet set1 = new CandleDataSet(yVals1, "Data Set");
        set1.setAxisDependency(YAxis.AxisDependency.LEFT);
        set1.setShadowColor(Color.DKGRAY);
        set1.setShadowWidth(0.7f);
        set1.setDecreasingColor(Color.RED);
        set1.setDecreasingPaintStyle(Paint.Style.FILL);
        set1.setIncreasingColor(Color.GREEN);
        set1.setIncreasingPaintStyle(Paint.Style.FILL);
        CandleData data = new CandleData(dates, set1);
        mChart.setData(data);
        mChart.invalidate();
    }

    private List getDateArraylist(List<Datum> candleDataList) {
        String format = "";
        switch (selectedTab) {
            case "1h":
                format = "h:mm a";
                break;
            case "1m":
                format = "mm:ss a";
                break;
            case "1d":
                format = "hh:mm:ss a";
                break;
        }
        List dateFornat = new ArrayList<>();
        for (int i = 0; i < candleDataList.size(); i++)
            dateFornat.add(UtilityMethod.getDateCurrentTimeZone(candleDataList.get(i).getEndtime(), format));
        return dateFornat;
    }
}

 

 

 

About Author

Author Image
Keshav Gupta

Keshav Gupta is Android Developer in Oodles, he always look forward for new tasks and new things to learn more.

Request for Proposal

Name is required

Comment is required

Sending message..