We Keep Coding

JQuery loop slowing Google Chart performance

I have a google chart, that generally is very slow (over 5 minutes) and sometimes just crashes depending on the number of series I need to show. If I have one series it takes around 10 seconds, but if I add say 20 series, it will take several minutes any more than that and the browser dies.
Each series has around 8,000 rows from the JSON. I have checked and tested the code and the loop in the chart code is killing it.
My chart code is as follows:
function drawMultiLineChart() {
var section = $('#LocationNameDdl :selected').val();
var uid = '#guid';
var from = $('#dateFrom').val();
var to = $('#dateTo').val();
var parsedData = "";
var dName = "";
var colIndex = "";
var result = "";
var rowIndex = "";
$.ajax({
url: 'ProjectCharts/GetChartDataBySection',
datatype: 'json',
type: 'get',
async: false,
data: { section: section, uid: uid, from: from, to: to },
contentType: 'application/json; charset=utf-8',
success: function (d) {
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
parsedData = $.parseJSON(d);
dName = new google.visualization.DataTable();
dName.addColumn('date', 'Date');
$.each(parsedData, function (key, value) {
colIndex = dName.addColumn('number', 'Serial: ' + key);
result = $.parseJSON(value);
$.each(result, function (k, v) {
rowIndex = dName.addRow();
dName.setValue(rowIndex, 0, new Date(v.ReadingDate));
dName.setValue(rowIndex, colIndex, Number(v.ReadingValue));
});
});
var options = multiLineChartOptions();
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(dName, options);
});
},
error: function () {
alert("Error");
}
});
};
I call the JSON from the following code, this is fine and performs very quickly:
public async Task<JsonResult> GetJsonChartData(string serial, string uid, string from, string to)
{
var dateFrom = Convert.ToDateTime(from).ToString("yyyy-MM-dd HH:mm:ss");
var dateTo = Convert.ToDateTime(to).ToString("yyyy-MM-dd HH:mm:ss");
var g = new GetChartData(_configuration);
List<ChartDataModel> items = await Task.Run(() => g.GetChartDataFromSqlServer(serial, uid, dateFrom, dateTo));
return Json(JsonConvert.SerializeObject(items, Formatting.Indented));
}
The JSON:
[{"LoggerId":"1000651443","ReadingDate":"2018-12-05 00:03:03, "ReadingValue":"12.6", "Tooltip":"Someinfo"},
{"LoggerId":"1000651447","ReadingDate":"2018-12-05 00:04:03, "ReadingValue":"12.7", "Tooltip":"Someinfo"}]
[{"LoggerId":"1000651444","ReadingDate":"2018-12-05 00:03:05, "ReadingValue":"12.9", "Tooltip":"Someinfo"},
{"LoggerId":"1000651445","ReadingDate":"2018-12-05 00:03:07, "ReadingValue":"14.9", "Tooltip":"Someinfo"}]
[{"LoggerId":"1000651446","ReadingDate":"2018-12-05 00:03:17, "ReadingValue":"13.6", "Tooltip":"Someinfo"},
{"LoggerId":"1000651446","ReadingDate":"2018-12-05 00:04:17, "ReadingValue":"43.6", "Tooltip":"Someinfo"}]
How can I improve not only the performance but the load time?
Should I be using a different charting tool?
Can I process the data server side that will allow for increased performance?

Receive JSON in MVC controller

This is my first time using JSON and I'm having a bit of trouble parsing and using it in my controller. I already tried these solutions Unable to successfully receive JSON data to .NET MVC Controller, How to receive JSON as an MVC 5 action method parameter, but none of them made it for me.
I'm retrieving some data from my html and sending the arrays through ajax to the controller in the following code:
JQuery:
var values = $('ul#values li').map(function() {
return this.textContent;
}).get()
var lines = $('ul#lines li').map(function() {
return {
Column: this.textContent,
Table: this.getAttribute("name")
};
}).get();
var columns = $('ul#lines li').map(function() {
return {
Column: this.textContent,
Table: this.getAttribute("name")
};
}).get();
var filters = $('ul#filters li.panel').map(function () {
var n = this.getAttribute("name");
var c = $(this).children()[1].textContent;
var r = $(this).find("li input:checked").map(function() {
return this.parentNode.textContent;
}).get();
if (r.length === 0)
return null;
else
return { table: n, name:c, vals: r };
}).get();
$.ajax({
type: "POST",
url: "/Home/PivotTable",
dataType: "json",
traditional: true,
data: {
indicators: values,
lines: JSON.stringify(lines) ,
columns: JSON.stringify(columns),
filters: JSON.stringify(filters)
},
success: function (data) {
alert(data.s, data.l);
}
});
And this is the form data being posted:
indicators: Taxa Mensal de inflação
lines:[{"Column":" Base","Table":"D_Base"}]
columns:[{"col":" Trimestre","table":"D_Calendario"}]
filters:[{"table":"D_PF_ClasseProdutos","name":" Código","vals":[" 22"," 23"]}]
And receiving the data in the controller where I need to access the data:
public JsonResult PivotTable(string[] indicators, Lines[] lines, object[] columns, object[] filters)
{
string sa = indicators[0];
var l = lines;
var col = columns;
var fil = filters;
var result = new { s = sa, l=l[0].Column};
return Json(result, JsonRequestBehavior.AllowGet);
}
public class Lines
{
public string Column { get; set; }
public string Table { get; set; }
}
I tried binding lines to an object, like the solution in one of the links, but got
NullRefrenceException was unhandled by usercode
While the other parameters receive the appropriate
data, but i can´t access the properties of the object.
What am I doing wrong, and how can i parse the data or bind it to an object?

You can try to use Json.NET library which allows you to serialize and deserialize.
Pass your params as string and do the following:
Lines[] m = JsonConvert.DeserializeObject<Lines>(lines);

XML Field in SQL

I have a method which serializes an object, into a SQL Server XML field. I see the XML in SQL server in Managmenet Studio, and now I need to display that in a HTML page.
I use an AJax function calling into a WebMethod, which calls a stored procedure as follows:
using (conn){
using (SqlCommand cmd = new SqlCommand()){
conn.Open();
cmd.CommandText = "GetMessage_Sel";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("#messageId", SqlDbType.VarChar, 50).Value = str;
cmd.Connection = conn;
try{
rdr = cmd.ExecuteReader();
if (rdr.HasRows){
while (rdr.Read()){
returnValue1 = rdr.GetString(0);
returnValue2 = rdr.GetString(1);
}
}
else{
Console.WriteLine("No rows found.");
}
rdr.Close();
}
catch (Exception err){
// handle the error
//messageInsert = false;
}
finally{
conn.Close();
}
}
}
return new string[] {returnValue1,returnValue2};
the ajax is therefore set up as follows:
$('.view-details').click(function (e) {
e.preventDefault();
$('#ticket-id').text("Ticket id: " + $(this).closest('tr').children().eq(1).html());
$.ajax({
type: "POST",
url: "Default.aspx/PopulatePopUp",
cache: false,
data: "{'arg':'" + $(this).closest('tr').children().eq(1).html() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg)
{
$("#CompleteMessage").text(msg.d[0]);
$("#lblaka").text(msg.d[1]);
}
});
}
so #lblaka displays the entire XML message, but i need to break this down into a more readable manner. So eithe in my WebMethod or the Ajax function, how do i iterate through the rdr.GetString(1), so something like this
foreach (var item in rdr.GetString(1)) {
string 1 = xml node value 1 ..... etc
}
EDIT:
Here is an example of the XML being stored.
<Person xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<AKA>
<string>Name 1</string>
<string>Name 2</string>
</AKA>
<Countries>
<string>USA</string>
<string>UK</string>
</Countries>
<Names>
<string>Name 1</string>
<string>Name 2</string>
</Names>
<Gender>Male</Gender>
</Person>

Here is how you could do it with jQuery:
declare this function:
function GetNestedElements(aThis, name) {
$(aThis).find(name).each(function(index){
$("#lblaka").append('<span>'+ name +' : ');
$(this).find('string').each(function(index){
$("#lblaka").append($(this));
});
$("#lblaka").append('</span><br/>');
});
}
Use this in your success call:
var xml = $.parseXML(msg),
$xml = $( xml );
$xml.find('Person').each(function(index){
GetNestedElements(this, 'AKA');
GetNestedElements(this, 'Countries');
GetNestedElements(this, 'Names');
var gender = $(this).find('Gender').text();
$("#lblaka").append('<span>Gender : ' + gender + '</span><br/>');
});
Please see this jsFiddle for a working version (select 'Show Person' to view it):
http://jsfiddle.net/MZ5Xs/2/

If its pure XLM in your SQL string you could load the string into and XDocument like so and query using linq to get your list to loop over.
XDocument xDoc = XDocument.Parse(rdr.GetString(1));
var query = xDoc.Descendants("AKA").Elements("string").ToList();
//If you want to add them to an Array
string[] array = new string[query.Count() -1];
int i = 0
// this will add the values Name 1 and Name 2 to an array
foreach (var element in query)
{
array[i] = element.Value;
i++;
}

Consume ASMX service using Sencha 2

I am just begining to learn Sencha.
I have an asmx that returns a List so the xml looks like;
<Result>
<string>One</string>
<string>Two><string>
</Results>
Now all I want to do is show that in a List.
So my Sench code looks like;
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
proxy: {
type: 'ajax',
url: 'http://localhost:81/MyASMX.asmx/Test'
}
});
Ext.application({
name: 'Sencha',
launch: function () {
Ext.create('Ext.NestedList', {
fullscreen: true,
store: treeStore,
detailCard: {
html: 'You are viewing the detail card!'
}
});
}
});
But I get an empty list with a title bar that is also empty.

With .Asmx you can also bind xml to your treestore
here is the code that might be help you
function BindData(dataxml)
{
dataxml = dataxml.replace(/>/g, ">");
dataxml = dataxml.replace(/</g, "<");
var doc;
if (window.ActiveXObject) { //IE
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
doc.loadXML(dataxml);
} else { //Mozilla
var doc = new DOMParser().parseFromString(dataxml, "text/xml");
}
var store = new Ext.getStore('treestore');
store.removeAll();
var DataLen = doc.getElementsByTagName('FirstNode').length;
for (var i = 0; i < DataLen; i++) {
var arrnodename = doc.getElementsByTagName('nodeName')[i].firstChild.nodeValue.replace(/\"/g, '');
var arrnodename2 = doc.getElementsByTagName('nodeName2')[i].firstChild.nodeValue.replace(/\"/g, '');
store.add({ C1: arrnodename[0], C2: arrnodename2[0]});
}
}

How to retrieve the result of javascript function in the serverside?

I have javascript function return array like this:
<script type="text/javascript">
function looping() {
var column_num = 1;
var array = [];
$("#columns ul").not("#column1").each(function() {
var ulId = $(this).attr("id");
var ulClass = $(this).attr("class");
if (ulId != undefined && ulClass != undefined) {
var order = -1;
column_num++;
$("li", $(this)).each(function() {
var liId = $(this).attr("id");
var liClass = $(this).attr("class");
if (liId != undefined && liClass != undefined) {
order++;
var result = liId + "|" + liClass + "|" + column_num + "|" + order;
array.push(result);
//alert(array[0]);
}
});
}
});
return array;
}
</script>
How can I retrieve the result in another array in my code behind .cs in button click event?

The only way i see is send result using POST or GET AJAX request.
$.get("/server/page.aspx", { looping: looping() });
On ServerSide do:
var array = Request.Params["looping"];

Store the array in a hidden field <input type="hidden" name="hidfld" id="hidfld" /> inside your form.
document.getElementById("hidfld").value = array;
On the serverside, use the hidden field's name to retrieve the array