Member Avatar for Jon_7

I don't even know if I worded my question correctly, but here's what I have and here's what I'd like:

I use an attendance app to track my basketball workout classes, and then I show the results on my site here.

To achieve this, I send the csv provided by the app to my email, I click on the attachment to eventually add it to my FileZilla server, which then sends the info into a google doc that separates the data through a couple of sheets to provide an iFrame of the end result.

I don't mind the steps, as it's better than the copy/paste I used to do, but I would love for the results to be a lost more visually stunning, not in an iFrame, and perhaps interactive.

I've read about jquery highcharts and have seen some really cool 3d effects, and I've also seen programs meant to parse or convert. But I don't even know where to start to implement any of that.

I'd like for those within my program to be able to go to the attendance page and see a dazzling list of names that can be sorted by teams, and a graph that shows their progress compared to our ultimate goal of 2,000 events when any player's name is clicked on.

Is that even possible? Thanks for any help/direction you're able to provide.

  • 4 Contributors
  • 5 Replies
  • 892 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Ella_3

Dani AI

Generated

Short answer for : yes — parse the CSV to JSON in the browser, render an interactive table, and feed the JSON into a Flot chart (or another charting library). A lightweight, maintainable stack is PapaParse to turn CSV → objects, DataTables (or plain HTML + a little JS) for sorting/filtering, and Flot to draw the progress graph; those pieces plug together cleanly. (papaparse.com)

Recommended workflow (one-time wiring, then automatic updates):

  1. Put the CSV where the page can fetch it (host on the same server or use a published Google Sheet CSV/export URL). (stackoverflow.com)
  2. Fetch + parse with PapaParse (handles header rows, numeric typing, streaming for big files). Transform rows into a JSON shape keyed by player/team.
  3. Build a DataTables table from that JSON (sorting, search, paging) and bind a click handler on each name/row to replot the chart for that player.
  4. Prepare Flot series arrays (time/value pairs or index/value pairs) and redraw the plot with a static “goal” series at 2000 so the goal is always visible.

Minimal example (adapt header names to the CSV):

// CSV -> JSON -> grouped series -> Flot
Papa.parse('/data/attendance.csv', {
  download: true, header: true, dynamicTyping: true,
  complete: function(res){
    var rows = res.data;
    var byPlayer = {};
    rows.forEach(function(r){
      var t = new Date(r.date).getTime(); // adapt: r.date
      var v = Number(r.count);            // adapt: r.count
      byPlayer[r.name] = byPlayer[r.name] || [];
      byPlayer[r.name].push([t, v]);
    });
    var series = Object.keys(byPlayer).map(function(name){
      return { label: name, data: byPlayer[name].sort(function(a,b){return a[0]-b[0]}); };
    });
    $.plot('#chart', series, { xaxis:{ mode:'time' } });
    // init DataTable from rows; attach click handler to replot a single player's series
  }
});

Troubleshooting / notes:

  • If the CSV is on a different origin watch CORS headers; browsers block cross-origin fetches unless the server allows them. (developer.mozilla.org)
  • Date parsing and column names must be normalized before plotting (prefer ISO dates or convert strings to epoch ms).
  • For large files use PapaParse streaming (step) or pre-process server-side and cache JSON to avoid long client parses. (papaparse.com)

This plan builds on ’ point (JSON is easier to script), on ’s Google Sheets idea (publish/export CSV for live data), and ’s tip (use a JSON formatter while debugging).

Recommended Answers

All 5 Replies

Member Avatar for hericles

Are you looking for something that can parse and convert your CSV file automatically or are you happy doing the coding yourself i.e. writing the code for highcharts?
If the former, then your options maybe limited. If the latter, then, sure, you can style the heck out of it and come up with an awesome result.

Simply turning your CSV into a table won't get you far, switching it to JSON will make it easier to work with if you do intend to script the actual graphs yourself.

Member Avatar for Jon_7

I wouldn't mind styling it once (no matter how much work), but after that I'd hope that I could just update my code and have the result adjust accordingly by referencing the csv file. Is that what you're saying is the tough part?

I would think some script out there could do what Google docs could do, and then also be able to make it look nice. Is there a specific phrase I'm looking for here? I kinda don't even know where to start looking.

Thanks a ton for the response, btw. I appreciate your time.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.