Mkalafut Mkalafut - 16 days ago 5
C# Question

Converting a dynamic HTML table to a google chart?

I have an ASP.NET Core website that fetches data from a model and creates a dynamic HTML table to display it on the page. I have 3 selectlists on the page that determine the filtering for the data being displayed:

<select id="Timeframe" name="Timeframe" asp-for="timeframe" asp-items="@Model.timeframes"></select>
<select id="Category" name="Category" asp-for="category" asp-items="@Model.categories"></select>
<select id="FormOption" name="FormOption" asp-for="formOption" asp-items="@Model.formOptions"></select>


The code to build the table is below. The filters determine how many rows and columns are added (and filled) to the table.

<div>
@if (Model.selectedForm.rows.Count > 0)
{
<table name="Displaytable">
<tr>
<th></th>
<th>
Forms
</th>

@foreach (var stage in Model.selectedForm.rows[0].stages)
{
<th>
@Html.DisplayFor(modelitem => stage.label)
</th>
}
<th>
TotalTime
</th>


</tr>

@foreach (var row in Model.selectedForm.rows)
{
<tr>
<th>
@Html.DisplayFor(modelItem => row.label)
</th>

<td>
@Html.DisplayFor(modelItem => row.formCount)
</td>


@foreach (var stage in row.stages)
{

<td>
@Html.DisplayFor(modelitem => stage.timespan.TotalHours)
</td>
}
<td>
@Html.DisplayFor(modelitem => row.totalTimespan.TotalHours)
</td>

</tr>

}

</table>
}

</div>


These filters are submitted with a button and change the number of rows and columns of the data (as well as the data in each column and row) according to the values of the selectlists.

Depending on the filters, I could have anywhere from 2 rows to 50 and with the exception of one of my
formOptions
, will generally have a label and a single column for data (which will translate into a single bar in Google Charts).

I already have all the data I will need for any charting coming in to the table correctly for every filter - my question is how to actually build a Google Chart based on this data, where according to the filters selected will change the charts being displayed in a similar fashion to how my table is generated?

My intent here is to have one view with the raw data in a table (that I can access to verify the data displayed in the charts is correct) and then another view displaying said data in a Google chart instead of the table I created.

Answer

First off, thanks so much WhiteHat for the answer below. I realized that this question was maybe a bit too specific in terms of what I needed done. I ended up finding a solution that fit my needs. I'll post the code below in case anyone comes along and wants to see how I solved this problem.

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

        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn("string", "Category");


            @foreach (var stage in Model.selectedForm.rows[0].stages)
        {
            @Html.Raw("data.addColumn('number', '" + stage.label + "');")
        }


            @foreach (var row in Model.selectedForm.rows)
        {
            @Html.Raw("data.addRow(['" + row.label + "'") //The first part of our row is the label - each subsequent stage will be filled in at each iteration below

            foreach (var stage in row.stages) //For each stage in the row being created...
            {

                @Html.Raw(", " + stage.timespan.TotalHours) //...Continue the HTML builder adding additional timespans to eventually...
            }

            @Html.Raw("]);\n\n") //...close it here
        }

            var options = {
                titlePosition: 'none',
                width: 1200,
                height: 400,
                legend: { position: 'top', maxLines: 3 },
                bar: { groupWidth: '75%' },
                isStacked: true
            }

            var chart = new google.visualization.BarChart(document.getElementById('Chart'));
            chart.draw(data, options);
        }

    </script>

This functions as both the dynamic chart creation and allows for the different forms to display a different number of columns.