'populate convas.js multi series spline chart with data from database?

I have a dataset, for which I have to build a multi series spline chart. Here I have used canvas.js. But I cannot populate this graph with data from database. I have added the JSP code below:

<%@page import="beans.*"%>
<%@page import="java.util.*" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Try</title>
<script>
List<hv_qc> vhvfqamp3=(List<hv_qc>)request.getAttribute("vhvfqamp3");

var chart = new CanvasJS.Chart("chartContainer", {
    theme:"light2",
    animationEnabled: true,
    title:{
        text: "Viscosity Graph"
    },
    axisY :{
        title: "Time",
        suffix: "min"
    },
    toolTip: {
        shared: "true"
    },
    legend:{
        cursor:"pointer",
        itemclick : toggleDataSeries
    },
    data: [{
        type: "spline",
        visible: false,
        showInLegend: true,
        yValueFormatString: "##.00min",
        name: "Vis @ 15min",
        dataPoints: [
        if(vhvfqamp3!=null && vhvfqamp3.size()>0){
            for(hv_qc h0:vhvfqamp3){
             label: "<%=h0.getFmno()%>", y: "<%=h0.getVis15%>" 
             }
            }
        ]
    },
    {
        type: "spline",
        visible: false,
        showInLegend: true,
        yValueFormatString: "##.00min",
        name: "Vis @ 30min",
        dataPoints: [
        if(vhvfqamp3!=null && vhvfqamp3.size()>0){
            for(hv_qc h0:vhvfqamp3){
             label: "<%=h0.getFmno()%>", y: "<%=h0.getVis30%>" 
             }
            }
        ]
    },
    {
        type: "spline",
        visible: false,
        showInLegend: true,
        yValueFormatString: "##.00min",
        name: "Vis @ 60min",
        dataPoints: [
        if(vhvfqamp3!=null && vhvfqamp3.size()>0){
            for(hv_qc h0:vhvfqamp3){
             label: "<%=h0.getFmno()%>", y: "<%=h0.getVis60%>" 
             }
            }
        ]
    }]
});
chart.render();

function toggleDataSeries(e) {
    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible ){
        e.dataSeries.visible = false;
    } else {
        e.dataSeries.visible = true;
    }
    chart.render();
}

}
</script>
</head>
<body style="zoom:90%">
<div>
<%
List<hv_qc> vhvfqamp3=(List<hv_qc>)request.getAttribute("vhvfqamp3");       
%>

<font face="Verdana" size=4 color=#CA023B>
<fieldset>
<hr>
<font face="Verdana" size=3 color="white">
<table border="1" align="center">
<tr bgcolor=#0D9381>
<th><center>Sample Details</center></th>
<th><center>Viscosity</center></th>
<th><center>Observed<br>Value</center></th>
<th><center>Unit</center></th>
</tr>
<%
if(vhvfqamp3!=null && vhvfqamp3.size()>0){
    for(hv_qc h0:vhvfqamp3){
%>
<tr bgcolor=#02321D>
<td rowspan=7><center>Formulation Mix No.-<%=h0.getFmno() %></center></td>
<td><center>Vis. @ 15min</center></td>
<td><center><%=h0.getVis15() %></center></td>
<td><center><%=h0.getVis15unit() %></center></td>
</tr>
<tr bgcolor=#02321D>
<td><center>Vis. @ 30min</center></td>
<td><center><%=h0.getVis30() %></center></td>
<td><center><%=h0.getVis30unit() %></center></td>
</tr>
<tr bgcolor=#02321D>
<td><center>Vis. @ 60min</center></td>
<td><center><%=h0.getVis60() %></center></td>
<td><center><%=h0.getVis60unit() %></center></td>
</tr>
<%
    }
}
%>
</table>
</font>
</fieldset>
</font>
</div>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<center>
<button type="submit" class="donebtn" onclick="window.close()">Close</button>
</center>
</body>
</html>

From the body section of this jsp page you will get to know about the actual table.

I want the 'Fmno' at x axis and time at y axis.

Please help me, I have no clue how to do this.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'populate convas.js multi series spline chart with data from database?

Sources

Related Questions