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

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