Home forums Using CanvasJS MYSQL Temperature Data with Time live chart

This topic contains 6 replies, has 2 voices, and was last updated by  Indranil Deo 2 weeks, 4 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #25635

    How to display time value form json_encode(dataPoints) in X Axis.
    the data are fetched from Mysql.

    #25657

    @sundara-murthy-s,

    You can fetch the date-time in timestamp format with its corresponding y value, parse it into format CanvasJS accepts and use the same to render the chart. Please take a look at this example to render chart from timestamp in PHP.

    ___________
    Indranil Deo
    Team CanvasJS

    #25664

    Herewith,
    pls refer this image of My output https://imgur.com/a/1vmfrJ7.

    still im getting the same result after giving xValueType.
    i am getting temp value and time in unixtimeform (integer).
    <script>
    window.onload = function () {

    var chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    exportEnabled: true,
    theme: “light1”, // “light1”, “light2”, “dark1”, “dark2”
    title:{
    text: “PHP Line Chart from Database”
    },
    axisX:{
    title: “time”,

    labelAngle: -60
    },
    data: [{type: “line”, xValueFormatString: “HH mm ss”, xValueType:”datetime”, dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>}]
    });
    chart.render();

    }
    </script>

    #25679

    @sundara-murthy-s,

    There seems to be a typo, please try changing the value of xValueType from “datetime” to “dateTime”.

    You may need to convert PHP timestamp to JavaScript timestamp as PHP timestamp is in seconds and JavaScript timestamp is in milliseconds. Please refer this stackoverflow thread for more info.

    ___________
    Indranil Deo
    Team CanvasJS

    #25682

    Thank you so much It works fine. Once again thank you for ur immediate reply.

    #25689

    Is it possible to fix the Xaxis label like with fixed interval for example in hour, 1:00 2:00 3:00 ….. 24:00 format for live chart ? Where x, y values from database are live value. pls give ur suggestion.

    #25706

    @sundara-murthy-s,

    You can customize interval according to your requirements by setting interval and intervalType properties. Please refer documentation for more customization options available.

    ___________
    Indranil Deo
    Team CanvasJS

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

You must be logged in to reply to this topic.