chart_info.twig (2745B)
1 <div class="panel panel-default"> 2 <div class="panel-heading"> 3 <div class="pull-right"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-calendar"></i> <i class="caret"></i></a> 4 <ul id="range" class="dropdown-menu dropdown-menu-right"> 5 <li><a href="day">{{ text_day }}</a></li> 6 <li><a href="week">{{ text_week }}</a></li> 7 <li class="active"><a href="month">{{ text_month }}</a></li> 8 <li><a href="year">{{ text_year }}</a></li> 9 </ul> 10 </div> 11 <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> {{ heading_title }}</h3> 12 </div> 13 <div class="panel-body"> 14 <div id="chart-sale" style="width: 100%; height: 260px;"></div> 15 </div> 16 </div> 17 <script type="text/javascript" src="view/javascript/jquery/flot/jquery.flot.js"></script> 18 <script type="text/javascript" src="view/javascript/jquery/flot/jquery.flot.resize.min.js"></script> 19 <script type="text/javascript"><!-- 20 $('#range a').on('click', function(e) { 21 e.preventDefault(); 22 23 $(this).parent().parent().find('li').removeClass('active'); 24 25 $(this).parent().addClass('active'); 26 27 $.ajax({ 28 type: 'get', 29 url: 'index.php?route=extension/dashboard/chart/chart&user_token={{ user_token }}&range=' + $(this).attr('href'), 30 dataType: 'json', 31 success: function(json) { 32 if (typeof json['order'] == 'undefined') { return false; } 33 34 var option = { 35 shadowSize: 0, 36 colors: ['#9FD5F1', '#1065D2'], 37 bars: { 38 show: true, 39 fill: true, 40 lineWidth: 1 41 }, 42 grid: { 43 backgroundColor: '#FFFFFF', 44 hoverable: true 45 }, 46 points: { 47 show: false 48 }, 49 xaxis: { 50 show: true, 51 ticks: json['xaxis'] 52 } 53 } 54 55 $.plot('#chart-sale', [json['order'], json['customer']], option); 56 57 $('#chart-sale').bind('plothover', function(event, pos, item) { 58 $('.tooltip').remove(); 59 60 if (item) { 61 $('<div id="tooltip" class="tooltip top in"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + item.datapoint[1].toFixed(2) + '</div></div>').prependTo('body'); 62 63 $('#tooltip').css({ 64 position: 'absolute', 65 left: item.pageX - ($('#tooltip').outerWidth() / 2), 66 top: item.pageY - $('#tooltip').outerHeight(), 67 pointer: 'cusror' 68 }).fadeIn('slow'); 69 70 $('#chart-sale').css('cursor', 'pointer'); 71 } else { 72 $('#chart-sale').css('cursor', 'auto'); 73 } 74 }); 75 }, 76 error: function(xhr, ajaxOptions, thrownError) { 77 alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 78 } 79 }); 80 }); 81 82 $('#range .active a').trigger('click'); 83 //--></script>