Créer des graphiques avec Chart.js L’utilisation de la chaîne C # pose des problèmes

J’essaie de créer des graphiques à l’aide de Chart Js dans mon application asp.net. Je récupère les données de la firebase database de code et génère la chaîne conformément à la documentation en bout de ligne. Et puis j’appelle cette méthode Web pour récupérer les données du graphique et les restituer à la page.

function LoadVarianceChart() { var data; $.ajax({ type: "POST", url: "Analysis.aspx/GetVarianceChart", data: "", contentType: "application/json; charset=utf-8", dataType: "json", success: function (r) { $("#dvVarianceChart").html(""); var obj = rd; console.log(obj); data = obj; var el = document.createElement('canvas'); $("#dvVarianceChart")[0].appendChild(el); //Fix for IE 8 if ($.browser.msie && $.browser.version == "8.0") { G_vmlCanvasManager.initElement(el); } var ctx = el.getContext('2d'); ctx.canvas.width = 300; ctx.canvas.height = 300; var userStrengthsChart; userStrengthsChart = new Chart(ctx).Bar(data); }, failure: function (response) { alert('There was an error.'); } }); } 

Voici ma méthode web c #.

  [WebMethod] public static ssortingng GetVarianceChart() { DataSet ds = Utility.ExecuteDataTable("GetAdvarienceByBrandFamily", null); VarianceChartModel bar = new VarianceChartModel(); bar.labels = ds.Tables[0].Rows[0][0].ToSsortingng().Split(','); bar.datasets = new List(); for (int i = 1; i < ds.Tables.Count; i++) { datasets dataset = new datasets(); dataset.data = Array.ConvertAll(ds.Tables[i].Rows[0][0].ToString().Split(','), decimal.Parse); dataset.label = "new"; dataset.fillColor = "rgba(220,220,220,0.5)"; dataset.highlightFill = "rgba(220,220,220,0.75)"; dataset.highlightStroke = "rgba(220,220,220,1)"; dataset.strokeColor = "rgba(220,220,220,0.8)"; bar.datasets.Add(dataset); } var serializer = new JsonSerializer(); var stringWriter = new StringWriter(); var writer = new JsonTextWriter(stringWriter); writer.QuoteName = false; serializer.Serialize(writer, bar); writer.Close(); var json = stringWriter.ToString(); return json.ToString(); } } 

Ici, ma méthode Web génère la chaîne correctement conformément à la documentation. Si j’utilise la chaîne générée de manière statique dans le graphique js, le graphique est généré correctement. Mais lorsque j’essaie de fournir la même chaîne en appelant la méthode dorsale, il me donne Uncaught TypeError: Je ne peux pas lire la propriété ‘longueur’ d’un indéfini

Je ne sais pas pourquoi il se comporte comme ça pour la même chaîne. S’agit-il d’un problème lié à la compatibilité des chaînes C # et des chaînes de script Java?

J’ai compris ce problème. Voici le code qui vous permet de créer un graphique en extrayant des données de la firebase database en utilisant asp.net.

 function LoadChart1() { var data; $.ajax({ type: "POST", url: "Analysis.aspx/GetChart1", data: "{account: '" + $("[id*=ddlAccount]").val() + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (r) { $("#dvChart").html(""); $("#dvLegend").html(""); var obj = rd; data = JSON.parse(obj); var el = document.createElement('canvas'); $("#dvChart")[0].appendChild(el); //Fix for IE 8 if ($.browser.msie && $.browser.version == "8.0") { G_vmlCanvasManager.initElement(el); } var ctx = el.getContext('2d'); ctx.canvas.width = 500; ctx.canvas.height = 500; var userStrengthsChart; userStrengthsChart = new Chart(ctx).Bar(data); }, failure: function (response) { alert('There was an error.'); } }); } 

Voici la méthode Web qui fournit des données aux graphiques.

 [WebMethod] public static ssortingng GetChart1(ssortingng account) { SqlParameter[] param = new SqlParameter[] { new SqlParameter("@account", account) }; DataSet ds = Utility.ExecuteDataTable("GetChart1", param); if (ds.Tables[0].Rows.Count != 0) { VarianceChartModel bar = new VarianceChartModel(); bar.labels = ds.Tables[0].Rows[0][0].ToSsortingng().Split(','); bar.datasets = new List(); for (int i = 1; i < ds.Tables.Count; i++) { string data = ds.Tables[i].Rows[0][0].ToString(); if (!string.IsNullOrEmpty(data)) { datasets dataset = new datasets(); dataset.data = Array.ConvertAll(data.Split(','), decimal.Parse); dataset.label = "new"; dataset.fillColor = "rgba(255, 102, 0,0.5)"; dataset.highlightFill = "rgba(255, 102, 0,0.75)"; dataset.highlightStroke = "rgba(255, 102, 0,0.50)"; dataset.strokeColor = "rgba(255, 102, 0,0.8)"; bar.datasets.Add(dataset); } } var serializer = new JsonSerializer(); var stringWriter = new StringWriter(); var writer = new JsonTextWriter(stringWriter); // writer.QuoteName = false; serializer.Serialize(writer, bar); writer.Close(); var json = stringWriter.ToString(); return json.ToString(); } else { return null; } } 
 Here is the code it worked for me.For the bar chat  ---cs file //GetDatachat for chart search data [WebMethod] public static List GetDataonclick(ssortingng datefromt, ssortingng datetot) { ssortingng publisherid = "2000021"; DataTable dt = new DataTable(); List iData = new List(); PublisherJavascriptDAL objpayout = new PublisherJavascriptDAL(); dt = objpayout.Getbarchatpayout(publisherid, datefromt, datetot); ssortingng[] columnNames = dt.Columns.Cast ().Select(x=>x.ColumnName).ToArray(); Array.Reverse(columnNames); foreach (ssortingng dc in columnNames) { List labels = new List(); List lst_dataItem_1 = new List(); for (int j = 0; j < dt.Rows.Count; j++) { if (dc == "TXdatetime") { labels.Add(dt.Rows[j]["TXdatetime"].ToString()); //iData.Add(labels); } else { lst_dataItem_1.Add(Convert.ToDouble(dt.Rows[j][dc].ToString())); } } if (dc == "TXdatetime") iData.Add(labels); else iData.Add(lst_dataItem_1); } return iData; }