Creating LineChart using viz library and formatting the line chart .

To create Line chart follow the below mentioned steps :-

Step 1:- First we would have to create a dataset that we want to plot on graph.

For that we would use json model. The code for that is as shown below which has to be written in controller of the application.

Here we are trying to plot 5 students performance in year 2015 . So the json is made as shown above in controller .     

Step 2:- After creating json model we can create the chart in xml . I have here created a chart inside a panel .

So code for that would be as follows:-

After doing this run the code and output would be as shown below:-

Now seeing the output its difficult to tell that with precision how many percent each student has obtained .

For that we can display the dataLabels so that data at each point on line chart can be displayed .

Step 4:- To display the dataLabels we need to edit xml of our Application as shown in the pic below.

Now if we run our application then the output would be as shown below:-

Step 5:- Now in the dataLabel we have represented the data but we also need to add % sign in order to know that the data is represented in % .

For that just add the highlighted attributed in the pic below in the xml of our application.

And the the output would be as follows:-

Step 7 :- Now if we want to change the color of the axis and the line used to represent our data then we need to add css .

Add the following css in your stylesheet . Here I have not made extenal stylesheet so I am using internal stylesheet that is created

in index page of our application. The code would be as shown below :-

This is how finally our linchart would look like:-

So the above mentioned are the steps for creating the Line chart . I hope this document would help those who are new to viz charts of sapui5.