Develop Reference

Apexcharts updateOptions xaxis label

I have such an example in which I would like to change the series of data on the xaxis along with changing the formatting:
ApexCharts.exec("chartID", "updateOptions", {
xaxis: {
type: "datetime",
categories: dates_string_array,
tickAmount:5,
labels: {
show: true,
rotate: -45,
format: 'yyyy-MM-dd'}
},
});
The categories substitution corrects (it is an array with dates as string) however, this formatting format: 'yyyy-MM-dd' still doesn't work - the format is exactly what the dates in the dates_string_array are in.
In this case, do I need to use formatter to overwrite these values?
An example of default format one of array elements:
2022-01-01 10:00
I would like to format it like this:
2022-01-01

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.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

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>

FlotJS wont plot data on the correct date

http://jsfiddle.net/jJNmV/
Yes I've multiplied my times by 1,000, and as you can see the dots do not appear on the date but rather a little bit to the side of it. Why does this happen?
My data and x-axis looks like:
{data: [[1351483200000, 12],[1351569600000, 1]], label: "Clicks"}, {data: [[1351483200000, 24],[1351569600000, 1]], label: "Opens"}
], {
xaxis: {
mode: 'time',
timeformat: '%y/%m/%d',
minTickSize: [1, 'day']
},

It looks like you're not accounting for your time zone. The 'time series data' section of the API docs goes into more detail, but the basic idea is that you'll need to add/subtract your timezone offset from each timestamp.