Wrong data showing in Plotly.js graph

Question

I'm trying to use data from my code behind to display a plot.ly graph on my webpage. Here is the code for the html:

 <div id="mydiv" style="width: 480px; height: 400px;">
    <script> 
        var fi = '<%= fi %>';

        //define different lines on the graph
        var freeze = {
            x: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
            y: fi,
            mode: 'lines+markers',
            name: 'Sum FI'
        };

        var data = [freeze];

        var layout = {
            title: 'Freeze and Thaw Indexes',
            xaxis: {
                title: 'Date'
            },
            yaxis: {
                title: 'Sum'
            }
        };

        Plotly.newPlot('mydiv', data, layout);
    </script>
</div>

If I add an alert(fi) to the page, I see that

fi= [2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

which is exactly what it should be. However, the graph that is showing up is as if

fi=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

or, in other words, the exact same as what I set for my x. Since I know I'm getting the correct variable from the code behind because when I check it with an alert, it's exactly what it's supposed to be, I really don't know why the graph is completely different. If anyone has any thoughts as to how to fix this, I'd really appreciate it!

Answer 1

Have you tried without apostrophes?

var fi = <%= fi %>;