[KevinMarks], [tantek], KartikPrabhu, jfoster, [aaronpk], gRegorLove_, [Lewis_Cowles], [fluffy], bengoDiscord[m] and [jeremycherfas] joined the channel
#jeremycherfas!tell [jgmac1106] I'm not sure PHP is the best language for creating graphics. I've looked at r but it seems like overkill. Creating SVGs from scratch seems way too difficult. I'd use something like Numbers but I do not want to go through manual for both data capture and storage AND image generation.
#jeremycherfasCapture and storage more or less have to manual, because I'm getting the data from a variety of places. I'm happy to create key pairs for each data point.
#jeremycherfasI wabnt to learn how best to generate the kinds of images I want from those data.
[KevinMarks] joined the channel
#[KevinMarks]Svg isn't that hard - it's like html. You can use a template model, or just write code to generate it. You have to make it xml compliant, to be standalone, but you can inline it in html files, so php works quite well.
#[KevinMarks]What kind of images are you trying to make?
#jeremycherfasTime series lines from, say, average steps per day by month.
#jeremycherfasMy thought was that I don't really need the images to be dynamic, just generate fresh each month and each year.
deathrow1 joined the channel
#Zegnetjeremycherfas, if you want to cheat, you can make it a number of empty DIV elements, give them all the same CSS, and then with PHP or JS set an explicit height on all of them.
#jeremycherfasAnd I don't want to cheat. I want to learn how to do it. My latest monthly report makes that clear to me.
#ZegnetDepends on exactly what end result you are going for. If you can just do something where the height is `$steps * 3px` it is super easy.
#jeremycherfasPeople like exist.io have to be using groovy packages to do what they do. That's all dynamic, but must be doable.
#ZegnetI ended up using https://gionkunz.github.io/chartist-js/ for my weight graph. Not doing anything fancy with animations or anything, but I did find it relatively easy to add points to the graph and have them handle drawing the lines
#ZegnetHang on, this is not supposed to be my user name!
#ZegnatAlso feel free to borrow any of the code I use on my weight chart. Most of it is actually for pulling the numbers out of the HTML table and calculating all the averages. The actual graph code is super slim.
#jeremycherfasSo do you think that it is efficient enough so that if I want a chart in each month, for example, I could just make it dynamic and limit the series from which it pulls?
#ZegnatBut yeah, Chartist is pretty easy and the results are fine. People are still impressed by my weight chart after all this time
#jeremycherfasIt's the "feeding it JSON" that's a bit of a mystery to me. I've done it with leaflet.js but in a very cargo cult way.
#jeremycherfasWeight is the one thing I don't feel any need to graph.
#jeremycherfasThe low-level nuts and bolts of things like chartist.js scare me. When they talk about installing and integrating dependencies, I get lost quickly.
#[Rose]The question is usually “do you need to understand it?“, obviously it’s a good idea, but sometimes the thing to do is to ignore that part and just use it, as that helps
#jeremycherfasHave you got it installed, zegnat, or are you using the CDN?
#ZegnatCDN. Same thing though. There is no “installing” when it comes to JavaScript or CSS files.
#ZegnatYou either drop them onto your server and add the <link> and <script> elements, or you use the ones from the CDN.
#jeremycherfasWell, if I have time I will play so that I can at least ask intelligent questions in Brighton.
#ZegnatUnless you want to get fancy, like their SASS alternative, when you want to mix their SASS with your own SASS and you need a compiler etc. I opted to skip all that. Didn’t need a full integration.
#jeremycherfasSuits me fine. I do though want to understand how to feed it data from a file rather than have the data in the HTML.
#[Rose]The trick is usually “get the data with JS, and then give it that variable”
#[Rose]I use jquery and usually just do a `$.get('/path/to/data/', function (data) {$.createChart({data: data})});`
#[Rose]Or something along those lines, the createChart bit is pseudocode, the rest is real code.
#ZegnatYep, that definitely does the trick. I only go the long way ’round because the entire graph is basically a progressive enhancement. If the JS breaks, you just get my tabular weight data ;)
#[Rose]Wow, I just checked and my brackets match. For something typed in Slack that’s amazing
#[KevinMarks]Bar and line charts are pretty easy with php or any templating language - you're calculating width and height, and you can scale in a couple of ways.
#[KevinMarks]Drawing axes and labels is usually more annoying