Creating a chart from data with SQL DB [PHP]

[d3bsky]

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!

[Vishwas R]

@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

[d3bsky]

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?

[Vishwas R]

@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

[d3bsky]

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?

[Vishwas R]

@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

[d3bsky]

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?

[Vishwas R]

@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

[d3bsky]

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 5 years, 8 months ago by d3bsky.

[Vishwas R]

@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

[d3bsky]

Thanks!

[d3bsky]

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 5 years, 7 months ago by d3bsky.

[Vishwas R]

@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

[d3bsky]

Thanks for help, nowhere I can change the information on how to change the format of the displayed date which is displayed when you hover over a point of the chart. How can I change this?

[Vishwas R]

@d3bsky,

You can format x-value and y-value displayed in toolTip / indexLabel by setting xValueFormatString and yValueFormatString respectively whereas valueFormatString just defines the format of axis-labels.

xValueFormatString: "HH:mm",
yValueFormatString: "#,###.##"

—
Vishwas R
Team CanvasJS