Home forums Using CanvasJS create multiseries chart

This topic contains 9 replies, has 3 voices, and was last updated by  Vishwas R 3 months, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #25878

    i want to create a multiseries chart by fetching data from database kindly help.
    using javascript or jquery
    database oracle
    using arraylistb and hashmap.

    #25896

    @munmun,

    Can you please let us know the server side technology being used by you so that we can understand your scenario better and help you with an appropriate solution.

    —-
    Manoj Mohan
    Team CanvasJS

    #25902

    i want to create using java by using hashmap or arraylist a multiseries chart from data from database . oracle database.

    #25931

    @munmun,

    Please take a look at this Sample Project.


    Manoj Mohan
    Team CanvasJS

    #25940

    hi manoj

    #25943

    https://jsfiddle.net/munmunpanda/82Luwp9z/3/

    This is a jsfiddle link where in html i have placed my entire code and in javascript section i have placed the queries that i m running currently.

    As per your instructions i ran the sample project but got a blank screen . kindly reply soon.

    #25956

    @munmun,

    You can’t run JSP page in JSFiddle but in server like Apache Tomcat or Glassfish. Please refer this tutorial for step to step guidance on setting up environment for JSP. Also refer this article for an example on retrieving data from Oracle database in JSP.


    Manoj Mohan
    Team CanvasJS

    #26037

    I have mailed you already with my issue Manoj. Was not able to post the code here so pasted in jsfiddle.
    <%@ page import=”java.util.*” %>
    <%@ page import=”java.sql.*” %>
    <%@ page import=”java.math.*” %>
    <%@ page import=”com.google.gson.Gson”%>

    <%
    Gson gsonObj = new Gson();
    Map<Object,Object> map = null;
    List<Map<Object,Object>> list1 = new ArrayList<Map<Object,Object>>(), list2 = new ArrayList<Map<Object,Object>>();
    String dataPoints1 = null, dataPoints2 = null;

    /* https://www.tutorialspoint.com/jdbc/jdbc-db-connections */
    try {
    Class.forName(“oracle.jdbc.driver.OracleDriver”).newInstance();
    }
    catch(Exception ex) {
    System.out.println(“Error!”);
    System.exit(1);
    }

    String url = “jdbc:oracle:thin:@localhost:1521:xe”;
    String user = “SYS as SYSDBA”;
    String PASS = “SYS”;
    Connection conn = DriverManager.getConnection(url, user, PASS);

    PreparedStatement pstmt = null;
    try {
    String sql = “select * from shv order by datetime “;
    Statement stmt = conn.createStatement();
    ResultSet rset = stmt.executeQuery(sql);

    while (rset.next()) {
    String xVal = rset.getString(“datetime”);
    String y1Val = (String)rset.getString(“y_actual”);
    String y2Val = rset.getString(“y_predicted”);

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

    map = new HashMap<Object,Object>(); map.put(“x”, xVal); map.put(“y”, y2Val); list2.add(map);
    dataPoints2 = gsonObj.toJson(list2);
    }
    }
    catch (SQLException e) {
    System.out.println(e);
    }

    %>

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    <script type=”text/javascript”>
    window.onload = function(){
    var chart = new CanvasJS.Chart(“chartContainer”, {
    theme: “light2”,
    animationEnabled: true,
    title: {
    text: “Multiseries line Chart with Data from Oracle Database”
    },

    data: [{
    type: “line”, //change type to bar, line, area, pie, etc
    dataPoints: <%out.print(dataPoints1);%>
    },{
    type: “line”, //change type to bar, line, area, pie, etc
    dataPoints: <%out.print(dataPoints2);%>
    }]
    });
    chart.render();

    function toogleDataSeries(e){
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    } else{
    e.dataSeries.visible = true;
    }
    chart.render();
    }
    }
    </script>

    </head>
    <body>
    <div id=”chartContainer” style=”width: 100%; height: 400px”></div>
    </body>
    </html>

    #26038

    This is not giving the desired output.

    #26065

    @munmun,

    The sample shared by @manoj-mohan seems to be working fine. If you are still facing issue, kindly create sample project reproducing the issue and share it over Google Drive or Onedrive, along with sample database, so that we can run it locally at our end, understand the scenario better and help you out.


    Vishwas R
    Team CanvasJS

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.