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]

For performance reasons we only inspect the first object to query for its properties, you might have to loop through your objects, checking for additional fields that do not exist on the first object and them as properties to the first object, you can use the cfx.Chart.Hidden value to make sure no value is drawn for those elements.

For example the field "13-020866-01"  would have to be added to the first element in your array.

I also noticed that for most dates you have 2 properties in the same object with the same name, I am not sure is that valid in javascript as the field name is the key in a dictionary so an object should not have 2 property values using the same key.

JuanC