Jump to content
JChartFX Community
  • 0

multiple line charts with different data points


MsBugKiller
 Share

Question


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

 

 

  • Like 1
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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 

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...