Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Echart Bar Graph Reverse Yaxis

I am trying to create a bar graph use Echarts. I am trying to reverse the YAxis. The data that I am trying to display considers a lower time as a higher score and a higher time as a lower score. Currently, the graph display as the higher time has a higher score. I am having trouble trying to reverse the YAxis. Any help would be great.

<script type="text/javascript">
  var dom = document.getElementById("chartPace");
  var myChart = echarts.init(dom);
  app.title = 'Test';

option = { 
color: ["#000000"],
responsive: true,
maintainAspectRatio: false,

grid : {
      height: '250',
      width: '450'
  },
  title : {
      text: 'test'
  },
  xAxis : [
      {
          type : 'category',
          data : ['Mon','Tue','Wensday','Tue','Wensday'],
          axisTick: {
              alignWithLabel: true
          }, 
      }
  ],
  yAxis : [
      {
          type : 'time',
          reversed:true,
          axisLabel: {
          formatter: function (value) {
            var value = new Date(value);
            var minutes = value.getMinutes();
            if (value.getSeconds().toString().length < 2){
              var seconds =  "0" + value.getSeconds();
            }
            else{
              var seconds = value.getSeconds();
            }
            return minutes +":" + seconds;
            //return value;
          }
        }
      }
  ],
  tooltip:{
    formatter : function (params) {

      var value = new Date(params['data']);
            var minutes = value.getMinutes();
            if (value.getSeconds().toString().length < 2){
              var seconds =  "0" + value.getSeconds();
            }
            else{
              var seconds = value.getSeconds();
            }
              return minutes +":" + seconds;
    }
  },
  series : [
      {
          name:'Avg Pace',
          type:'bar',
          barWidth: '60%',
          data:[new Date(2014, 9, 1, 0, 2,30),
          new Date(2014, 9, 1, 0, 1,05),
          new Date(2014, 9, 1, 0, 2,30),
          new Date(2014, 9, 1, 0, 3,20),
          new Date(2014, 9, 1, 0, 1,25),
          new Date(2014, 9, 1, 0, 0,00)]
      }
  ]
  };

  if (option && typeof option === "object") {
  myChart.setOption(option, true);
  }
  $(window).on('resize', function(){
      if(chart != null && chart != undefined){
          chart.resize();
      }
  });
  </script>
like image 365
Brian Chiem Avatar asked Oct 20 '25 12:10

Brian Chiem


1 Answers

You can use inverse:true in Y-axis.

like image 137
Saud Yousaf Avatar answered Oct 23 '25 02:10

Saud Yousaf



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!