Unable to ascertain property 'match' of undefined in asp.net MVC Morris Chart

Greetings!

I am currently in the process of building a dashboard that includes a Morris chart. The dashboard is built using ASP MVC.

Using JavaScript, I invoke a function in my controller to retrieve data.

$.get('@Url.Action("Diagram")', function (result) {
            console.log(result) #Contains the correct information
            Morris.Line({
                element: 'morris-area-chart',
                data: result,
                xkey: 'period',
                ykeys: ['ColliAantal'],
                labels: ['Colli aantal'],
                pointSize: 1.5,
                hideHover: 'auto',
                resize: true
            });

"Result" holds the necessary JSON data for the chart.

The code displayed here pertains to the controller. The scoreboard has already been defined and contains the correct data.

try
{
    List<ChartData> chartData = new List<ChartData>();
    foreach (Scorebord item in scorebord.Take(100))
    {
        chartData.Add(new ChartData(item.ColliQty, item.Datum));
    }
    var json = JsonConvert.SerializeObject(chartData); 
    return Json(json, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
    return null;
}

An interesting observation is that when I manually copy and paste the data returned by the controller during debugging directly into the JavaScript as data, it starts working suddenly!

I am hopeful that someone can assist me with this seemingly simple issue. Thank you!

Answer №1

Did you attempt to return your json variable as a string instead of an actual Json object?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh the value of a JavaScript variable on the server using a script executed on the client side

Hello, I'm working on a webpage that utilizes JavaScript to find the location of my device. I am interested in updating the variables within the JavaScript code from a script that runs on my laptop. Is this even possible? Below is the code snippet: i ...

Creating a stand-alone NPM module for a Redux store to be used in a React application

Can the Redux Store be developed as a separate npm package for a React App and then imported into it? For instance: Assuming there is a fictional React Project named reactapp. A package called reactapp-reduxstore is created containing the Redux Store, al ...

The IIS webpage encountered an error while attempting to load a file or assembly

I am faced with an issue while attempting to launch a second website on my Windows server using IIS manager. To create the second website, I duplicated and renamed the source folder of my first website, which is currently operational. The intention is to h ...

What is the most effective method for parsing a JSON document?

There are several methods to read JSON files in Node.js, such as: Utilizing the FS Library Synchronous: var fs = require('fs'); var obj = JSON.parse(fs.readFileSync('file', 'utf8')); Asynchronous: var fs = require(' ...

Discover a class located following a specific element even when they are not directly related

There is a group of elements all with the class month. Some of them also have the class cal, while only one has the class today. The goal is to locate the first element with the class cal, but only after finding the element with the class today. The chall ...

What is the reason behind C# altering the date time format when retrieving data from the database

When retrieving data from a MySQL table, the datetime column 2017-09-19 16:14:47 automatically converts to its own format like 9/19/2017 3:45:50 PM. This conversion occurs when fetching data into a DataTable and converting it to a string using the code sni ...

Add an array as a nested child within another array using node.js and JavaScript

Description: I execute a MySQL query to retrieve rows from a table > connection.query(q2,function(err,rows){...} Assuming the rows have a structure like {id:",,,", time:"..." etc:"cc"} For each row, I then query another table to fetch additional dat ...

resolving conflicts between Rails and JavaScript assets

Currently, I am facing an issue with two gems that provide JavaScript assets as they are conflicting with each other. The conflicting gems in question are the lazy_high_charts gem and the bootstrap-wysihtml5-rails gem. Initially, I only had the bootstrap ...

Modify FullCalendar: Adjust background color for agendaDay

Although this question has been posed before, the answer remains elusive. I am simply looking for a way to change the background-color of the TD to a specific range. For instance, in my calendar where time slots are structured in 15-minute intervals from ...

What is the best approach to dynamically load html table cell data into a table with changing headers in a React application?

Currently, I am in the process of developing a <table> using React version 0.14.6. This table consists of column headers that are dynamically added to the <thead> section of the table: CourseTable.js: import CourseList from './CourseList ...

Guide on incorporating CSS into a JavaScript function

Currently, I am utilizing a jQuery monthly calendar where each day is represented by a cell. When I click on a cell, I can trigger an alert message. However, I also want to modify the background color of the specific cell that was clicked. Unfortunately, ...

Issue with connecting JavaScript to HTML button

I am currently working on a 10-second countdown feature for a game using Javascript and HTML. Currently, the code runs upon page load. However, I am facing difficulty in linking it to a button so that it triggers upon clicking. ...

When the Text Changed event of the textbox within the border is triggered at row m and column in a grid

I've created a WPF Grid using code. Each cell in the grid contains a border, and within the borders are textboxes with text. I need the visibility of the text in the Textblock to change based on its contents. Whenever the text changes, the visibility ...

CodeIgniter: Redirecting Made Easy

I'm attempting to redirect to a specific page using the code below: window.location.href="'<?php echo base_url() ?>'/index.php/user/view_cart/viewCart"; However, the URL it's being sent as is: http://localhost/CI/index.php/user ...

Exploring connections among Array Objects on a Map

Here are some JSON examples of Pokemon Battles: [ { "battleID": "1", "trainers": [ { "LastName": "Ketchum", "ForeName": "Ash" }, { "LastName": "Mason", ...

The stateless components' onClick event that manages a prop within the Component

My concern lies with a stateless component named EmailItem: I aim to assign it a new prop via a function when clicked. <EmailItem key={i} onClick={// the onClick function here} emailData={email} read={false} /> The desire is for the value of the rea ...

Scroll the page only when the first radio button is clicked

After selecting a radio button with the ID "yourgoal", a div is displayed on my page. I want the page to scroll to that div only the first time a button in "yourgoal" is clicked. Below is the code I am currently using. However, I do not want the page to sc ...

Simple CSS for creating a "red alert badge" with a number count

Looking for the best way to display the popular red notification indicator with count in a consistent manner across various browsers. It seems tricky to achieve a design that looks seamless on all platforms, as different browsers interpret paddings differe ...

Executing a controller method in AngularJS when redirecting a page

I am currently working on an app using Cordova/Phonegap, Ionic, and AngularJS. One challenge I am facing is trying to call a method from a controller inside my app when redirecting to another HTML page (secondPage.html). This particular method (secondMetho ...

Public directory assets not accessible

After working extensively with Node and Angular, I realized my back-end structure needed some serious attention. In an effort to streamline my process, I decided to separate the client and server components and create a reusable skeleton for future applica ...