HOME

Mini Shell 1.0
DIR:/home/costmasters.in/www/application/modules/frontend/views/graph/
Current File : /home/costmasters.in/www/application/modules/frontend/views/graph/view_graph.php
<!-- begin:: Content -->
<div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid" style="margin-top:30px">

    <!--begin::Portlet-->
    <div class="kt-portlet">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">
                    Graphical Results
                </h3>

            </div>
        </div>

        <div class="kt-portlet__body">

            <!--begin::Section-->
            <div class="kt-section">
                <div class="kt-section__content">
                    <form action="<?= base_url('graph') ?>" class="editor-graph" method="POST">
                       <?php $valid_subscription_types = ['4','24', '25','26','32']; if (in_array($subs_type[0]['subscription_type'], $valid_subscription_types)) { ?>
                        <?php //if($subs_type[0]['subscription_type']=='4'){ ?>
                        <div class="row">
                            <!-- category show -->
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Commodity Head</label>


                                    <select name="commodity_head" id="commodity_head" class="form-control">
                                        <option value="">--Choose--</option>
                                        <?php 
							$explode = explode(',',$subs_type[0]['choose_type']); 
							
							for($i=0;$i<count($explode);$i++){
														
								foreach($cat_id as $cat) {
						   
								 	if($explode[$i] == $cat['id']) {
 										echo '<option value='.$cat['id'].'>
										 '.$cat['category_name'].' </option>';
									}
								}
									
							}
						 ?>
                                    </select>
                                </div>
                            </div>

                            <!-- item name show -->
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Commodity</label>
                                    <select name="commodity" id="commodity" class="form-control">
                                        <option value="">--Choose--</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- <div class="row">
							price unit show
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Price Unit</label>
                                    <span class="form-control" name="price_unit" id="price_unit" disabled></span>
                                </div>
                            </div>
							<div class="col-sm-6">
                                <div class="form-group">
                                    <label>Excise Duty</label>
									<span class="form-control" name="excise_duty" id="excise_duty" disabled></span>
                                </div>
                            </div>
						</div> -->
                        <?php } ?>


                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="">Date Range (From)</label>
                                    <input type="date" name="date_from" id="date_from" class="form-control" value="">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="">Date Range (To)</label>
                                    <input type="date" name="date_to" id="date_to" class="form-control" value="">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for=""><strong>Data Frequency</strong></label>
                                    <input type="radio" name="weekss" value="Day" id="weekss">
                                    Daily
                                    <input type="radio" name="weekss" value="Week" id="weekss">
                                    Weekly
                                    <input type="radio" name="weekss" value="Month" id="weekss">
                                    Monthly
                                    <input type="radio" name="weekss" value="Year" id="weekss">
                                    Yearly
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <button type="submit" name="submit" class="btn btn-dark">Submit</button>
                            </div>
                        </div>

                    </form>

                </div>
            </div>

            <!--end::Section-->

        </div>

        <div class="kt-portlet__body">

            <!--begin::Section-->
            <div class="kt-section">
                <div class="kt-section__content">

                    <div class="row">
                        <div class="col-sm-12">
                            <figure class="highcharts-figure">
                                
                                <div id="container"></div>
                                
                            </figure>
                        </div>
                    </div>
                </div>
            </div>

            <!--end::Section-->

        </div>
    </div>
    <!--end::Portlet-->
    <!-- end:: Content -->
    <style>
    /* .highcharts-figure{display: none;} */
    </style>
    <script src="<?= base_url(); ?>assets/plugins/general/jquery/dist/jquery.js" type="text/javascript"></script>

    <script>
//         jQuery(".editor-graph").submit(function(e) {

// e.preventDefault();

// jQuery("input,select,textarea").css('border', '1px solid green');
// jQuery('.mes').remove();
// var url = jQuery(this).attr('action');
// var formData = new FormData(jQuery(this)[0]);
// // console.log(formData);

// jQuery.ajax({
//     type: "POST",
//     url: url,
//     data: formData,
//     processData: false,
//     dataType: 'json',
//     contentType: false,
//     success: function(data) {

//         if (data.status == false) {

//             jQuery('#message').html(data.message);
//             var a = data['errors'];
//             jQuery.each(data.errors, function(key, value) {
//                 jQuery("input[name='" + key + "'],select[name='" + key +
//                     "'],textarea[name='" + key + "']").css('border',
//                     '2px solid red');
//                 jQuery("input[name='" + key + "'],select[name='" + key +
//                     "'],textarea[name='" + key + "']").after("<small class='mes'>" +
//                     value + "</small>");
//             });
//         }
//         if (data.status == true) {

//             jQuery("input[type=text],select,textarea").css('border', '1px solid #1abb9c').delay(
//                 2000).css('border', '1px solid #e2e2e4');
//             jQuery('#message').html(data.message);
//             jQuery("#message").fadeIn(100);
//             jQuery("html, body").animate({
//                 scrollTop: jQuery("#message").offset().top - 100
//             }, 1000);
//             jQuery("#message").delay(3000);
//             jQuery("#message").fadeOut(100);
//             setTimeout(function() {
//                 window.location.href = "<?= base_url(); ?>graph";
//             }, 2000);
//         }
//     }
// });
// });

    $(document).ready(function() {

        $('#commodity_head').change(function() {
            var commodity_head = $('#commodity_head').val();
            console.log(commodity_head);
            if (commodity_head != '') {
                $.ajax({
                    url: "<?= base_url('graph/commodity'); ?>",
                    method: "POST",
                    data: {
                        commodity_head: commodity_head
                    },
                    success: function(data) {
                        $('#commodity').html(data);
                    }
                });
            } else {
                $('#commodity').html('<option value="">--Choose Commodity--</option>');
            }
        });

        $('#commodity').change(function() {
            var commodity = $('#commodity').val();

            console.log(commodity);

            if (commodity != '') {
                // $('.highcharts-figure').css('display', 'block');

                $.ajax({
                    url: "<?= base_url('graph/more-details'); ?>",
                    method: "POST",
                    data: {
                        commodity: commodity,
                    },
                    success: function(data) {
                        console.log(data);
                        // $('input[name="chapter_title"]').val(result);
                        $('#price_unit').html(data);
                        $('#excise_duty').html(data);
                    }
                });
            } else {
                $('#price_unit').attr('disabled', 'disabled');
                $('#excise_duty').attr('disabled', 'disabled');

            }
        });

    });
    </script>

<!-- <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<script>
    $(document).ready(function() {
        var options = {

            chart: {
                renderTo: 'container',
                type: 'line',
            },
            
            title: {
                text: 'Chart Items',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: [<?php echo $category_data; ?>]
            },
            yAxis: {
                title: {
                    text: 'Price'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.series.name + '</b>' +
                        this.x + ': ' + this.y;
                }
            },

            series: [ <?php echo $series_data; ?> ]
            
        }

        // console.log(options);

// // if(isset($_POST['submit'])){



        $.getJSON("<?php echo base_url('graph/graph-result');?>", function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series[0] = json[1];
            // options.series[1] = json[2];
            // options.series[2] = json[3];
            // options.series[3] = json[4];
            // options.series[4] = json[5];
            chart = new Highcharts.Chart(options);
        });
   




    });
    </script>