Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
suma S
115
How to plot a graph for dynamic values
posted

<!DOCTYPE html>
<html lang="en">

<head>
<!-- Ignite UI Required Combined CSS Files -->
<link
    href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/themes/infragistics/infragistics.theme.css"
    rel="stylesheet" />
<link
    href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/structure/infragistics.css"
    rel="stylesheet" />

<!--CSS file specific for chart styling -->
<link
    href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/structure/modules/infragistics.ui.chart.css"
    rel="stylesheet" />


</head>

<body>

    <div style="width: 80%; min-width: 210px;">
        <div id="chart"></div>
    </div>

    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

    <script src="../js/mqttws31-min.js"></script>
    <script
        src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.core.js"></script>
    <script
        src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.dv.js"></script>
    <script>
    $(document).ready(function(){
        /*  making request for live speed update*/
        $.ajax({              
              type: "GET",
              url: "http://10.9.177.82:8080/TrainAnalyticsAPI/api/speed/train/updates/1",
              headers: { 'Access-Control-Allow-Origin': '*' },
              cache:false,
              crossDomain: true,
                dataType: 'json',
              contentType: "application/json; charset=UTF-8",                          

              success: function(response){
                  alert("got response");
                  console.log(response);
                  topicName(response);
              },
              error: function(textStatus, errorThrown){  
                  alert("error");                                          
                    console.log(textStatus);
                    console.log(errorThrown);
              },
              complete: function () {
                }

            });
    });
var speedTopic;
var data=[];
function topicName(response){
        var saObj = response.topic;
        console.log("topic is ---> "+saObj);
        speedTopic = (saObj).toString();
        console.log("speedTopic---->"+speedTopic);

        connect();
}

function connect(){
    // Create a client instance
    client = new Paho.MQTT.Client("10.9.65.121", 8000, "50");
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;

    // connect the client
    client.connect({onSuccess:onConnect});


    // called when the client connects
    function onConnect() {
        alert("connected");
      // Once a connection has been made, make a subscription and send a message.
      console.log("onConnect");
      client.subscribe(speedTopic);
    }

    // called when the client loses its connection
    function onConnectionLost(responseObject) {
      if (responseObject.errorCode !== 0) {
        console.log("onConnectionLost:"+responseObject.errorMessage);
      }
    }

    // called when a message arrives
    function onMessageArrived(message) {

          console.log("onMessageArrived:"+message.payloadString);
          var obj = jQuery.parseJSON(message.payloadString);
          
        data.push(obj);
        drawSpeed();
    }
}

function drawSpeed() {
        console.log("Data inside draw---->"+JSON.stringify(data));
    $("#chart").igDataChart({
        width : "100%",
        height : "400px",
        title : "Time vs Brake Cylinder",
        horizontalZoomable : true,
        verticalZoomable : true,
        windowResponse : "immediate",
        overviewPlusDetailPaneVisibility : "visible",
        dataSource : data,
        axes : [ {
            name : "NameAxis",
            type : "categoryX",
            title : "Time",
            label : "entered"
        }, {
            name : "SpeedAxis",
            type : "numericY",
            minimumValue : 0,
            title : "KMPH"
        }
        ],
        series: [
{
    title : "SpeedLimit",
    name : "SpeedLimit",
    type : "spline",
    xAxis : "NameAxis",
    yAxis : "SpeedAxis",
    isTransitionInEnabled : true,
    isHighlightingEnabled : true,
    showTooltip : true,
    thickness: 3,
    valueMemberPath : "speedLimit"
},
{
    title : "Speed",
    name : "Speed",
    type : "spline",
    xAxis : "NameAxis",
    yAxis : "SpeedAxis",
    isTransitionInEnabled : true,
    isHighlightingEnabled : true,
    showTooltip : true,
    thickness: 3,
    valueMemberPath : "value"
}
        ]
    });
}


    </script>

</body>

</html>

The above code id for receiving the data from mqtt broker, and plotting the graph for the received data, It should be something like live data plotting,

onMessageArrived call back method is callling the draw(), even X and Y axes are coming with the specied values and label, only thing is data is not plotting on the graph
Please correct me where Iam wrong