Home forums Using CanvasJS how to use with Jquery to dynamic show dynamic number of dynamic graph

This topic contains 1 reply, has 2 voices, and was last updated by  Sunil Urs 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #21023

    martin
    Member

    i use with html5 websocket to receive, data , expect to show how many number of data received by counting length of array after split with ;
    and then show dynamic number of graph

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset=”UTF-8″>
    <script>
    window.onload = function() {

    var dataPointsV2 = [];
    var dataPointsV3 = [];

    var dataPoints2 = [];
    var dataPoints3 = [];

    var chart2 = new CanvasJS.Chart(“chartContainer1”, {
    theme: “light2”,
    title: {
    text: “Gi0/4 Management port packet per seconds Chart”
    },
    data: [{
    type: “line”,
    dataPoints: dataPoints2
    }]
    });
    updateData2();

    var chart3 = new CanvasJS.Chart(“chartContainer2”, {
    theme: “light2”,
    title: {
    text: “Gi0/8 Management port packet per seconds Chart”
    },
    data: [{
    type: “line”,
    dataPoints: dataPoints3
    }]
    });
    updateData3();

    // Initial Values
    var xValue = 0;
    var yValue2 = 0;
    var yValue3 = 0;
    var newDataCount = 99999;
    var ws = new WebSocket(“ws://127.0.0.1:5678/”)

    ws.onmessage = function (event) {
    var wholedata = event.data.split(“;”);
    alert(wholedata.length);
    $(function(){
    for (var countdiv = 0; countdiv <= wholedata.length; countdiv++) {
    $(‘#parent’).append(‘<div id=”chartContainer’+countdiv+'”style=”height: 370px; max-width: 920px; margin: 0px auto;”></div>’);
    }
    });
    var res2 = wholedata[0].split(“:”);
    yValue2 = res2[0];
    var res3 = wholedata[1].split(“:”);
    yValue3 = res3[0];
    };

    function addData2(data) {
    if(newDataCount != 1) {
    $.each(data, function(key, value) {
    dataPoints2.push({x: xValue, y: parseInt(yValue2)});
    xValue++;
    yValue2 = parseInt(yValue2);
    });
    } else {
    //dataPoints.shift();
    dataPoints2.push({x: xValue, y: parseInt(yValue2)});
    xValue++;
    yValue2 = parseInt(yValue2);
    }

    newDataCount = 1;
    chart2.render();
    setTimeout(updateData2, 2000);
    }

    function addData3(data) {
    if(newDataCount != 1) {
    $.each(data, function(key, value) {
    dataPoints3.push({x: xValue, y: parseInt(yValue3)});
    xValue++;
    yValue3 = parseInt(yValue3);
    });
    } else {
    //dataPoints.shift();
    dataPoints3.push({x: xValue, y: parseInt(yValue3)});
    xValue++;
    yValue3 = parseInt(yValue3);
    }

    newDataCount = 1;
    chart3.render();
    setTimeout(updateData3, 2000);
    }

    var chart9 = new CanvasJS.Chart(“chartContainer0”, {
    zoomEnabled: true,
    title: {
    text: “Gi0/4 and Gi0/8 Management port packet per seconds”
    },
    axisX: {
    title: “chart updates every 3 secs”
    },
    axisY:{
    prefix: “”,
    includeZero: false
    },
    toolTip: {
    shared: true
    },
    legend: {
    cursor:”pointer”,
    verticalAlign: “top”,
    fontSize: 22,
    fontColor: “dimGrey”,
    itemclick : toggleDataSeries
    },
    data: [{
    type: “line”,
    xValueType: “dateTime”,
    yValueFormatString: “####pps”,
    xValueFormatString: “hh:mm:ss TT”,
    showInLegend: true,
    name: “Gi0/4”,
    dataPoints: dataPointsV2
    },
    {
    type: “line”,
    xValueType: “dateTime”,
    yValueFormatString: “####pps”,
    showInLegend: true,
    name: “Gi0/8” ,
    dataPoints: dataPointsV3
    }]
    });

    function toggleDataSeries(e) {
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    }
    else {
    e.dataSeries.visible = true;
    }
    chart9.render();
    }

    var updateInterval = 3000;
    // initial value
    var yValueV2 = 0;
    var yValueV3 = 0;

    var time = new Date;
    // starting at 9.30 am
    time.setHours(9);
    time.setMinutes(30);
    time.setSeconds(00);
    time.setMilliseconds(00);

    function updateChart(count) {
    count = count || 1;
    for (var i = 0; i < count; i++) {
    time.setTime(time.getTime()+ updateInterval);

    // pushing the new values
    dataPointsV2.push({
    x: time.getTime(),
    y: yValue2
    });
    dataPointsV3.push({
    x: time.getTime(),
    y: yValue3
    });
    }

    // updating legend text with updated with y Value
    chart9.options.data[0].legendText = ” Gi0/4 ” + yValue2 +” pps”;
    chart9.options.data[1].legendText = ” Gi0/8 ” + yValue3 +” pps”;
    chart9.render();
    }

    function updateData2() {
    $.getJSON(“https://canvasjs.com/services/data/datapoints.php?xstart=”+xValue+”&ystart=”+yValue2+”&length=”+newDataCount+”type=json&callback=?”, addData2);
    }
    function updateData3() {
    $.getJSON(“https://canvasjs.com/services/data/datapoints.php?xstart=”+xValue+”&ystart=”+yValue3+”&length=”+newDataCount+”type=json&callback=?”, addData3);
    }
    // generates first set of dataPoints
    updateChart(100);
    setInterval(function(){updateChart()}, updateInterval);
    }
    </script>
    </head>
    <body>
    <table border=”1″>
    <tr>
    <th>
    close
    </th>
    </tr>
    <tr width=”300″>
    <td id=”data1″>
    <script>
    var ws = new WebSocket(“ws://127.0.0.1:5678/”),
    messages = document.createElement(‘ul’);
    ws.onmessage = function (event) {
    document.getElementById(‘data1’).innerHTML = yValue2
    document.getElementById(‘data2’).innerHTML = yValue3
    };
    document.body.appendChild(messages);
    </script>
    </td>
    </tr>
    <tr>
    <td id=”data2″>
    </td>
    </tr>
    </table>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
    <script src=”https://canvasjs.com/assets/script/jquery-1.11.1.min.js”></script>
    <script src=”canvasjs.min.js”></script>

    <div id=”parent”></div>
    </body>
    </html>

    • This topic was modified 2 months, 1 week ago by  martin.
    #21044

    Sunil Urs
    Keymaster

    Martin,

    Can you please explain the issue you are facing? It would also be useful if you can create a jsFiddle demonstrating the issue with minimal code.

    If you are just looking for an example using jQuery, here is one.


    Sunil Urs

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

You must be logged in to reply to this topic.