How to make xaxis to show dates using jqPlots

58 views Asked by At

I'm trying to make a bar chart using jqPlots. I'm taking data from database with ajax. In vertical it is shown prices-they are correct. But my problem is how to show dates in xaxis. Every bar should be placed in the correct place in horizontal depending on date.For example my current dates for the three bars are: 2015-06-06,2015-06-08, 2015-06-30. If I use renderer: $.jqplot.CategoryAxisRenderer, dates in xaxis are shown correct but bars aren't positioned dependent on that date. http://prntscr.com/7ew365

If I use renderer:$.jqplot.DateAxisRenderer, it looks in that way: http://prntscr.com/7ew1ot Dates aren't displayed. They should be:

var ticks2 = ['2015-05-31', '2015-06-06', '2015-06-13', '2015-06-20','2015-06-27','2015-07-03'];

But when I put: ticks: ticks2, my bars disappear.

My view is:

  $(document).ready(function(){
    var ticks2 = ['2015-05-31', '2015-06-06', '2015-06-13', '2015-06-20','2015-06-27','2015-07-03'];
var ticks = ['0.02', '0.04', '0.06', '0.08','0.1','0.12'];
       $.ajax({
          url: "<?= base_url() ?>index.php/receivedOrders/get_prices",
          dataType:"json",
          }).success(function(responseText) {
                 console.log(responseText)
                 $.jqplot.config.enablePlugins = true;
             var plot2 = $.jqplot('column_chart', responseText, {
               
                 seriesDefaults:{
                     renderer: $.jqplot.BarRenderer,
                
                     rendererOptions: {
                        barPadding: 1,
                        barMargin: 15,
                        barDirection: 'vertical',
                        barWidth: 50
                    }, 
                    pointLabels: { show: true }
                },
                axes: {
                    xaxis:{
                       renderer:$.jqplot.DateAxisRenderer, 
              // ticks: ticks2,
                tickOptions: {
                    
                    formatString:' %Y-%m-%d %H:%M'
                    //, min:'2015-06-06', max:'2015-06-30',  tickInterval:'7 days'
                },

        },
                  yaxis: {
          
           ticks: ticks,
                        tickOptions: {
                           
                            formatString: '%.2f'
                        },

                    }
                },
                highlighter: {
                    sizeAdjust: 7.5
                },
                cursor: {
                    show: true
                }
            });


          }
);

});
                      

0

There are 0 answers