Use a GraphView in a Fragment

From what I've seen, most tutorials relative to GraphView use direct Actions. I wanted to use a Fragment instead. Here are the steps I did (using the Android Studio):

Create a Layout Fragment

First, create a fragment (create a new Layout Resource File), based on a LinearLayout. I ended up with a file named fragment_graph.xml with the following content:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/graph1"
        android:background="#102f65" />
    </LinearLayout>

The idea is pretty simple; the widget to be used by the Graph is graph1.

Create the Java Fragment

On the java side, I've added a new class GraphFragment which extends the Fragment class:

public class GraphFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_graph,
                container, false);

        populateGraphView(view);

        return view;
    }
}

This is a pretty standard fragment. The secret sauce is in the populateGraphView() method. Here, we perform three operations:

1. First, we create the data set:

   GraphViewSeries exampleSeries = new GraphViewSeries(new GraphViewData[] {
   new GraphViewData(1, 2.0d)
   , new GraphViewData(2, 1.5d)
   , new GraphViewData(3, 2.5d)
   , new GraphViewData(4, 1.0d)
   });
   

   We do the dataset initialisation here because it's an example. You may want to do it somewhere else if you collect it off a remote service for example.

2. Build the GraphView:

   LineGraphView graphView = new LineGraphView(
   getActivity() // context
   , "GraphViewDemo" // heading
   );
   

   and add the dataset:

   graphView.addSeries(exampleSeries); // data
   

The Activity required by the GraphView constructor (in this case LineGraphView) can be collected form the Fragment instance via getActivity().

• Get the widget reference in the fragment and add the GraphView to it:

try {
    LinearLayout layout = (LinearLayout) view.findViewById(R.id.graph1);
    layout.addView(graphView);
} catch (NullPointerException e) {
    // something to handle the NPE.
}

Incidentally, R.id.graph1 is our graph1 from the layout file.

The full code of the class is:

private void populateGraphView(View view) {
    // init example series data
    GraphViewSeries exampleSeries = new GraphViewSeries(new GraphViewData[] {
            new GraphViewData(1, 2.0d)
            , new GraphViewData(2, 1.5d)
            , new GraphViewData(3, 2.5d)
            , new GraphViewData(4, 1.0d)
    });

    LineGraphView graphView = new LineGraphView(
            getActivity() // context
            , "GraphViewDemo" // heading
    );
    graphView.addSeries(exampleSeries); // data

    try {
        LinearLayout layout = (LinearLayout) view.findViewById(R.id.graph1);
        layout.addView(graphView);
    } catch (NullPointerException e) {
        // something to handle the NPE.
    }
}

Add the Fragment to an Activity

Once the fragment is defined, all that's left to be done is to add it to an activity. If you have a sample activity-based project, you can end up with a layout file (activity_fragments.xml) similar to this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <fragment
        android:id="@+id/listFragment"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        class="com.laurivan.fragmentexercise.fragmentize.GraphFragment" />
</LinearLayout>

Simple, isn't it?

HTH,