Dynamic chart content

Topic: Dynamic chart content

echoes675 free asked 4 years ago

I'm building a web application in netcore2.2. My application is going to be used to monitor temperatures around the house. I'm trying to plot a line graph using data passed in using a viewmodel. Can you please advise what I need to do to get the script to accept the properties of the view model. (I have the temperature logs in an array of doubles called "ChartData" and the corresponding times in another array of strings called "ChartLabels"). I tried altering the script so that the data property is @Model.ChartLabels and labels property is @Model.ChartLabels. Here's my alter script that isn't currently working:

<!-- MDB core JavaScript -->
<script type="text/javascript" src="~/js/mdb.min.js"></script>
<script type="text/javascript">
    var ctxL = document.getElementById("lineChart").getContext('2d');
    var gradientFill = ctxL.createLinearGradient(0, 0, 0, 290);
    gradientFill.addColorStop(0, "rgba(173, 53, 186, 1)");
    gradientFill.addColorStop(1, "rgba(173, 53, 186, 0.1)");
    var myLineChart = new Chart(ctxL, {
        type: 'line',
        data: {
            labels: @Model.ChartData,
            datasets: [
                {
                    label: "Temperature Readings today",
                    data: @Model.ChartLabels,
                    backgroundColor: gradientFill,
                    borderColor: [
                        '#AD35BA',
                    ],
                    borderWidth: 2,
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(173, 53, 186, 0.1)",
                }
            ]
        },
        options: {
            responsive: true
        }
    });
</script>

Add comment

echoes675 free answered 4 years ago

0 0 Best answer

<p>I got it to work. I had to first serialise the data in my viewmodel's property before JavaScript could understand it. My now working code is as follows:</p>

<pre class="prettyprint"><code><script>
    var chartData = @Html.Raw(Json.Serialize(Model.ChartData));
    var chartLabels = @Html.Raw(Json.Serialize(Model.ChartLabels));
    var ctxL = document.getElementById("lineChart").getContext('2d');
    var myLineChart = new Chart(ctxL, {
        type: 'line',
        data: {
            labels: chartLabels,
            datasets: [
                {
                    label: "Temperature today",
                    data: chartData,
                    backgroundColor: '#AD35BA',
                    borderColor: [
                        '#AD35BA',
                    ],
                    borderWidth: 2,
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(173, 53, 186, 0.1)",
                }
            ]
        },
        options: {
            responsive: true
        }
    });
</script>
</code></pre>

Please insert min. 20 characters.

I got it to work. I had to first serialise the data in my viewmodel's property before JavaScript could understand it. My now working code is as follows:

<script>
    var chartData = @Html.Raw(Json.Serialize(Model.ChartData));
    var chartLabels = @Html.Raw(Json.Serialize(Model.ChartLabels));
    var ctxL = document.getElementById("lineChart").getContext('2d');
    var myLineChart = new Chart(ctxL, {
        type: 'line',
        data: {
            labels: chartLabels,
            datasets: [
                {
                    label: "Temperature today",
                    data: chartData,
                    backgroundColor: '#AD35BA',
                    borderColor: [
                        '#AD35BA',
                    ],
                    borderWidth: 2,
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(173, 53, 186, 0.1)",
                }
            ]
        },
        options: {
            responsive: true
        }
    });
</script>

Bartłomiej Malanowski staff commented 4 years ago

Thank you for sharing your solution!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.8.0
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

echoes675

45Support score
4Questions 2Answers 1Snippets