Home Forums Chart Support Emtpy charts

Emtpy charts

Viewing 5 posts - 1 through 5 (of 5 total)
  • #34594

    Hi,

    I’m just trying to follow your simple example of a chart from a mySQL database

    Substituting my own connection details I can get a connection to the DB and it returns data however the chart is empty. I’ve added a print_f to the code to see the output of $dataPoints and it shows as the following:

    Array
    (
    [0] => Array
    (
    [x] => 2021-06-11 15:52:20
    [y] => 7
    )

    [1] => Array
    (
    [x] => 2021-06-11 15:52:04
    [y] => 7
    )

    [2] => Array
    (
    [x] => 2021-06-11 15:51:38
    [y] => 9
    )

    )

    Any ideas?

    Thanks

    #34626

    @syngress,

    It seems like you are passing the date-time string to dataPoints. To display the chart containing date-time value in PHP, you need to first convert date-time string to PHP timestamp using strtotime(). Later convert PHP timestamp value to javascript timestamp and assign that value to dataPoint x-value in the following format –

    [x]=> (strtotime(“2021-06-11 15:51:38”)*1000)

    Please take a look at this sample project for an example on rendering the chart in PHP using date-time values data from database.

    Chart with datetime axis in PHP

    —-
    Manoj Mohan
    Team CanvasJS

    #34638

    Hi,

    Thanks for the reply. I’ve used your sample project and that works fine. I’ve then changed the DB to point to my data, and I get better results than I was before :) However instead of an empty graph I now get a few columns but a lot of the data is also missing, the image below is with the limit set to 1000

    href=”https://i.imgur.com/Vm0szYf.png”

    Also noted that adding a limit statement to the mySQL casues the lines to disappear if the returned results is < 100. My data is very simple its a timestamp and a number (There are lots of other columns in the mySQL, but these are the only 2 I’m interested in for the graph. The timestamp will be approx every 60seconds, which I want to limit in the graph to say the last 20 results or so.

    Regards,

    Mike

    • This reply was modified 2 days, 2 hours ago by syngress.
    #34646

    Mike,

    Can you kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with sample data so that we can run it locally at our end to understand the scenario better and help you out?

    —-
    Manoj Mohan
    Team CanvasJS

    #34668

    Hi,

    Thanks for the help, I figured out the cause, the other value (not the timestamp) was being stored as a string, and as such needed to be changed to an Int for the graph to work properly!!

    I know need to figure out how to get the x-axis to show as I’d like, at the moment the x-axis is from a timestamp, however the results I get in the database from my system are not exact times, so not always 1 minute intervals, and sometimes there can be long gaps between data being received. This causes an issue in the graph where I cant seem to display the actual timestamp from the DB on the x-axis, this is most likely me needing to figure out the settings required for the x-axis. At the moment the config for x-axis is:

    axisX:{
    valueFormatString: “DD-MM-YY HH:mm:ss”,
    intervalType: “hour”,
    interval: 24
    },
    data: [{
    type: “line”,
    xValueType: “dateTime”,

    This results in a graph such as:

    x-axis issues

    What I’d really like is for each of the data points to have the timestamp on the x-axis. you can see what I mean with the long downward slope in the middle this is where there is no data in the DB for that time period.

    Thanks,

    Mike

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

You must be logged in to reply to this topic.