datetime picker to dispaly a chart containing values from oracle database

[munmun]

how to fetch data from oracle database in canvasjs and present in a multiseries line chart. database is oracle and server side lang is java client side is javascript.
also i have a datetime picker so on refreshing the datetime picker accordingly the chart should get populated.
kindly verify.

[Indranil]

@munmun,

how to fetch data from oracle database in canvasjs and present in a multiseries line chart. database is oracle and server side lang is java client side is javascript.

CanvasJS just renders the chart with the set of data being passed to it and doesn’t fetch data. Please refer this tutorial for more information on Querying Oracle Database and fetching data. Please take a look at this Sample Project. The sample shows the integration of CanvasJS charts in Java Server Pages with dataPoints to the chart being read from oracle database.

also i have a datetime picker so on refreshing the datetime picker accordingly the chart should get populated.

Updating dataPoints and re-rendering the chart on updating datetime picker should work fine in this case.

__________
Indranil Deo
Team CanvasJS

[munmun]

dear indranil

Do you have a sample project with datetime picker attached to it. I have checked this sample but the issue is that it fetches data only for double values. if my x axis has string values or datetime values it does not produce the required output but gives a blank screen.

[munmun]

In this “Please take a look at this Sample Project.” as mentioned by you earlier , if I provide a string/date value in the code : a blank screen with no data comes . Data only in double format is picking up to render the chart which is not proper.
String sql = ” SELECT * from Fan2TempMotorBearing where rownum < 50 order by datetime”;
Statement stmt = conn.createStatement();
ResultSet rset = stmt.executeQuery(sql);

while (rset.next()) {
Date xVal =rset.getDate(“datetime”);// Date values
double y1Val = (double)rset.getDouble(“y_actual”), y2Val = (double)rset.getDouble(“y_predicted”);

map = new HashMap<Object,Object>(); map.put(“x”, xVal); map.put(“y”, y1Val); list1.add(map);
dataPoints1 = gsonObj.toJson(list1);

map = new HashMap<Object,Object>(); map.put(“x”, xVal); map.put(“y”, y2Val); list2.add(map);
dataPoints2 = gsonObj.toJson(list2);
}
}

Query:
create table Fan2TempMotorBearing (datetime date , y_actual float(50), y_predicted float(50))
insert into Fan2TempMotorBearing values (TO_DATE(‘2018-07-01 00-00-00′,’yyyy-mm-dd hh24-mi-ss’),’50.183′,’53.0519169458035′)
insert into Fan2TempMotorBearing values (TO_DATE(‘2018-07-01 00-05-00′,’yyyy-mm-dd hh24-mi-ss’),’50.183′,’53.0261445540871′)

kindly check for this if possible why only double parameters can plot the graph from database and not string / date type data.

[Indranil]

@munmun,

Do you have a sample project with datetime picker attached to it

Please take a look at this JSFiddle.

kindly check for this if possible why only double parameters can plot the graph from database and not string / date type data.

CanvasJS supports numeric and date-time as x-values and when it comes to date-time, it should be JavaScript date object or timestamp. If you like to use string, you can use labels. To pass Java date to JavaScript, you would need to convert Java date to timestamp in milliseconds and pass it to JavaScript. Please refer this stackoverflow thread for more information.

__________
Indranil Deo
Team CanvasJS