Question

I have to plot a graph of time and value coming from an ajax request, i need to know how to show the data to the highcharts, please find the below code:

JSP FOR GETTING DATA:

<%@ page import = "com.qdx.eqc.vo.*, com.qdx.eqc.proxy.EQCProxyClient, java.util.*" %>
<%

    System.out.println("Inside landingAjax.jsp");
    String productionID = request.getParameter("productionID");
    System.out.println("productionID = "+productionID);
    String instrumentID = request.getParameter("instrumentID");
    System.out.println("instrumentID = "+instrumentID);
    String testId = request.getParameter("testId");
    System.out.println("testId = "+testId);
    String instrType = request.getParameter("instrType");
    System.out.println("instrType = "+instrType);
    String testInstrTypeId = request.getParameter("testInstrTypeId");
    System.out.println("testInstrTypeId = "+testInstrTypeId);
    String departmentId = request.getParameter("departmentId");
    System.out.println("departmentId = "+departmentId);

    EQCProxyClient client = new EQCProxyClient();
    ResponseVO responseVO = null;

    //Graph data for patinetbias START
    responseVO = client.getPatientBiasData(productionID,instrumentID,testId,instrType,testInstrTypeId,"7.0",departmentId);
    ArrayList xAxis = new ArrayList();
    ArrayList lines = new ArrayList();
    ArrayList dateTime = new ArrayList();
    ArrayList doubleValue = new ArrayList();
    Date duration = new Date();
    Iterator itt=responseVO.getResponse().iterator();
    while(itt.hasNext()){
        PatientBiasDataVO po = (PatientBiasDataVO)itt.next();
        xAxis = po.getPatientBiasData();
        Iterator biasItr = xAxis.iterator();                                                    
                while(biasItr.hasNext())
                {
                    BiasDataVO biasData = (BiasDataVO)biasItr.next();
                    if(biasData.getStrDateTime()!=null)
                    {
                    dateTime.add(biasData.getStrDateTime());

                    }
                    doubleValue.add(biasData.getValue());

                }
        lines = po.getVerticalLines();
        duration = po.getDateTime();
        System.out.println(" xAxis "+ xAxis + " lines " + lines + "duration" + duration );
    }
    out.print(doubleValue.toString()+','+dateTime.toString()); /// THESE IS THE GRAPH DATA as VALUE AND TIME

%>

JAVASCRIPT FOR AJAX & HIGHCHARTS:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function(){alert('came in');
           var options = {
                    chart: {
                        renderTo: 'right1',
                        type: 'spline',
                        marginRight: 10,
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: 'Patient Bias Display'

                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: 'Bias'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                                Highcharts.numberFormat(this.y, 2);
                        }

                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    plotOptions: {
                        color: '#F3F70E'
                    },
                    series: []

            };

           var productionID = document.getElementById('productionID').value;
           var instrumentID = document.getElementById('instrumentID').value;
           var testId = document.getElementById('testId').value
           var instrType = document.getElementById('instrType').value;
           var testInstrTypeId = document.getElementById('testInstrTypeId').value;
           var departmentId = document.getElementById('departmentId').value;

            var url = "landingAjax.jsp";
            url = url+"?productionID="+productionID+"&instrumentID="+instrumentID+"&testId="+testId+"&instrType="+instrType+"&testInstrTypeId="+testInstrTypeId+"&departmentId="+departmentId;
            alert(url);
            $('#highCharts').click(function() {alert('clicked'); // CLICKED is alerted
                $.getJSON(url, function(data) {alert(url);    //THis alert doesnt work

How to fill data in X-Axis and Y- Axis??
var series = { data: []};

                        options.series.push(series);

                    var chart = new Highcharts.Chart(options);
                });
            });
    });
    </script>

I need to know how to accumulate data in x and y axis to plot the graph, please refer to my comments above.

Help me out guys.. if anything not understood; please have in comments… Thanks!!!

Answer 1

here is how i do it my way … you may find a better way of doing it

• i do a javascript ajax call to the server
• put your chart in a function call it any thisng like drawchart()
• pass your callback to that function

notice

to fill the x axis you need to end up having an array looks like this

     xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

and for every element in this array you need to pass a value to your series data[1,2,3,....]

EXAMPLE

    $.ajax({
            type: "POST",
            url: "YOUR WEB SERVICE ",
            data: "",
            dataType: "json",
            contentType: "application/json; charset=utf-8",

            success: function (myvalue) { 
               drawchart(myvalue) ; 

              }});

you also need to read this