Charts

Please watch the videos under Resources before class.

Important

Because of recent sampling I feel reminded to remind you:

• You must have your Git Repositories updated at all times and when assignments are due otherwise I will not credit you points when randomly sampled for grade inspection
• You must demonstrate your working code on Linux Remote, not on localhost. I will no longer go through lengths of cloning, and setting up your workspaces on my localhost to verify it works there.
• If you got an email about a penality yesterday because you didn't check that your partner hasn't properly deployed on linuxremote you may disregard this as a warning. I realized this is was an oversight from the Syllabus Update we had in February because It doesn't make sense to penalize students for their partner's not having pushed to linuxremote. That would be unfair.

Preparation

This should be a fun one. Discuss with your partner and the other team on your table a question that you want to ask each member in the class. You will have only 3 minutes to do so. The questions should be simple, ethical, and not cause discomfort to anyone being asked in this class.

One of you on your table should forward the question (and the answer options to this document):

Example Question: I have at least one sibling. (Yes, No)

While the instructor is preparing a Google Form (and send you a link to it via email) you should go and get started loading the npm dependency charts.js via the instructions layed out in the video:

cd assets
npm install chart.js
cd ..
mix phx.server

Remember you need to manually do this once when you deploy to linuxremote3 the next time otherwise your website will fail. Alternatively you could consider adding those steps to your deploy.sh file on linuxremote to auto-update npm dependencies on deploy.

Afterwards in your app.js file do load charts.js near the top of the file and add the Chart hook discussed in the video:

// ...

import Chart from "chart.js/auto"

// ...

let Hooks = {};

Hooks.Chart = {
  mounted() {
    this.el._chart = new Chart(this.el, JSON.parse(this.el.dataset.config));
  },

  updated() {
    const new_config = JSON.parse(this.el.dataset.config)
    this.el._chart.data = new_config.data
    this.el._chart.update()
  }
}

//...

Next create a new LiveView that you will serve at /charts in the public domain (no login required).

Cake/Bar Chart (1 points)

Your first objective is to fill out the survey wait until at least 12 students have filled it out and then use your favorite question and their answers to build a static Cake or Bar chart like i showed in the video. No auto-update or button for such needs to be created alongside but I expect some colors and basic styling so it looks good in dark and light mode.

Auto Updating The Bar/Cake chart (2 points)

Now Extend your bar/cake chart in a way that when clicking a button "Random Question" it will update the chart with a random new question and their answers!

Make sure your question is being displayed either in the chart, via title or legend or as a self-updating heading above. A good strategy would be to create a list of data options to select the right answers/question from based on a randomized index.

All five questions from the survey should be supported.

Complex Plot (4 points) via API

Now carefully read the CheapShark Documentation It lists information on how to get JSON data on Steam Games and where to buy them for how much. It can also be used to get information on games or stores so make sure to play around with the API together with your partner. Discuss this data while simulataniously looking at []charts.js Documentation](https://www.chartjs.org/docs/latest/getting-started/usage.html) and the plot options you have available.

Your Objective is to:

• settle for a specific api request and retrieve JSON data from cheapshark via a HTTP Poison API request
• select an appropriate Chart (don't reuse Bar, or Chart, anything else is allowed, i recommend line for simplicity)
• format the data in elixir as necessary (e.g. produce a list of numbers from the api data for a line-chart)
• present meaningful data via that chart you selected.

To get data from an API source via HTTPoison you will need to add the HTTPoison Module to your list of dependencies. Afterwards you should be able to make a synchronious API call to any url and fetch it's response:

HTTPoison.get!("https://api.github.com")
%HTTPoison.Response{status_code: 200,
                headers: [{"content-type", "application/json"}],
                body: "{...}"}

You can pattern match for the body and convert from JSON via JASON.decode!(data)