LineChart not updating after ajax form submission

[Jas M]

Hi all,

I've got a form I'm submitting via ajax and saving the data out to a database.

The linechart I'm using is drawing just fine initially, but when I repopulate the object with the new data from the database, the chart doesn't actually draw it.  I can view the source and the data columns are there, but the chart just isn't picking up the new data for some reason when I call drawChart again after the form is submitted.  Any ideas?

    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.DataTable();

            data.addColumn({ type: 'string', role: 'domain' }, 'Date Added');
            @foreach (Market mkt in markets)
            {
                @:data.addColumn('number', '@mkt.MarketCode');
            }

            var opt = { weekday: "short", year: "2-digit", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: true };
            @foreach (Strength str in strengths)
            {
                @:data.addRow([new Date("@str.DateRecorded").toLocaleDateString('en-US', opt), @str.UsdStrength, @str.CadStrength, @str.EurStrength, @str.GbpStrength, @str.ChfStrength, @str.JpyStrength, @str.AudStrength, @str.NzdStrength]);
            }

            var vticks = [];
            for (var i = -7; i < 8; i++) {
                vticks.push(i);
            }

            var options = {
                title: 'Chart Interval: @selectedTF',
                focusTarget: 'category',
                width: 650,
                height: 400,
                legend: { position: 'top' },
                chartArea: {
                    left: 25,
                    top: 60,
                    right: 10,
                    bottom: 60,
                    width: '100%',
                    height: '100%'
                },
                vAxis: {
                    viewWindow: {
                        min: -7,
                        max: 7
                    },
                    ticks: vticks
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));

            chart.draw(data, options);
        }
    </script>

    <script>

        function RefreshAndReset() {
            alert("resetting");
            document.getElementById("frmStrength").reset();
            updateStrengths();
            drawChart();
            alert("done");
        };

        function SubmitStrengths (btn) {
            if (!confirm('You sure you want to save these strength numbers?')) {
                return false;
            }

            var $form = $(btn).parents("#frmStrength");

            $.ajax({
                type: "POST",
                url: $form.attr('action'),
                data: $form.serialize(),
                error: function (xhr, status, error) {
                    alert("error:" + error);
                },
                success: function (response) {
                    RefreshAndReset();
                    alert("Success!");

                }
            });
        }

    </script>