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:
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Question
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
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.