multiple line charts with different data points

[MsBugKiller]

I can successfully draw 2 lines with this data:[{"Date":"04/16","13-022113-01":11.11},{"Date":"04/24","13-022113-01":5.51},{"Date":"05/01","13-022113-01":5.19},{"Date":"05/14","13-022113-01":5.07,"13-020866-01":246.46},{"Date":"05/18","13-022113-01":5.56,"13-020866-01":249.82},{"Date":"05/19","13-022113-01":5.23,"13-020866-01":1268.8},{"Date":"06/03","13-022113-01":3.66,"13-020866-01":166.01},{"Date":"06/09","13-022113-01":3.55,"13-020866-01":161.98},{"Date":"06/16","13-022113-01":3.65,"13-020866-01":161.05}] 

 

However, I don't always have 2 items for each date.  how can I draw them.  Here's the real data with different numbers of items: 

[{"Date":"04/16","13-022113-01":11.11,"13-022113-01":37.65,"13-022113-01":5.69},"Date":"04/24","13-022113-01":5.51,"13-022113-01":5.88},"Date":"05/01","13-022113-01":5.19},"Date":"05/14","13-022113-01":5.07,"13-020866-01":246.46,"13-020866-01":234.5},"Date":"05/18","13-022113-01":5.56,"13-020866-01":249.82,"13-020866-01":247.31},"Date":"05/19","13-022113-01":5.23,"13-020866-01":1268.8,"13-020866-01":243.17},"Date":"06/03","13-022113-01":3.66,"13-020866-01":166.01,"13-020866-01":166.63},"Date":"06/09","13-022113-01":3.55,"13-020866-01":161.98,"13-020866-01":161.3},"Date":"06/16","13-022113-01":3.65,"13-022113-01":3.52,"13-022113-01":3.56,"13-020866-01":161.05,"13-020866-01":162.18}]

Here's my code:

 

<script type="text/javascript">

    var chart1 = new cfx.Chart();

    var multiplePerformanceChart = new cfx.Chart();

    var createdSP = false;

    var createdMP = false;

    var items;

    function loadChart() {

        chart1.setGallery(cfx.Gallery.Lines);

        var titles = chart1.getTitles();

        var title = new cfx.TitleDockable();

        title.setText($("#orderNumberToLookup").val());

        titles.clear();

        titles.add(title);

        chart1.getAxisY().getTitle().setText("processing time(min)");

        chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date);

        chart1.getAxisX().getLabelsFormat().setCustomFormat("MMM;MMM/dd");

        $.ajax({

            type: 'POST',

            url: '@Url.Action("GetPerformanceByDateRange", "AdminReports")',

            data: JSON.stringify({ sFromDate: $("#fromDatepicker").val(), sToDate: $("#toDatepicker").val(), sDrawingTemplate: $("#drawingTemplateToLookup").val(), sPartToCreate: $("#partsToCreateLookup").val(), sOutputFormat: $("#outputFormatToLookup").val(), sOrderNumber: $("#orderNumberToLookup").val() }),

            dataType: 'json',

            contentType: 'application/json; charset=utf-8',

            cache: false,

            async: false,

            success: function (response) {

                var returnedData = JSON.parse(response);

                chart1.setDataSource(returnedData);

            },

            error: function (jqXHR, textStatus, errorThrown) {

                alert(errorThrown);

            }

        });

        if (createdSP == false) {

            var divHolder = document.getElementById('ChartDiv');

            chart1.create(divHolder);

            createdSP = true;

        }

        else {

            chart1.update();

        }

    };

    function loadMultiplePerformanceChart() {

        multiplePerformanceChart.setGallery(cfx.Gallery.Lines);

        var titles = multiplePerformanceChart.getTitles();

        var title = new cfx.TitleDockable();

        title.setText($("#orderNumbersToLookup").val());

        titles.clear();

        titles.add(title);

        

        multiplePerformanceChart.getAxisY().getTitle().setText("processing time(min)");

        multiplePerformanceChart.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date);

        multiplePerformanceChart.getAxisX().getLabelsFormat().setCustomFormat("MMM;MMM/dd");

        $.ajax({

            type: 'POST',

            url: '@Url.Action("GetMultiplePerformanceByDateRange", "AdminReports")',

            data: JSON.stringify({ sFromDate: $("#fromDatepicker1").val(), sToDate: $("#toDatepicker1").val(), sDrawingTemplate: $("#drawingTemplateToLookup1").val(), sPartToCreate: $("#partsToCreateLookup1").val(), sOutputFormat: $("#outputFormatToLookup1").val(), sOrderNumbers: $("#orderNumbersToLookup").val() }),

            dataType: 'json',

            contentType: 'application/json; charset=utf-8',

            cache: false,

            async: false,

            success: function (response) {

                var returnedData = JSON.parse(response);

                multiplePerformanceChart.setDataSource(returnedData);

            },

            error: function (jqXHR, textStatus, errorThrown) {

                alert(errorThrown);

            }

        });

        if (createdMP == false) {

            var divHolder = document.getElementById('MultiplePerformanceChartDiv');

            multiplePerformanceChart.create(divHolder);

            createdMP = true;

        }

        else {

            multiplePerformanceChart.update();

        }

    }

    $(document).ready(function () {

        $(function () {

            $("#getMultiplePerformances").click(function () {

                loadMultiplePerformanceChart();

            });

            $("#getSinglePerformance").click(function () {

                loadChart();

            });

            $("#accordion").accordion({

                heightStyle: "content",

                collapsible: true

            });

            $("#fromDatepicker").datepicker();

            $("#toDatepicker").datepicker();

            $("#fromDatepicker1").datepicker();

            $("#toDatepicker1").datepicker();

//            loadChart();

//            loadMultiplePerformanceChart();

        });

    });

</script>

<div id="accordion" >

    <h3>

          Show single order performance by date range</h3>

    <div id="ShowSinglePerformanceByDateRange">

@*    @using (Html.BeginForm("ShowPerformanceByDateRange", "AdminReports", FormMethod.Get))

    {*@

        <div class="span6 " id ="MSDInput">

            @Html.ValidationSummary(true)

            <div class="row-fluid">

                <label class="span4"  >Order Number:</label>

                @Html.TextBoxFor(m => m.OrderNumberToLookup, new { id = "orderNumberToLookup", type = "text", style = "margin-top:10px" })

            </div>

            <div class="row-fluid">

                <label class="span4"  >Parts to Create:</label>

                @Html.DropDownListFor(m => m.PartToCreateToLookup, Model.GetPartsToCreate(), new { @class = "span8", id = "partsToCreateLookup" })

            </div>

            <div class="row-fluid">

                <label class="span4"  >Drawing Template:</label>

                @Html.DropDownListFor(m => m.DrawingTemplateToLookup, Model.GetDrawingTemplates(), new { @class = "span8", id = "drawingTemplateToLookup" })

            </div>

            <div class="row-fluid">

                <label class="span4"  >Output Format:</label>

                @Html.DropDownListFor(m => m.OutputFormatToLookup, Model.GetOutputFormats(), new { @class = "span8", id = "outputFormatToLookup" })

            </div>

            <div class="row-fluid">

                <label class="span4"  >From Date:</label>

                @Html.TextBoxFor(m => m.FromDate, new { id = "fromDatepicker", type = "text", style = "margin-top:10px" })

            </div>

            <div class="row-fluid">

                <label class="span4"  >To Date:</label>

                @Html.TextBoxFor(m => m.ToDate, new { id = "toDatepicker", type = "text", style = "margin-top:10px" })

            </div>

            <div class="row-fluid">

                <input type="submit" value="Get Jobs" class="btn btn-success" id="getSinglePerformance"  />

@*                <input type="submit" value="Get Jobs" class="btn btn-success" id="getSinglePerformance" 

                onclick="location.href='@Url.Action("ShowPerformanceByDateRange"

                , "AdminReports"

                , new { sFromDate=Model.FromDate, sToDate= Model.ToDate, sDrawingTemplate= Model.DrawingTemplateToLookup, sPartToCreate= Model.PartToCreateToLookup, sOutputFormat=Model.OutputFormatToLookup, sOrderNumber=Model.OrderNumberToLookup})'" />

*@            

            </div>

        </div>

        <div class="row-fluid">

            <div class="span8" id="ChartDiv" style="width:500px;height:375px;display:inline-block"></div>

            <div class="span4">

              </div>

        </div>

    @*}*@

</div>

    <h3>

          Show multiple orders performance by date range</h3>

    <div id="ShowMultiplePerformanceByDateRange">

@*    @using (Html.BeginForm("ShowMultiplePerformanceByDateRange", "AdminReports", FormMethod.Get))

    {*@

        <div class="span6 " id ="multiplePerformanceInput">

            @Html.ValidationSummary(true)

            <div class="row-fluid">

                <label class="span4"  >Order Number:</label>

                @Html.TextArea("Orders", new { id = "orderNumbersToLookup", type = "text", style = "margin-top:10px" })

            </div>

            <div class="row-fluid">

                <label class="span4"  >Parts to Create:</label>

                @Html.DropDownListFor(m => m.PartToCreateToLookup, Model.GetPartsToCreate(), new { @class = "span8", id = "partsToCreateLookup1" })

            </div>

            <div class="row-fluid">

                <label class="span4"  >Drawing Template:</label>

                @Html.DropDownListFor(m => m.DrawingTemplateToLookup, Model.GetDrawingTemplates(), new { @class = "span8", id = "drawingTemplateToLookup1" })

            </div>

            <div class="row-fluid">

                <label class="span4"  >Output Format:</label>

                @Html.DropDownListFor(m => m.OutputFormatToLookup, Model.GetOutputFormats(), new { @class = "span8", id = "outputFormatToLookup1" })

            </div>

            <div class="row-fluid">

                <label class="span4"  >From Date:</label>

                @Html.TextBoxFor(m => m.FromDate, new { id = "fromDatepicker1", type = "text", style = "margin-top:10px" })

            </div>

            <div class="row-fluid">

                <label class="span4"  >To Date:</label>

                @Html.TextBoxFor(m => m.ToDate, new { id = "toDatepicker1", type = "text", style = "margin-top:10px" })

            </div>

            <div class="row-fluid">

                <input type="submit" value="Get Jobs" class="btn btn-success" id="getMultiplePerformances"/>

            </div>

        </div>

        <div class="row-fluid">

            <div class="span8" id="MultiplePerformanceChartDiv" style="width:500px;height:375px;display:inline-block"></div>

            <div class="span4">

            </div>

        </div>

    @*}*@

    </div>

</div>

Thanks in advance

 

 

[JuanC]

See answer in duplicate thread

JuanC