Monday

After the weekends of working i asked my teacher Laura how i could fix my previous problem of the barchart and donut chart not updating together. she explained to me that if i wanted to do that it would be best to put the barchart and donutchart in one component. So i did just that!

After a while i couldnt get the donut chart and the barchart to work together still so because of the time i went and i started by first making my barchart how i wanted it to be. U see my inspiration came from a datavisualisation i saw a while ago about Mike evans and i wanted to see how i could make this interactive.

So i started by asking my teacher how i could make something like this because i thought it would be to difficult and not possible for me. Vincent told me that it is which started giving me motivation again after i failed with the donut chart. He showed me an online exercise which taught me how to call an img via svelte. First i got the image in. Now i just had to figure out how to place it above the barchart.

I gave the image some styling and made the position obsolute. I also gave the image a z index higher than the chart so they could overlap

Its not perfect but its something.

Tuesday

To create some clearness i removed the donut chart from my code and changed the barchart so it would be rendered horizontaly on the y axis i also added a flex box to the main and aligned the content to the center with some css. i also removed the labels of the axis since they were hidden behind the image anyways and i found this more aesthetically pleasing.

There we go!!! finally starting to look like something.

Now it was time to do some more pretty work. I added an animation to my code

A new problem occured, When i would change players the bars from the barchart wouldnt stay the same width and they would overlap eachother

Finally after a lot and i mean ALOT of troubleshooting i finally fixed the problem.

Thursday

After this i went back to my initial idea of wanting to add a donut chart. I started by making a dropdown menu where u could select the donut chart

I created a function where the donut chart was being drawn

Then i added a legend and a title

Again its not perfect but its something. Atleast the donut chart functions and updates now after selecting the player so i was more than happy.

Sadly a new problem occured which i wasnt able to fix... You see after i would go back from the donut chart to the barchart the barchart wouldnt show up its only when i refreshed the page that the barchart would show up again. I tried everything from changing the updatechart function to changing the lifecycle hook of my code with afterupdate here's a few things i tried and none of them worked.

I added console logs to my code to see what was happening. I saw its creating donut charts even when im still in the barchart section.

I tried making it so the donut charts are only being made when selected thinking it might be a rendering issue. But still no luck sadly

After this i tried adding an async function to changeplayer and i removed the createdonutchart call in the afterupdate hook so it would only create the donut chart when the user selects it. i also added logs to see what was happening again.

Its now only creating the donut chart when the player selects it but the problem of the barchart not showing up still consists eventhough it says chart updated in the console logs :(

After this i tried putting the donut chart and barchart in different component but that was also a waste of time and didnt work. After a while i felt demotivated again and i just gave up trying to fix it considering 4-5 hours had gone past already and timing wasn't really on my side.