Home forums Using CanvasJS Creating a chart from data with SQL DB [PHP]

This topic contains 12 replies, has 2 voices, and was last updated by  Vishwas R 3 days, 11 hours ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #22120

    d3bsky
    Member

    Hello, I would like to create a graph on the HTML page to present weather data that is stored in the SQL database. Unfortunately, I have no experience with Canvas JS. Internet forums have not solved my problems. Does anyone have any simple working example? How to do it?

    Thank you in advance for your answer!

    #22123

    Vishwas R
    Keymaster

    @d3bsky,

    Please refer Chart Data from Database for an example on rendering chart with data from database. You can also download PHP samples from our Download Page and checkout the examples.


    Vishwas R
    Team CanvasJS

    #22142

    d3bsky
    Member

    OK thanks!
    I managed to create a graph so that everything started working, I had to connect the script: jquery.min.js
    However, when I try to connect license files locally, nothing is displayed. The browser detects errors:

    – Uncaught ReferenceError: jQuery is not defined at jquery.canvasjs.min.js: 920
    – Uncaught ReferenceError: $ is not defined at window.onload

    What is the cause of such errors?

    #22145

    Vishwas R
    Keymaster

    @d3bsky,

    $ / jQuery is not defined is caused when jQuery is not loaded in the web-page. Including jQuery should work fine in your case.

    If this doesn’t solve the issue you are facing, kindly create a static HTML file reproducing the issue you are facing and share it over Google-Drive or Onedrive so that we can look into your code and help you out.


    Vishwas R
    Team CanvasJS

    #22155

    d3bsky
    Member

    OK thanks!
    Problem solved. I need to have 2 files connected: jquery.canvasjs.min and jquery.min.

    I have one more question:
    My database stores the date in the format: 2018-08-04 13:28:2. I would like to extract only an hour and a minute and display them on the X axis.
    Unfortunately, the “valueFormatString property” does not work. How can I solve this problem?

    #22159

    Vishwas R
    Keymaster

    @d3bsky,

    Can you kindly share sample project along with sample database over Google-Drive or Onedrive so that we can look at your code, understand it better and help you out?


    Vishwas R
    Team CanvasJS

    #22166

    d3bsky
    Member

    Ok, here is an example project with db: Google Drive

    In addition, I would like to show data from the soil and humidity column on one graph. However, I can not add many y-axis. Can you help me?

    #22169

    Vishwas R
    Keymaster

    @d3bsky,

    valueFormatString is used to format numbers and date time values (x-values) that appears on axisX but not for labels. Passing x-value to dataPoints should work fine in your case dps.push({"x":new Date(result[i].time), "y":result[i].humidity});.

    To format labels, you can use labelFormatter.


    Vishwas R
    Team CanvasJS

    #22180

    d3bsky
    Member

    It works! Thank you. I created a graph with two y-axes. How can I give them names and add a legend?

    • This reply was modified 1 month, 1 week ago by  d3bsky.
    #22185

    Vishwas R
    Keymaster

    @d3bsky,

    Legends will be shown for every dataSeries. You can enable legend by setting showInLegend property in dataSeries level to true. Text shown in legend can be set with the help of name or legendText.


    Vishwas R
    Team CanvasJS

    #22225

    d3bsky
    Member

    Thanks!

    #22606

    d3bsky
    Member

    Can I change the type of time displayed to 24 hour format? Using your advice, I display the hour using: dps.push({"x":new Date(result[i].time), "y":result[i].temp}); on the x-axis I have an hour, however, the date is displayed on the chart next to the value, eg: “02 Sep 18:” Can I change it?

    • This reply was modified 6 days, 1 hour ago by  d3bsky.
    #22620

    Vishwas R
    Keymaster

    @d3bsky,

    You can set valueFormatString to “HH:mm” to display hours in 24hours format along with minutes. You can customize the format of labels being displayed in axisX using valueFormatString, please refer documentation for more available options.


    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.