Develop Reference

Morris.js multiple line chart from json

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

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.

Highchart: Plotting datetime chart issue when passing series map from java

I am trying to plot a datetime chart in highchart. I am passing series map from java HashMap and accessing it in js as:
var chartRoot = '#{value}'.evalJSON(true);
And feeding the map in series as:
series : [{color:'#057E7E',
data : chartRoot.series[0].y1axis,
name:'#{empty y1axistitle ? '' : y1axistitle}',
type: 'line',
tooltip: {
valuePrefix: ''
}
},{
color:'#FF8230',
data : chartRoot.series[0].y2axis,
name:'#{empty y2axistitle ? '' : y2axistitle}',
type: 'line',
tooltip: {
valuePrefix: '$'
},
yAxis: 1
}]
where y1axis and y2axis are hashMap with data for 2 y axis.
I am not able to plot graph like this. I even changed the type of hash map to but it did not work.
Please help me I am new to highchart.
Thanks in Advance.

It is problem with your data. Currently you have object:
{
1325376000000: 1.09,
1330560000000: 1.66,
1333238400000: 0.55,
more...
}
While there should be:
[
[1325376000000, 1.09],
[1330560000000, 1.66],
[1333238400000, 0.55],
more...
]
You can re-format this in JS:
var myData = [];
for (var time in chartRoot.series[0].y1axis) {
myData.push([time, chartRoot.series[0].y1axis[time]]);
}
And now use myData in series.data option.

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>