Home › Forums › Chart Support › plot multiple dynamic graphs from txt file

plot multiple dynamic graphs from txt file

Viewing 6 posts - 1 through 6 (of 6 total)
  • August 10, 2018 at 2:35 pm #22195

    hibayo

    Deal all, se canvas to plot some graphs dynamically.

    I have a http server writes data to txt file given a certen intervals.
    My text file look like:

    {id: 1, logs: 1 3 2}
    {id: 1, logs: 2 7 5}
    {id: 2, logs: 1 4 3}
    {id: 1, logs: 1 3 2}
    {id: 3, logs: 2 7 5}
    {id: 1, logs: 3 7 4}
    {id: 2, logs: 1 3 2}
    {id: 1, logs: 2 7 5}
    {id: 3, logs: 3 7 4}

    for each id I want to plot the dynamic graph as column graph where for example : logs: start=1 end=3 widthof the column=end-start

    I don’t know how to deal with this issue,I read some documents but none was helpful.

    How can I modify the following example to meet my requirments and have diiferent graphsS?

    <!DOCTYPE html>
    <html>
    <head>
    <title>Chart using txtfile Data</title>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    $.get("data.txt", function(data) {
    var xVal = 0;
    var allLines = data.split(' ',\n');
    var dps = [];
    for(var i=0; i< allLines.length; i++) {
    xVal +=.25;
    dps.push({x : xVal, y: Number(allLines[i])});
    }
    var chart = new CanvasJS.Chart("chartContainer",{
    title :{
    text: "RPR"
    },
    data: [{
    type: "column",
    dataPoints : dps
    }]
    });
    chart.render();
    },'text');
    </script>
    <script type="text/javascript" src="canvasjs.min.js"></script>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    </body>
    </html>

    August 10, 2018 at 5:42 pm #22204

    Priyanka M S

    @hibayo,

    Please provide a pictorial representation of your requirement with the sample data that you have provided above, so that we can understand the requirement better and help you out.

    __
    Priyanka M S
    Team CanvasJS

    August 11, 2018 at 9:44 pm #22222

    hibayo

    @Priyanka

    My json data are in this format:

    {
    “viewers”: [
    {
    “id”: 1,
    “datapoints”: [
    {“tload”: 1234567, “fakeDuration”: 200,”realDuration”: 20, “hlsBandwidth”: 3400, “origin”: “p2p”},
    {“tload”: 1334567,”fakeDuration”: 210,”realDuration”: 30,”hlsBandwidth”: 3100, “origin”: “cdn”}
    ]},
    {
    “id”: 2,
    “datapoints”: [
    { “tload”: 1244567, “newDuration”: 200, “realDuration”: 20, “Bandwidth”: 3400,”origin”: “p2p” },
    {“tload”: 1335567,”newDuration”: 210,”realDuration”: 30,”Bandwidth”: 3100, “origin”: “cdn”}
    ]
    }
    ]
    }

    I want to generate a dynamic graph for each “id” with some thing like this:
    Example of the graph

    on the graph I marked the points which their origin is “p2p”.

    August 11, 2018 at 9:47 pm #22223

    hibayo

    the wanted graph

    August 11, 2018 at 9:47 pm #22224

    hibayo

    I can not upload pictures here… !!

    August 13, 2018 at 11:46 am #22234

    Priyanka M S

    @hibayo,

    Please take a look at this jsfiddle.
    Please refer to the example of creating dynamic charts in our documentation.

    __
    Priyanka M S
    Team CanvasJS

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

You must be logged in to reply to this topic.