Forum Replies Created by shyamcanvas1992

Viewing 3 posts - 1 through 3 (of 3 total)
  • August 7, 2019 at 1:01 pm in reply to: I want to Live line chart update by json data #26201

    shyamcanvas1992

    this is my code and json data on jsfiddle : jsfiddle.net/shyam1992/d9aL2cnv/10
    My chart is properly render but not real time data update when new data is coming.

    August 5, 2019 at 9:28 pm in reply to: I want to Live line chart update by json data #26182

    shyamcanvas1992

    I tried but not getting any success basically my chart is render properly by json data, but i want that my chart dynamically render json data every second when new data come in json object. I fetching two data from json object first is temp and second is time. please help.

    August 2, 2019 at 4:53 pm in reply to: Dynamic chart extra lines being added #26153

    shyamcanvas1992

    please give me ur sample code please, That same problem is bothering me also.

    This is my code :

    ———————-

    <%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script type="text/javascript">

var dataPoints = [];
var chart;
$.getJSON('http://localhost:8080/SpringREST/rasp/json', function(data) {  
  $.each(data, function(key, value){
    dataPoints.push({x:(value)["creation_time"], y:Number(value["temp"])});
  });
  chart = new CanvasJS.Chart("chartContainer",{
    title:{
      text:"Live Chart with dataPoints from External JSON"
    },
    zoomEnabled: true,
    axisX:{
       scaleBreaks:{
        autoCalculate: true,
        maxNumberOfAutoBreaks: 5,
        collapsibleThreshold: "15%"
      },
    },
    zoomType: "xy",
    //backgroundColor: "#bdcfed",
    animationEnabled: true,
    animationDuration: 5000,
    exportEnabled: true,
    theme: "dark1",
    data: [{
      showInLegend: true,
      legendText: "Temperature",
      markerType: "circle",
      markerSize: "3",
      markerColor: "red",
      xValueType: "dateTime",
      xValueFormatString: "YYYY-MM-DD HH:mm:ss",
      toolTipContent: "x:{x}, y: {y}",
      type: "line",
      dataPoints : dataPoints,
    }]
  });
  chart.render();
  updateChart();
});

function updateChart() {
  $.getJSON('http://localhost:8080/SpringREST/rasp/json', function(data) {
  	//dataPoints = [];
    $.each(data, function(key, value) {
        dataPoints.push({
            x:(value["creation_time"]),
            y: Number(value["temp"]),

          });
    });
    console.log(chart.options)
    chart.render();
  });
}

setTimeout(function(){updateChart()}, 1000);

</script>
</head>
<body>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
</body>
</html>
Viewing 3 posts - 1 through 3 (of 3 total)