FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › load all files from folder and make a chart foreach file.

load all files from folder and make a chart foreach file.

Viewing 6 posts - 1 through 6 (of 6 total)
  • February 18, 2019 at 8:44 pm #24379

    Alessandro

    Hello everybody!
    I’m working hard to make a php page that show me 16 charts for each file.txt in a folder.
    I’m trying to do a foreach loop that allow me to load all files in the folder and than make the chart.

    the working code with only one file.tx is below:

    <?php
    $i = 0;
    $file_txt = file(‘./test/SpeedLAN.txt’);

    //[0] => 02/06 05:00:02 DATA
    //[1] => 11 DOWNLOAD
    //[2] => 38 PING
    //[3] => LO-DC2012 HOSTNAME
    //[4] => 2 [5] UPLOAD
    foreach ($file_txt as $line) {
    $valori = explode(“;”, $line);
    $Download[$i] = array(“y” => $valori[1],”label” => $valori[0] );
    $Upload[$i] = array(“y” => $valori[4],”label” => $valori[0] );
    $Ping[$i] = array(“y” => $valori[2],”label” => $valori[0] );
    $i++;
    }
    ?>
    <!DOCTYPE HTML>
    <html>
    <head>
    <script type=”text/javascript”>
    window.onload = function () {

    var chart1 = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    animationDuration: 230,
    zoomEnabled: true,
    title: {
    text: “Speed test LAN: <?php echo trim($valori[3]) ?>”
    },
    exportEnabled: true,
    legend:{
    cursor: “pointer”,
    },
    toolTip: {
    shared: true
    },
    axisX:{
    crosshair: {
    enabled: true,
    color: “red”,
    lineDashType: “solid”,
    },
    labelFontSize: 15,
    gridThickness: 0.6,
    minimum: -0.3,
    maximum: 12,
    },
    data: [{
    type: “stackedArea”,
    name: “Download”,
    color: “#00f731”,
    showInLegend: true,
    yValueFormatString: “#,##0 [MBit/s]”,
    dataPoints: <?php echo json_encode($Download, JSON_NUMERIC_CHECK); ?>
    },
    {
    type: “stackedArea”,
    name: “Upload”,
    color: “#007bf7”,
    showInLegend: true,
    yValueFormatString: “#,##0 [MBit/s]”,
    dataPoints: <?php echo json_encode($Upload, JSON_NUMERIC_CHECK); ?>
    },
    {
    type: “stackedArea”,
    name: “Ping”,
    color: “#494c4f”,
    showInLegend: true,
    yValueFormatString: “#,##0 [ms]”,
    dataPoints: <?php echo json_encode($Ping, JSON_NUMERIC_CHECK); ?>
    },]
    });
    chart1.options.axisX.minimum = -0.3;
    chart1.render();

    document.getElementById(“Giorno”).addEventListener(“click”, function(){
    chart1.options.axisX.minimum = -0.3;
    chart1.options.axisX.maximum = 24;
    chart1.render();
    })
    document.getElementById(“Mese”).addEventListener(“click”, function(){
    chart1.options.axisX.minimum = -0.3;
    chart1.options.axisX.maximum = 320;
    chart1.render();
    })
    }
    </script>
    <script type=”text/javascript” src=”chart.js”></script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 360px; width: 100%;”></div>
    <button id=”Giorno”>Ultimo Giorno</button>
    <button id=”Mese”>Ultimo Mese</button>
    </body>
    </html>

    I’m trying with this loop to load all files in the folder and make the chart:
    foreach (glob(“./test/*.txt”) as $filename) {
    echo “$filename”;
    }

    var chart[$i] = new CanvasJS.Chart(“chartContainer[$i]”, {
    ..
    ..
    $i++;

    February 19, 2019 at 8:43 pm #24387

    Shashi Ranjan

    @izsler,

    We are looking into your query and will get back to you at the earliest.

    ____
    Shashi Ranjan
    Team CanvasJS

    February 21, 2019 at 12:50 am #24411

    Shashi Ranjan

    @izsler,

    I request you to share sample project along with the text file(SpeedLAN.txt) being used for data over Google-Drive/Onedrive, which would help us understand your exact scenario better when we run your code locally at our end.

    ____
    Shashi Ranjan
    Team CanvasJS

    February 21, 2019 at 3:10 pm #24421

    Alessandro

    The “project” files are:
    – test_LAN.php:

    <?php
    $i = 0;
    $file_txt = file(‘./Storico_TestLAN/LAN-BO-DC2012.txt’);

    //[0] => 02/06 05:00:02 DATA
    //[1] => 11 DOWNLOAD
    //[2] => 38 PING
    //[3] => LO-DC2012 HOSTNAME
    //[4] => 2 [5] UPLOAD
    foreach ($file_txt as $line) {
    $valori = explode(“;”, $line);
    $Download[$i] = array(“y” => $valori[1],”label” => $valori[0] );
    $Upload[$i] = array(“y” => $valori[4],”label” => $valori[0] );
    $Ping[$i] = array(“y” => $valori[2],”label” => $valori[0] );
    $i++;
    }
    ?>
    <!DOCTYPE HTML>
    <html>
    <head>
    <script type=”text/javascript”>
    window.onload = function () {

    var chart1 = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    animationDuration: 590,
    zoomEnabled: true,
    title: {
    text: “Speed test LAN: <?php echo trim($valori[3]) ?>”
    },
    exportEnabled: true,
    legend:{
    cursor: “pointer”,
    },
    toolTip: {
    shared: true
    },
    axisX:{
    crosshair: {
    enabled: true,
    color: “red”,
    lineDashType: “solid”,
    },
    labelFontSize: 15,
    gridThickness: 0.6,
    minimum: -0.3,
    maximum: 12,
    },
    data: [{
    type: “stackedArea”,
    name: “Download”,
    color: “#00f731”,
    showInLegend: true,
    yValueFormatString: “#,##0 [MBit/s]”,
    dataPoints: <?php echo json_encode($Download, JSON_NUMERIC_CHECK); ?>
    },
    {
    type: “stackedArea”,
    name: “Upload”,
    color: “#007bf7”,
    showInLegend: true,
    yValueFormatString: “#,##0 [MBit/s]”,
    dataPoints: <?php echo json_encode($Upload, JSON_NUMERIC_CHECK); ?>
    },
    {
    type: “stackedArea”,
    name: “Ping”,
    color: “#494c4f”,
    showInLegend: true,
    yValueFormatString: “#,##0 [ms]”,
    dataPoints: <?php echo json_encode($Ping, JSON_NUMERIC_CHECK); ?>
    },]
    });
    chart1.options.axisX.minimum = -0.3;
    chart1.options.axisX.maximum = 24;
    chart1.render();

    document.getElementById(“Giorno”).addEventListener(“click”, function(){
    chart1.options.axisX.minimum = -0.3;
    chart1.options.axisX.maximum = 24;
    chart1.render();
    })
    document.getElementById(“Mese”).addEventListener(“click”, function(){
    chart1.options.axisX.minimum = -0.3;
    chart1.options.axisX.maximum = 320;
    chart1.render();
    })
    }
    </script>
    <script type=”text/javascript” src=”chart.js”></script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 360px; width: 100%;”></div>
    <button id=”Giorno”>Ultimo Giorno</button>
    <button id=”Mese”>Ultimo Mese</button>
    </body>
    </html>

    – the file txt from: ./Storico_TestLAN/LAN-BO-DC2012.txt
    02/21 10:00:01 ;12;31;BO-DC2012;11;
    02/21 09:00:01 ;12;31;BO-DC2012;11;
    02/21 08:00:02 ;12;31;BO-DC2012;11;
    02/21 07:00:01 ;12;31;BO-DC2012;11;
    02/21 06:00:01 ;10;31;BO-DC2012;11;
    02/21 05:00:01 ;12;31;BO-DC2012;10;
    02/21 04:00:01 ;10;31;BO-DC2012;11;
    02/21 03:00:01 ;12;31;BO-DC2012;11;
    02/21 02:00:01 ;12;32;BO-DC2012;11;
    02/21 01:00:00 ;11;31;BO-DC2012;11;

    I have 12 file txt, I would like to make in ONE page php/html 12 charts from my 12 *txt files.
    thanks

    February 22, 2019 at 12:06 am #24430

    Shashi Ranjan

    @izsler,

    We are looking into your query and will get back to you at the earliest.

    ____
    Shashi Ranjan
    Team CanvasJS

    February 22, 2019 at 9:39 pm #24445

    Shashi Ranjan

    @izsler,

    Please take a look at this sample project.

    ____
    Shashi Ranjan
    Team CanvasJS

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

You must be logged in to reply to this topic.