Develop Reference

Morris bar chart, show 2 colors in 1 line, negative and positive

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'
});

Display a date with morris

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.

Morris.js line chart multiple ykeys from json

I am wokring on morris.js line chart. My json is
[
{"uma":"34","time":"2017-05-11 12:30","mahes":"23","karan":"56"},
{"uma":"45","time":"2017-05-11 12:35","mahes":"45","karan":"56"},
{"uma":"34","time":"2017-05-11 12:38","mahes":"54","karan":"56"}
]
from the above json, I am sure about xkey and ykeys. so I can implement to the below code.
var stringify=JSON.stringify(abovejson);
var data =stringify,
config = {
data: JSON.parse(data),
xkey: 'time',
ykeys: ['uma','mahes','karan'],
labels: ['temperature'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors:['#ffffff'],
pointStrokeColors: ['black'],
lineColors:['green']
};
config.element = 'morris-area-chart-exm';
Morris.Line(config);`
If my json may have more than 2 ykeys which will be based on the data comes from database. How will i plot it to ykeys?? Please advice.
Sample JSON will be
[
{"uma":"34","time":"2017-05-11 12:30","mahes":"23","karan":"56","janu":"23",....},
{"uma":"45","time":"2017-05-11 12:35","mahes":"45","karan":"56","janu":"56",....},
{"uma":"34","time":"2017-05-11 12:38","mahes":"54","karan":"56","janu":"67",....}
]

I have made a fiddle for you question
http://jsfiddle.net/athulnair/edwsgj8g/
In this, I passed the ykeys
as
var yvalues = Object.keys(jsonData[0]).filter(i=>i!='time');
So it will fetch all the y key skipping time

Add Controls to Show Morris Chart

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.

How to add color under a single line graph with Morris.js

I am currently using Morris.js to draw graphs for an Android application.
I pass in data that contains points for 1 single line. Donations and Dates. I am trying to add color to the bottom side of the line graph but cannot figure out how to do it.
This is the style I am trying to replicate.
But under a single line.
I have edited the Morris.js code and also passed in as many different options to Morris.Line but to no avail. This is currently the code I am using to setup the graph. I thought the 'fillOpacity' option would work but it hasn't. Is there an option that I am missing? Or is there a duplicate answer to this I have passed over?
var xKey = "day"
var yKey = 'funds'
var jsonData
var graph = Morris.Line({
element: 'graph',
data: jsonData,
xkey: xKey,
ykeys: [yKey],
labels: ['funds gathered'],
smooth: true,
resize: true,
parseTime: true,
grid: false,
fillOpacity: true
});
function setGraph(data) {
graph.setData(data);
}

Ok so the issue was that in the above example I am trying to instantiate a Morris.Line where actually what I want is a Morris.Area.
<script>
var xKey = "day"
var yKey = 'funds'
var jsonData
var graph = Morris.Area({
element: 'graph',
data: jsonData,
xkey: xKey,
ykeys: [yKey],
labels: ['funds gathered'],
smooth: true,
resize: true,
parseTime: true,
grid: false
});
function setGraph(data) {
graph.setData(data);
}
</script>