Отображение диаграммы с данными, полученными из Entity Framework в Controller

Question

У меня есть база с новостными статьями. Я пытаюсь создать график с датами на оси x и ценами на акции на оси y, но что-то должно быть не так с точками данных, потому что он показывает только пустой холст с заголовком / подзаголовком.

ArticleModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Data.SqlClient;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations.Schema;
using System.ComponentModel.DataAnnotations;

namespace SPScraper
{
    [Table("Article")]
    public class Article 
    {
        private string id;
        private string header;
        private string image;
        private string url;
        private string author;
        private string date;
        private string content;
        private decimal? stockPriceOpen;
        private decimal? stockPriceClose;

        public virtual string Id {
            get { return id; }
            set { id = value; }
        }
        public virtual string Header {
            get { return header; }
            set { header = value; }
        }
        public virtual string Image {
            get { return image; }
            set { image = value; }
        }
        public virtual string Url {
            get { return url; }
            set { url = value; }
        }


        public virtual string Author {
            get { return author; }
            set { author = value; }
        }
        public virtual string Date
        {
            get { return date;  }
            set { date = value; }
        }
        public virtual string Content
        {
            get { return content; }
            set { content = value; }
        }

        public virtual decimal? StockPriceOpen {
            get { return stockPriceOpen; }
            set { stockPriceOpen = value;  }
        }

        public virtual decimal? StockPriceClose
        {
            get { return stockPriceClose; }
            set { stockPriceClose = value; }
        }

    }
}

ArticlesController.cs

 public ActionResult Timeline()
    {
        var articleQuery = from a in artDb.dbArticle
                           select new { a.Date, a.StockPriceClose };

        List<DataPoint> dataPoints = new List<DataPoint>();


        foreach (var item in articleQuery)
        {
            double stockPriceClose = double.Parse(item.StockPriceClose.ToString());
            DateTime date = Convert.ToDateTime(item.Date);

            new DataPoint(date, stockPriceClose);
        }             

        ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);
        return View();
    }
    JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };

DataPointModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization;

namespace SPScraperWeb.Models
{
    [DataContract]
    public class DataPoint
    {
        public DataPoint(DateTime x, double y)
        {
            this.X = x;
            this.Y = y;
        }

        //Explicitly setting the name to be used while serializing to JSON.
        [DataMember(Name = "x")]
        public Nullable<DateTime> X = null;

        //Explicitly setting the name to be used while serializing to JSON.
        [DataMember(Name = "y")]
        public Nullable<double> Y = null;
    }
}

Timeline.cshtml

    @model IEnumerable<SPScraper.Article>

@{
    ViewBag.Title = "Timeline";
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<h2>@Html.ActionLink("Articles", "Index") | @Html.ActionLink("Timeline", "Timeline")</h2>

<div id="chartContainer">

    <script type="text/javascript">

        window.onload =  $(function(result) {
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "light2",
                zoomEnabled: true,
                animationEnabled: true,
                title: {
                    text: "Facebook Stock Price by Article"
                },
                subtitles: [
                {
                    text: "Try Zooming and Panning"
                }
                ],
                data: [
                {
                    type: "line", 
                    dataPoints: @Html.Raw(ViewBag.DataPoints),
                }]
            });
            chart.render();
        });
    </script>
</div>

Пустой холст

Answer 1

Вы никогда не добавляли его в коллекцию

см. Ниже

public ActionResult Timeline()
{
    var articleQuery = from a in artDb.dbArticle
                       select new { a.Date, a.StockPriceClose };

    List<DataPoint> dataPoints = new List<DataPoint>();


    foreach (var item in articleQuery)
    {
        double stockPriceClose = double.Parse(item.StockPriceClose.ToString());
        DateTime date = Convert.ToDateTime(item.Date);

        **
        var dataPoint =  new DataPoint(date, stockPriceClose);
        dataPoints.add(dataPoint )
        **
    }             

    ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);
    return View();
}

Answer 2

Ваш код использует объект viewbag в качестве объекта json, но на самом деле это строка, JsonConvert.SerializeObject тип возвращаемого значения - строка, которую вы можете проверить в документации и просмотреть тип возвращаемого значения: строковое представление объекта в формате JSON.

    ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);

это будет строка, вам нужно проанализировать эту строку для объекта JSON, Вы можете использовать функцию JSON.parse () для этого.

 dataPoints: JSON.parse('@Html.Raw(ViewBag.DataPoints)')