Multiple JSON objects for multi series chart

Question

I am using the Google.DataTable wrapper by @zoranmax. I can get a single line chart to work fine. What I want to do is display multiple lines.

When I return the JSON to AJAX call to create the chart I am told that I have no columns in the table.

The C# return produces a list of string that is indexed, so for each series, there is a 0,1,2 etc.

Here is an example of the JSON output JSON Output, there are 20 of these arrays that are returned from the C# code in one hit to AJAX call.

As you can see the JSON validates, but it just won't work.

The AJAX call:

 $.ajax({
            url: 'ProjectCharts/GetMultiChartData',
            datatype: 'json',
            type: 'get',
            async: false,
            data: { section: section, uid: uid, from: from, to: to },
            contentType: 'application/json; charset=utf-8',
            success: function (d) {
                parsedData = $.parseJSON(d);
                console.log(parsedData);              
                var data = new google.visualization.DataTable(parsedData);
                var chart = new google.visualization.LineChart(document.getElementById('chart'));
                var options = multiLineChartOptions();
                chart.draw(data, options);          

            },
            error: function () {
                alert("Error");
            }
        });

The C# part:

 public string CreateJsonMultiChartDataTable(string serial, string guid, string datefrom, string dateto)
    {
        var serials = _context.LogTagRawData.Where(x => x.ProjectGuid == guid).Select(x => x.SerialNumber).Distinct().ToList();
        var projectUid = guid;
        var from = datefrom;
        var to = dateto;

        List<string> multiDt = new List<string>();   

        try
        {
            foreach (var s in serials)
            {                    
                var data = GetChartDataFromSqlServer(s, projectUid, from, to);
                var dt = new Google.DataTable.Net.Wrapper.DataTable();
                dt.AddColumn(new Google.DataTable.Net.Wrapper.Column(Google.DataTable.Net.Wrapper.ColumnType.Datetime, "Date", "Date"));
                dt.AddColumn(new Google.DataTable.Net.Wrapper.Column(Google.DataTable.Net.Wrapper.ColumnType.Number, "Data", "Data"));



                foreach (var item in data)
                {
                    Google.DataTable.Net.Wrapper.Row r = dt.NewRow();
                    r.AddCellRange(new Google.DataTable.Net.Wrapper.Cell[]
                    {
                        new Google.DataTable.Net.Wrapper.Cell(Convert.ToDateTime(item.ReadingDate)),
                        new Google.DataTable.Net.Wrapper.Cell(item.ReadingValue)
                    });

                    dt.AddRow(r);
                }

                multiDt.Add(dt.GetJson());
            }

        }
        catch (Exception ex)
        {
            var m = ex.Message;
        }

        var sb = new StringBuilder();
        sb.Append("[");
        foreach(var i in multiDt)
        {
            sb.Append("[");
            sb.Append(i);
            sb.Append("],");
        }

        sb.Append("]");

        string xx = sb.ToString();
        int yy = xx.LastIndexOf(',');
        xx = xx.Remove(yy, 1);          
        return xx;
    }

JSON call from AJAX

 public JsonResult GetMultiChartData(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).AddMinutes(1).ToString("yyyy-MM-dd HH:mm:ss");

            var g = new GetChartData(_context, _configuration);
            var items = g.CreateJsonMultiChartDataTable(serial, uid, dateFrom, dateTo);
            var deserialisedJsonData = JsonConvert.DeserializeObject(items);

            return Json(JsonConvert.SerializeObject(deserialisedJsonData, Formatting.Indented));
        }

I think there is too much data. I will update this later with a smaller set. — The OrangeGoblin, Mar 11 '19 at 12:43
I have added two arrays at https://jsoneditoronline.org/?id=a9f1de8b128d4b7abc18aee37709786b — The OrangeGoblin, Mar 11 '19 at 19:10
I have deserialised and reserialised the data to get the array of arrays. — The OrangeGoblin, Mar 11 '19 at 19:11
I have tested the ouput for a single line chart and it works fine. I just cat get it to add the multiple data sets. — The OrangeGoblin, Mar 11 '19 at 19:12
the google data table can only accept one json data set, to draw multiple lines, add additional columns -- the first column is for the x-axis, each additional column the y-axis -- use `null` for y-axis columns that do not coincide with a specific x-axis value -- another option would be to create multiple data tables, then combine them using the [join()](https://developers.google.com/chart/interactive/docs/reference#google_visualization_data_join) method, but obviously, this would impact performance... — WhiteHat, Mar 11 '19 at 19:55
You answered a question for me a while ago `https://stackoverflow.com/questions/54503147/dynamic-creation-of-multi-series-google-line-chart-with-differing-datetime-series` and the performance for more than 10 series is terrible. So I have used the data table wrapper to increase the performance. I now get an array of arrays from the wrapper. I suppose, how do I get an array of arrays into the chart. — The OrangeGoblin, Mar 16 '19 at 13:57

Multiple JSON objects for multi series chart

0 Answers0