CODEWITHSUNDEEP
javascriptchartsmorris.js
user8703261
user8703261

Reputation:

Problems with the x axis in morris.js

I am working on a website. On one of the pages I draw a line chart with morris.js . But the x axis looks like this

It places 190 before the day number so I want it do look like Day 1 , Day 2 ...

Here is my source code for the chart:

var DataForChart1 = [
                     {x:'1' , a: <?php echo h($day1); ?> },
                     {x:'2' , a: <?php echo h($day2); ?> },
                     {x:'3' , a: <?php echo h($day3); ?> },
                     {x:'4' , a: <?php echo h($day4); ?> },
                     {x:'5' , a: <?php echo h($day5); ?> },
                     {x:'6' , a: <?php echo h($day6); ?> },
                     {x:'7' , a: <?php echo h($day7); ?> },
                     {x:'8' , a: <?php echo h($day8); ?> },
                     {x:'9' , a: <?php echo h($day9); ?> },
                     {x:'10' , a: <?php echo h($day10); ?> }
                    ];
config1 = {
  data: DataForChart1,
  xkey: 'x',
  ykeys: 'a',
  xLabelAngle: '70',
  labels: 'Кръвно налягане горна граница',
  fillOpacity: 0.6,
  hideHover: 'auto',
  behaveLikeLine: true,
  resize: true,
  pointFillColors:['#ffffff'],
  gridTextSize: 15,
  verticalGrid: true,
  gridTextColor: '#5cb85c',
  pointStrokeColors: ['black'],
  padding: 50,
  lineColors:['red']
          };
config1.element = 'chart1';
Morris.Line(config1);

The reason why x is '1' , '2' ... , '10' is because if i put in front of it something like day then the whole thing would look like this.

If you know a solution to this problem please tell me. Thanks for reading.

Upvotes: 0

Views: 704

Answers (1)

escapesequence
escapesequence

Reputation: 200

Add parseTime: false to your config to disable the date being used.

Despite putting 1, 2, 3 as x, morris.js by default populates x as a date (hence the reason 1901, 1902, 1903, etc is being displayed).

Here's a jsFiddle with the fix

Upvotes: 2

Related Questions