Unable to populate Highchart at runtime using json data
<p>I am trying to populate highchart by sending data through servlet . My servlet is like:</p>

<pre><code>package com.sandeep.visual.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.sandeep.visual.data.Student;

@WebServlet("/StudentJsonDataServlet")
public class StudentJsonDataServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public StudentJsonDataServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

        List&lt;Student&gt; listOfStudent = getStudentData();

        Gson gson = new Gson();

        String jsonString = gson.toJson(listOfStudent);

        response.setContentType("application/json");

        response.getWriter().write(jsonString);

    }

    private List&lt;Student&gt; getStudentData() {

        List&lt;Student&gt; listOfStudent = new ArrayList&lt;Student&gt;();
        Student s1 = new Student();
        s1.setName("Sandeep");
        s1.setComputerMark(75);
        s1.setMathematicsMark(26);
        listOfStudent.add(s1);

        Student s2 = new Student();
        s2.setName("Bapi");
        s2.setComputerMark(60);
        s2.setMathematicsMark(63);
        listOfStudent.add(s2);

        Student s3 = new Student();
        s3.setName("Raja");
        s3.setComputerMark(40);
        s3.setMathematicsMark(45);
        listOfStudent.add(s3);

        Student s4 = new Student();
        s4.setName("Sonu");
        s4.setMathematicsMark(29);
        s4.setComputerMark(78);
        listOfStudent.add(s4);

        return listOfStudent;
    }
}
</code></pre>

<p>And I am able to get the desired json in  my html page as:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="ISO-8859-1"&gt;
&lt;title&gt;Dynamic HighChart&lt;/title&gt;
&lt;script type="text/javascript" src="./js/jquery.min_1.8.2.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
&lt;div id="container" style="height: 400px"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: 'StudentJsonDataServlet',
        dataType: "json",
        contentType: "application/json",
        crossDomain: true,
        success: function (data) {
            console.log(data);
            // Populate series
            var nameArr = new Array();
            var processed_json = new Array();
            for (i = 0; i &lt; data.length; i++) {
                nameArr.push([data[i].name]);
                processed_json.push([parseInt(data[i].mathematicsMark),parseInt(data[i].computerMark)]);
            }
            console.log("name array : " + nameArr);
            console.log("FinalArray : " + processed_json);
            // draw chart
            $('#container').highcharts({
                chart: {
                    type: "line"
                },
                title: {
                    text: "Marks obtained"
                },
                xAxis: {
                    categories: [nameArr]
                },
                yAxis: {
                    title: {
                        text: "Marks obtained"
                    }
                },
                series: [{
                    name: nameArr,
                    data: processed_json
                }]
            });
        }
    });
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Now the best thing is that I am able to populate the HighChart but it doesn't appear as I want it to.
I have tried the same above example using google chart and I am getting something like this:
<a href="https://i.stack.imgur.com/LIBoc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LIBoc.png" alt="enter image description here"></a></p>

<p>Which is my intended result what I want to get. </p>

<p>But with highchart I am getting something like this:
<a href="https://i.stack.imgur.com/QC5wt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QC5wt.png" alt="enter image description here"></a></p>

<p>How can I achieve the same result shown in picture 1 through highChart.
Looking forward to your solutions. Thanks in advance.</p>