update html graph each round

[Cam Kormylo]

Hello - 

I have an experiment with one risky asset that starts at $100 and moves by some percent each round based on a random draw from a normal distribution.

I am trying to create a line graph that updates based on each price movement every round (so round 1 graph would have starting price at x = 0 and new price at x = 1; round 2 graph would have starting price, round 1 price, and round2 price at x = 2). In the settings file, I have a participant field for every round's new price. I wasn't sure if html could read in participant fields so I also have the prices as player fields as you'll see below. My code in the init file looks like (simplified for this problem): 

class Player (BasePlayer):

     r1 = models.FloatField()

     r2 = models.FloatField()

def set_values(player):

     asset = round(float(np.random.normal(10,10,1)),4)

     if subsession.round_number == 1:

          participant = player.participant

          participant.r1 = round(100*asset, 3)

     elif subsession.round_number == 2:

          participant = player.participant

          participant.r2 = round(participant.r1*asset, 3)

          player.r1 = participant.r1

          player.r2 = participant.r2

class Results(Page):

     def vars_for_template(player: Player):

          set_values(player)

Meanwhile my html code looks like: 

{{ block title }} Results {{ endblock }}

{{ block content }}

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

{{ if subsession.round_number == 1 }}

<script>
var chart= new CanvasJS.Chart("chartContainer", {
title:{
text: "Asset Price"
},

axisX: {
lineThickness: 2,
},

data: [
{
type: "line",

dataPoints: [

{ x: 0, y: 100 },
{ x: 1, y: {{player.r1}} }
]
}
]
});
chart.render();
</script>

{{ endif }}

{{ if subsession.round_number == 2 }}

<script>
var chart= new CanvasJS.Chart("chartContainer", {
title:{
text: "Asset Price"
},

axisX: {
lineThickness: 2,
},

data: [
{
type: "line",

dataPoints: [

{ x: 0, y: 100 },
{ x: 1, y: {{player.r1}} },
{ x: 2, y: {{ player.r2 }}
]
}
]
});
chart.render();
</script>

{{ endif }}

<p>{{ next_button }}</p>

{{ endblock }}

I got the base html/JS code from the following link: http://jsfiddle.net/canvasjs/bqwtn1d7/

Right now, there's an empty space in my output where the graph should be but no graph, just blank. Any ideas would be greatly appreciated. 

[Chris @ oTree]

Use your browser’s inspector and javascript console to view source and see if there are errors. 

Sent from my phone

On Jul 30, 2021, at 10:51 AM, Cam Kormylo <ckor...@vt.edu> wrote:

Hello - 

--
You received this message because you are subscribed to the Google Groups "oTree help & discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to otree+un...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/004039ae-49b1-484d-a13d-4a558415799bn%40googlegroups.com.

[Cam Kormylo]

Thank you. I was able to solve the problem. I didn't realize that CanvasJS was a separate service. I switched over to Google Charts and it works perfectly. 

[Chris @ oTree]

To use CanvasJS or any 3rd party library you need to load the library with a <script> tag with the URL to the library’s source code before using it. 

Sent from my phone

On Jul 30, 2021, at 12:27 PM, Cam Kormylo <ckor...@vt.edu> wrote:

Thank you. I was able to solve the problem. I didn't realize that CanvasJS was a separate service. I switched over to Google Charts and it works perfectly. 

To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/4d8184f2-e9ba-463b-b720-7a8ca9cdc219n%40googlegroups.com.