Flot chart only displaying first series data

Question

I'm using flot and with the JSON returned, and the initialzation provided, only the first series is visible on the chart, however, the legend displays all 3 series labels. Any Idea what I'm doing wrong?

var data = [];

    function onDataReceived(seriesData) {

        var options = {
            series: { stack: false,
                lines: { show: true, steps: false },
                bars: { show: false, barWidth: 0.5, align: 'center', horizontal: true },
                points: { show: true, radius: 3, symbol: 'circle' }
            },
            yaxis: { show: true, tickLength: 0 },
            xaxis: { tickSize: [1, "month"], tickLength: 0, mode: 'time', timeformat: '%b %y' },
            legend: { show: true, container: $('#@(ctlId)chartLegend'), noColumns: 3 },
            grid: { borderWidth: 0, hoverable: true, clickable: true }

        };


        var p = $.plot($('#@(ctlId)'), seriesData.seriesData, options);

And My MVC Handler:

return Json(new
        {
            axisNames = new List<string[]>() { },
            seriesData = new[]
        {
            new {
            color = "#e17009",
            label = "RN",
            data = new List<string[]>() {
                new string[] {DateTime.Parse("7/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "4.2"},
                new string[] {DateTime.Parse("8/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "4.8"},
                new string[] {DateTime.Parse("9/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.5"},
                new string[] {DateTime.Parse("10/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "5.0"},
                new string[] {DateTime.Parse("11/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.6"}
                }
            },
            new {
            color = "#ff0000",
            label = "RA",
            data = new List<string[]>() {
                new string[] {DateTime.Parse("7/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.2"},
                new string[] {DateTime.Parse("8/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.8"},
                new string[] {DateTime.Parse("9/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.5"},
                new string[] {DateTime.Parse("10/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.0"},
                new string[] {DateTime.Parse("11/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.6"}
                }
            }
            ,
            new {
            color = "#5c9ccc",
            label = "RA",
            data = new List<string[]>() {
                new string[] {DateTime.Parse("7/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.2"},
                new string[] {DateTime.Parse("8/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.8"},
                new string[] {DateTime.Parse("9/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.5"},
                new string[] {DateTime.Parse("10/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "1.0"},
                new string[] {DateTime.Parse("11/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.4"}
                }
            }
        }
        },
        JsonRequestBehavior.AllowGet);

Answer 1

I finally got this worked out. Flot does not seem to want to render more than one series with the use of the stack: false option when it is set to false and you are also referencing the jquery.flot.stack.js plugin. Removing the stack attribute in the code below resolved my issue. If you are not referencing the stack plugin, you can keep the stack: false attribute and it will display the additional series properly as well. Hope it helps someone.

The returned JSON was correct.

var data = [];

function onDataReceived(seriesData) {

    var options = {
        series: { 
            lines: { show: true, steps: false },
            bars: { show: false, barWidth: 0.5, align: 'center', horizontal: true },
            points: { show: true, radius: 3, symbol: 'circle' }
        },
        yaxis: { show: true, tickLength: 0 },
        xaxis: { tickSize: [1, "month"], tickLength: 0, mode: 'time', timeformat: '%b %y' },
        legend: { show: true, container: $('#@(ctlId)chartLegend'), noColumns: 3 },
        grid: { borderWidth: 0, hoverable: true, clickable: true }

    };


    var p = $.plot($('#@(ctlId)'), seriesData.seriesData, options);