Morris.js xlabels are cut in vertical position

I am using Morris.jsI want to add xlabels in a format of datetime (2012-02-14 12:55:00),and I want to put them into vertical position.But the problem is that the beginning of the text does not fit.Below is my code:Morris.Bar({ element : 'graph_bar', data:[<?php echo $chart_data; ?>], xkey: <?php echo "'$eje_x'"; ?>, ykeys: [ <?php echo "$y_keys"; ?>], labels: [ <?php echo "$y_keys"; ?>], xLabelAngle: 90, hideHover: 'auto'});...Read more

morris.js displaying difficulties

I have a morris.js graph. I have a table with 3 columns id with values such as 1,2,3 etc, usernames with values such as sophie, nick, Paul etc and timesloggedin with values such as 69, 58, 4 etc. I created a chart that has the ids on x and the timesloggedin on y. What I want is instead of displaying the id number on the bottom of the chart under the bars, to have their usernames. You can see the chart here: list:...Read more

Morris.js number and date format

I'm using morris.js line charts. I'd like to display dates as dd/mm/YYYY instead of YYYY-mm-dd. Is it possible? I'm also using time such as 01.00.56, 00.55.44 etc. but this format is not recognized. How can I display time of the format (minutes.seconds.milliseconds)? Any help would be appreciated.This is my datavar data = [ { y: '20-05-2014', a: 01.00.45}, { y: '17-06-2015', a: 00.56.20}],Thanks...Read more

morris.js - Change Morris area chart

I would like to custom my area chart color, what should I do?This is my code:$.getJSON("", function (data4) { new Morris.Area({ backgroundColor: '#ccc', labelColor: '#060', // ID of the element in which to draw the chart. element: 'POSTFIVEMINS', // Chart data records -- each entry in this array corresponds to a point on // the chart. data: data4, // The name of the data record attribute that contains x-values. xkey: 'Tim...Read more

morris.js - Line Chart with Int as x axis, not Date

I would like to display a chart which shows integers on the x axis instead of dates.Here is a fiddle of the example: Morris.Line({ element: 'film-compare-chart', data: [ { week: 0, a: 2, b: 4, c: 5, d: 3, e: 3 }, { week: 1, a: 2, b: 3, c: 6, d: 3, e: 3 }, { week: 2, a: 3, b: 5, c: 4, d: 2, e: 2 }, { week: 3, a: 3, b: 6, c: 6, d: 3, e: 4 }, { week: 4, a: 4, b: 4, c: 5, d: 4, e: 2 }, { week: 5, a: 4, b: 6, c: 6, d: 3, e: 2 }, { week: 6, a: 4, b: 7, c: ...Read more

morris.js - Morris chart with dynamic data

I used Morris chart in my application project to show some details about quantity of sales.After executing the AJAX request, the chart is showing data in disordered way.It doesn't display sales for each city.I want to display them like this example with static data json = (function () { var json = null; $.ajax({ 'async': false, 'global': false, 'url': 'sales.php', 'dataType': "json", 'success': function (data) { json = data;...Read more

morris.js - Setting a max axis value or range step for a Morris Bar Chart?

I was wondering if it is possible to set a max axis value (say, I want the highest point of my data to be the top end of the y-axis) on a bar chart? I see there are options for ymin and ymax on line charts but I can't seem to find any information about the bar charts.Also, it would be helpful if anyone knew how to force the range between axis lanes to be a certain amount (say step up by 250 each line instead of the generated amount which in my case is too high for my liking)....Read more

morris.js - reverse order of Y axis in Morris line chart

Is it possible to set y axis values in reverse order(0-100)? Max value on top must start from zero to 100 at bottom.Morris.Line({ element: 'line-example', data: [ { y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a',...Read more

morris.js - Morris charts different preUnits

Is it possible to have different preUnits for Morris Line chart?Here is my javascript:Morris.Line({ element: 'payment_chart', data:, xkey: 'm', ykeys: json.label, labels: json.label, parseTime: false, preUnits: "$", smooth: true, resize: true});I have just two lines, one represents Dollar value, the other quantity. My tooltip looks like:AprilSales: $3Amount: $249.99What I would like to do is remove dollar sign from sales....Read more

morris.js - Disable labels for a single line in morris line

I have a Morris chart with two lines. I would like to disable the labels for one of the lines, but allow labels for the other line. I found the "hideHover" option in the documentation, but it appears to be a global setting that cannot be applied to individual lines:...pointFillColors: [ '#039be5', '#C9302C'],pointStrokeColors: [ '#039be5', '#C9302C'],hideHover: "always"...Then I tried this, thinking that it might work:...pointFillColors: [ '#039be5', '#C9302C'],pointStrokeColors: [ '#039be5', '#C9302C'],hideHover: ["always",'auto'],...From the ...Read more

morris.js - Morris line chart Empty

I have this weird problem at displaying Morris line chart.It only displays data when I let the revenue-chart at the same page.When I erase the block of revenue-chart, the line chart gets empty.These are the codes before and after:Functional:<section class="content"> <div class="row"> <div class="col-md-6"> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">Area Chart</h3> <div class="box-tools pull-right"> <butto...Read more

morris.js - How to show a label value that is not present in ykeys in morris bar chat?

While hovering on the chat it showing the total orders and it is fine. It is showing because list of strings containing labels for the data series to be plotted (corresponding to the values in the ykeys option). I want to show the amount as well while hovering on the chat and not adding it on the ykeys.Below is my code please check. var order_graph_chat = [ {order_date: '01', count: 10, amount: 9000}, {order_date: '02', count: 75, amount: 6500}, {order_date: '03', count: 50, amount: 4000}, {order_date: '04', count: 75, amount: 6500}...Read more

morris.js - Unexpected values on X axis when using morris line charts

I am using morris charts for represent my data and its work fine except some unexpected values for X aixs in line charts. following is the json encode script that I am using and Date is my X key. [{"Date":"5","Uria":"2.22140","TSP":"1.22140","MOP":"1.22140","TDM":"2.22140"},{"Date":"6","Uria":"14.79140","TSP":"8.43690","MOP":"6.68960","TDM":"6.72480"},{"Date":"7","Uria":"3.48100","TSP":"3.14000","MOP":"2.21700","TDM":"0.12000"}]...Read more