I have 3 buttons: Day, Week, and Month. How to do when I click eg: Day button, the morris chart will show the results with days on x-axis; when I click eg: Week button, the morris chart will show the results with weeks on x-axis. Is this doable? FYI: I'm using Laravel 4 for backend.
//controller.php
$day= U::select('u.price', DB::raw('DATE(u.solddate) as day'))
->orderBy('u.solddate','DESC')
->get();
//js
$("#day").click(function(){
$("svg, .morris-hover.morris-default-style").remove();
var line = new Morris.Line({
element: 'line-chart',
resize: true,
data: {{$day}},
xkey: 'day',
ykeys: ['price'],
labels: ['Price'],
lineColors: ['#3c8dbc'],
hideHover: 'auto'
});
});
Here's how you will be able to achieve what you want.
Let's assume all your data are stored in $day, $week and $month.
So for this given HTML:
<div id="line-chart" style="height: 300px;"></div>
<hr/>
<button data-type="day">Day</button> |
<button data-type="week">Week</button> |
<button data-type="month">Month</button>
You therefore need to do:
jQuery(function($) {
$('button').on('click', function(e) {
$('#line-chart').empty();
var type = $(this).data('type')
, month = {{ $month}}
, week = {{ $week }}
, day = {{ $day }}
, data = {
month: month,
week: week,
day: day
}
, line = new Morris.Line({
element: 'line-chart',
resize: true,
data: data[type],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Price', 'Test'],
lineColors: ['#3c8dbc', '#3c8dbc'],
hideHover: 'auto'
})
;
});
});
See this working JSFiddle.
Related
I have to render series data for current month/quarter/year data using morris.js charts. The series has data points on daily basis and I see a repeating days on the x-axis.
jsfiddle
I also tried turning off parseTime and using xLabelFormat as suggested on few posts on SO using the code below but output has duplicate values for days:
Morris.Line({
element: element,
data: [
{"day":"2017-10-01 11:40:09","uniqueUsers":"180","sessions":"213"},
{"day":"2017-10-01 12:40:09","uniqueUsers":"217","sessions":"213"},
{"day":"2017-10-02 11:40:09","uniqueUsers":"539","sessions":"635"},
{"day":"2017-10-03 11:40:09","uniqueUsers":"684","sessions":"826"},
{"day":"2017-10-04 07:40:09","uniqueUsers":"1095","sessions":"1229"},
{"day":"2017-10-04 10:40:09","uniqueUsers":"822","sessions":"987"},
{"day":"2017-10-04 11:40:09","uniqueUsers":"568","sessions":"836"},
{"day":"2017-10-05 11:40:09","uniqueUsers":"335","sessions":"385"}
],
xkey: 'day',
xlabels: 'day',
xLabelFormat: function (x) {
var d = new Date(x.label.slice(0, 10) + "T" + x.label.slice(11, x.label.length));
return d.getDate() + ' ' + months[d.getMonth()];
},
ykeys: ['uniqueUsers', 'sessions'],
labels: ['Unique users', 'User sessions'],
pointSize: 2,
hideHover: 'auto',
lineColors: ['rgb(156, 39, 176)', 'rgb(121, 85, 72)', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)'],
xLabelAngle: 50,
//dateFormat: function (d) {
// var ds = new Date(d);
// return ds.getDate() + ' ' + months[ds.getMonth()];
//},
behaveLikeLine: true,
parseTime: false
});
How can I remove duplicate values on x-axis?
these are not redundant values, these are dates formatted automatically by Morris.js.
Therefore, you have 2 choices:
either do not parse the dates, and just display the value of "day", by setting parseTime to false
or you change date format on x-axis, by setting xLabels to hour
You can read more about these settings in the documentation.
I have the following problem. I would like to show multiple lines in a morris line chart from the following Json:
var lineChartData = [{"val":5,"sCategory":"1;#Translation Incomplete","CreatedDate":"2018-5-9"},{"val":2,"sCategory":"2;#VED incorrect/Missing","CreatedDate":"2018-5-11"},{"val":8,"sCategory":"1;#Translation Incomplete","CreatedDate":"2018-5-11"},{"val":1,"sCategory":"2;#VED incorrect/Missing","CreatedDate":"2018-5-9"},{"val":2,"sCategory":"2;#VED incorrect/Missing","CreatedDate":"2018-5-15"},{"val":1,"sCategory":"1;#Translation Incomplete","CreatedDate":"2018-5-16"},{"val":1,"sCategory":"1;#Translation Incomplete","CreatedDate":"2018-5-23"},{"val":2,"sCategory":"1;#Translation Incomplete","CreatedDate":"2018-5-18"}]
The goal will be that show the lines based on sCategory. And the x,y will be the date and the value. I am able to show one line with total figures, but cant figured out how can I split my chart into categories.
Here is my code:
Morris.Line({
element: 'morris-area-chart',
data: lineChartData ,
xkey: ['CreatedDate'],
ykeys: ['val'],
labels: ['sCategory'],
pointSize: 5,
hideHover: 'auto',
resize: true
});
Thank you!
I suppose something like:
Morris.Line({
element: 'morris-area-chart',
data: lineChartData ,
xkey: ['CreatedDate'],
ykeys: ['val', 'sCategory'],
labels: ['val', 'sCategory'],
pointSize: 5,
hideHover: 'auto',
resize: true
});
I have a Morris bar chart that show positive and negative results.
What do i want to achieve is to make 2 colors, one for negative and one for positive results like on a images below.
I looked into documentation and didn't find any solution to this.
Is this possible or not ?
Here is a current code:
var positiveColor = 'orange'; //'#32CD32';
var negativeColor = 'grey'; //'#FF6347';
Morris.Bar({
element: 'morris-bar2',
barColors: [positiveColor, negativeColor],
data: <?php echo $json_data2; ?>,
stacked: false,
resize: true,
xkey: 'y',
ykeys: ['a'],
labels: ['Total', ''],
hideHover: false,
gridTextColor: '#4F5F6F',
gridTextSize: '12'
});
Examples:
Current bar color
Need to be like
according to one of the examples on GitHub, you can use a callback for the barColors property.
So, you could do something like this:
barColors: function (row, series, type) {
if (row.y < 0)
return "grey";
return "orange";
}
Well, you can always use this code
ykeys: ['positive', 'negative'],
barColors: ['#00cccc', '#3300cc'],
and it just an example
complete example of what I have;
var bar = new Morris.Bar({
element: 'chart',
resize: true,
data:[<?php echo $chart_data; ?>],
barColors: ['#00cccc', '#3300cc'],
xkey: 'date',
ykeys: ['Positive', 'Negative'],
labels: ['Positive Value', 'Negative Value '],
hideHover: 'auto'
});
I try to display dates with morris chart. The date format is "2016-05-18T16:00:00Z".
I try to display my data as a morris bar chart. I write a function in nodejs that return my data as :
[{date: "2017-07-28T00:00:00Z", energiep1: 3, energiep2: 0}......}] . After that i write this code:
Morris.Bar({
element: 'bar-example',
data: <%=datas %>,
xkey: 'date',
ykeys: ['energiep1'],
labels: ['Energie'],
pointSize: 2,
hideHover: 'auto',
resize: true,
But with this date format i can't display my chart. I tried to use Date.parse and it worked .But the format is integer (example:15412000001) not a date.
Do anyone have an idea if it's possible or not?
Thanks.
how to push data into stack of morris bar chart, if come multiple similar month data from ajax call from different account
this is my code:
DashboardService.getGraphForYear(year).success(function (data) {
$scope.count = data.results_count;
for(var j=0;j< $scope.count;j++)
{
$scope.month = data.results[j].month;
switch ($scope.month) {
case 1:
sales_com_year.push({month:month[1],amount:data.results[j].order_total_amount});
break;
case 2: sales_com_year.push({month:month[2],amount:data.results[j].order_total_amount});
break;
}
}
}).error(function (error) });
How to push data into if come January so all data push into as a stack into January as well for all month
You have to create list that have date and value pair push into an array
var myJSON = [];
$.each(YourList, function (i, item) {
var jsonArray = { year: item.Date, value: item.value };
var temp = jsonArray;
myJSON.push(temp);
});
and internalize Morris.Area with following parameters.
Morris.Area({
element: 'chart',
xLabelMargin: 10,
xLabelAngle: 60,
parseTime: false,
data: myJSON,
xkey: 'year',
ykeys: ['value'],
labels: ['Your Lable'],
lineColors: ['red'],
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
});