Jump to content
JChartFX Community

MsBugKiller

Members
  • Content Count

    2
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by MsBugKiller

  1. 
    

    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

     

     

    post-2107-13939743898859_thumb.jpg

    • Like 1
  2. 
    

    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
×
×
  • Create New...