0

I am performing in an awk script a series of aggregations from a dataset and I get the following.

Now I would like to create an html that collects this previous output in the form of a table and that also makes a bar graph taking into account the values of a, b, c. I want the code for the html to be in this script too.

UPDATE SAMPLE OF THE DATASET TO GENERATE AGGREGATIONS

Bel,BLR,897,965322,6844,102217,725,
Bel,BEL,976,3851048,30826,329772,
Ben,BEN,9765,26952,163,2126,13,
Bot,BWA,976,305526,2686,125488,1103,
Cabo,CPV,9865,55960,401,98772,708,

UPDATE AGGREGATED_DATA OUTPUT

7,5.23,6.36,0.63
6,12.56,24.64,0.53 
9,0.63,32.8,3.35


My script is as follows:


END {
                print "<html><body>"
                print "<table border=1>"
} NR == 1 {
                print "<tr>"
                print "<td><font face=verdana size=2 color=black>" $k "</font></td>"
                print "<td><font face=verdana size=2 color=black>" $c "</font></td>"
                print "<td><font face=verdana size=2 color=black>" $a "</font></td>"
                print "<td><font face=verdana size=2 color=black>" $aa "</font></td>"
                print "<td><font face=verdana size=2 color=black>" $aaa "</font></td>"
                print "</tr>"
} NR > 1 {
                print "<tr>"
                print "<td><font face=verdana size=1>" $1 "</font></td>"
                print "<td><font face=verdana size=1>" $2 "</font></td>"
                print "<td><font face=verdana size=1>" $3 "</font></td>"
                print "</tr>"
} END {
                print "</table>"
                print "</body></html>"
}

> file.html


Any way to achieve this?

2 Answers 2

1

HTML as such cannot "collect this previous output in the form of a table and also make a bar graph taking into account the values of a, b, c.". If you want this to happen when loading a html page, you need to make use of some web scripting language. You did not provide detail, but if the data processing is on the web server, server side scripting languages include PHP, Python, Ruby, C#, and JavaScript. For processing on the client side, javascript is common but that is typically quite insecure.

1

I'd make use of an existing framework, such as Google Libraries API, to generate an html graph on the fly. Assuming a file agreggated_data.csv consists of the shown table, would you please try the following:

#!/bin/bash
# generate strings based on the input file
str1=$(awk -F, '
    NR==1 {
        printf "\t[%s,", "\047" "\047"
        for (i = 3; i <= NF; i++) {
            printf "%s%s", "\047" $i "\047", i == NF ? "],\n" : ","
        }
    }
    NR>1 {
        printf "\t[%s,", "\047" $1 "\047"
        for (i = 3; i <= NF; i++) {
            printf "%s%s", $i, i == NF ? "],\n" : ","
        }
    }
' aggregated_data.csv)

str2=$(awk -F, '
    NR>1 {
        printf "    formatter3.format(data3,%d);\n", ++n
    }
' aggregated_data.csv)

# embed generated strings in the template to create "file.html"
cat <<EOS > file.html
<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
// load api
google.load('visualization', '1.0', {'packages':['corechart']});

// callback
google.setOnLoadCallback(drawChart);

// function to draw the graph
function drawChart(){
    var data3 = google.visualization.arrayToDataTable([
$str1
    ]);

    var formatter3 = new google.visualization.NumberFormat({
        pattern: '#,###.##'
    });
$str2

    var options3 = {
        chartArea: {width:'55%', height:'75%',left:50},
        colors:['#4477cc','#55cc55','#ff7788'],
        legend: {position:'right'},
        fontName:"sans-serif",
        tooltip:{textStyle:{bold:'false'}},
        bar:{groupWidth:"70%"},
        hAxis:{
            textStyle:{fontSize:11}
        },
        vAxis:{
            format:'#,###.##',
            gridlines: {count:6},
            textStyle:{fontSize:11}
        },
        isStacked:true,
        backgroundColor:'transparent'
    };

    var chart3 = new google.visualization.ColumnChart(document.getElementById('Chart3'));
    chart3.draw(data3, options3);
}
</script>

<style type="text/css">
.chart{
    width:450px;
    height:350px;
}
</style>

</head>
<body>
    <div class="chartBox">
    <div id="Chart3" class="chart"></div>
    </div>
</body>
</html>
EOS

Here is the generated graph (file.html).

Generated graph

As I'm not sure about your desired layout/view of the graph (e.g. how we use the value of Total), additional feedback are welcome.

8
  • Hello thsiono. Nice to see you here. Your code looks very good. However I tried it and it didn't work :( Actually the table in the post is an aggregation of a large dataset and I would like the code for the aggregation (which already works) and the code to generate the html to be in the same script. Below I put in edit what I have tried from yours.
    – oshiono
    May 24, 2022 at 18:08
  • You can find what I've tried in UPDATE on my post. Maybe I'm not doing something properly...
    – oshiono
    May 24, 2022 at 18:25
  • Thank you for the feedback. Does it work well if you invoke your script (which generates aggregated_data.csv) and my script (which reads aggregated_data.csv) separately?
    – tshiono
    May 24, 2022 at 22:09
  • BTW how do you run your awk script? Does it look like awk -f yourscript.awk dataset.csv?
    – tshiono
    May 24, 2022 at 22:14
  • I need to run it as gawk -f script.awk dataset.csv :)
    – oshiono
    May 24, 2022 at 22:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .