Question

I am having problem with flot library to plot a graph using its line graph. What I want is to generate a java based sql query which would give me a values which I would put inside my json string variable and pass it to the data variable of javascript. I have attempted to do something, but its not updating it. Here’s my code:

     <script>
 $(function(){
     var options = {
                lines: { show: true },
                points: { show: true },
                xaxis: { show:false,tickDecimals: 0, tickSize: 20 }
            };

            var data = [];
            var placeholder = $("#myplace");

            $.plot(placeholder, data, options);

            function update() {
                // we get all the data in one go, if we only got partial
                // data, we could merge it with what we already got
            <%
    String jsonString = "{\"label\": \"Europe (EU28)\",\"data\": [[1, 20], [20, 10], [40, 3.9], [100, 40]]}";
    out.flush();
    %>    
                data = [<%=jsonString%>];

              // console.log(series[0][1]);
                $.plot($("#myplace"), data, options);
                setTimeout(update,1000);
            }

           update();

 });
 </script>

Can anyone guide me how should I proceed with this? thanks

Answer 1

Your Java code will produce a string that is not assigned to a JavaScript variable. I removed useless things like out.flush. This is how your update function should look:

function update() {
        // we get all the data in one go, if we only got partial
        // data, we could merge it with what we already got
        data = <% "{\"label\": \"Europe (EU28)\",\"data\": [[1, 20], [20, 10], [40, 3.9], [100, 40]]}";%>;   
        $.plot($("#myplace"), data, options);
}

I also removed the setTimeout since it will produce the same data every time. If you want your graphs to update repeatedly from the server, you should look into ajax requests (e.g. $.get in jQuery).