Week 10 workshop exercises

CURL examples

The CURL tutorial is here.
Try constructing example requests for the POSTMAN ECHO server using the examples from the tutorial.

Constructing charts

Try running the following curl examples:

curl \
  'https://image-charts.com/chart?chs=700x190&chd=t:60,40&cht=p3&chl=Hello%7CWorld&chan&chf=ps0-0,lg,45,ffeb3b,0.2,f44336,1|ps0-1,lg,45,8bc34a,0.2,009688,1' \
  > chart1.gif
curl \
  'https://image-charts.com/chart?&chs=150x150&cht=qr&chl=Helloworld&choe=UTF-8' \
  > chart2.png

What result do you get? See if you can replace the manual URL construction with calls to the "-d" flag for curl.
These examples use the server at image-charts.com; another server with a similar API is at https://quickchart.io/. Try the following, in a script file (you will need to chmod it correctly):

#!/usr/bin/env bash

# Use a HERE-doc to splice in the chart configuration
# we want.
# grep-ing out lines starting with whitespace then '#'
# lets us include comments in the HERE-doc.
chart_config=$(grep -v '^\s*#' <<HERE
{
  # construct a bar chart
  type: "bar",
  # Our data: we have two datasets - for dogs and cats -
  # and a set of x-axis labels, for the months Jan thru May
  data: {
    labels: ["January", "February", "March", "April", "May"],
    datasets: [{
      label: "Dogs",
      data: [ 50, 60, 70, 180, 190 ]
    }, {
      label: "Cats",
      data: [ 100, 200, 300, 400, 500 ]
    }]
  }
}
HERE
)

# Base URL of the quickchart server
base_url="https://quickchart.io/chart"

# strip newlines and spaces, and replace
# double quotes with single -- needed if we embed
# our config string in an HTML file.
function stripSpaces {
  # sed normally does replacements *within* a line --
  # to get it to strip the newline characters that appear
  # at the end of a line requires a little trickery.
  sed -n '
  # store all the lines in the "hold space"
  { H; }
  # at the end of the input,
  $ { x; 
      # strip newlines
      s|\n||g; 
      # strip spaces
      s|\s\+||g;
      # replace double quotes with single
      s|"|\x27|g; P; }
  '
}

# This outputs an .html file, which, each time
# you open it in a browser, will call the 'quickchart'
# server to construct a chart.
img_url=$(echo "${base_url}?bkg=white&c=${chart_config}" | stripSpaces) 
echo "<img src=\"${img_url}\">" > chart3.html

# This uses curl to make a request of the 'quickchart'
# server directly, and outputs the result to a .PNG
# file.
curl --verbose \
  --get \
  --data-urlencode bkg=white \
  --data-urlencode height=300 \
  --data-urlencode width=500 \
  --data-urlencode c="$chart_config" \
  "$base_url" > chart3.png

result_type=$(file "chart3.png")
if [[ "$result_type" = *'PNG image data, 1000 x 600'* ]]; then
  echo "Successfully created PNG image!"
else
  echo "PNG image construction seems to have failed"
fi

It produces two files: an HTML file which, each time it is viewed, will create a chart and display it, and a plain PNG file. The HTML file should look like this:

<img src="https://quickchart.io/chart?bkg=white&c={type:'bar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}">

And when viewed, should display an image that looks like this:

Suggested exercise: using the documentation at the image-charts.com site, see if you can construct a visualization of the ENROLMENTS data -- for instance, numbers of students enrolled in different schools.