Im new to Apexcharts, and Im working on implementing a line chart. I have encountered a question about the x-axis of the chart while I am trying to apply an array with a long length(as big as an array of length greater than 500). The x-axis's unit is based on time in the format of "mm:ss", the timestamp in the array converts to "mm:ss" has identical value due to accuracy. For example, in the timestamp array, there are two values "2021-02-16T22:47:30.369704+00:00" and "2021-02-16T22:47:30.119704+00:00", these two values are both "47:30" while convert into a format of "mm:ss". In this case my x-axis values looks like "47:29", "47:30", "47:30", "47:30", "47, 31" with duplicates.
I directly passed the array that holds the converted timestamp to the xaxis config for apexcharts like so:
// This array is not hardcoded like below, this is for elaborate purpose
// In order to get the values in the array, I made a network request which returned to big
// amount of data requires me to plot in to the line chart
cosnt arrayOfMinutesSec = ["00:00", "00:01", "00:01", "00:01", "00:02", "00:02", "00:02",
...., "04:00"];
const options = {
...
xaxis: {
categories: arrayOfMinutesSec,
crosshairs: {
show: true
}
}
...
}
Is there anyway to tell the graph to show by step within a range instead of showing every single element in the array? So something like stepping every 5 seconds "00:00", "00:05", "00:10", ..., "03:55", "4:00"
Much appreciated for any kind of help.
I just figured it out. There is a tickAmount property inside the xaxis property of the options configuration, which allows you to divide the xaxis by the value you pass in.
Related
I have a dataset with the following schema:
{
"time": Date,
"foo": Number,
"bar": Number,
"change": Number
"place1": String,
"description": String,
"place2": String
}
And I want plot a series-chart grouping the place1 and place2 together, display time as x data, foo as y data and the other fields inside the tooltip.
Taking a look at this example the first thing I have done is to create a dimension and grouping the dataset using place1 and place2.
const placeDimension = ndx.dimension((d) => [d.place1, d.place2]);
After that I've created a group, since I want display data without aggregation I've only used the group function:
const placeGroup = placeDimension.group();
And from this point on I'm confused on how to use the two object created before for plotting the series-chart.
How can I select the property to plot in the X and Y-Axis? (In this case time for X and foo for Y?) .
How can I display the other properties inside the tooltip? (I know how to use the tooltip but I don't know how to use data that are not inside the dimension).
In dc.js and crossfilter, the X axis is usually the "keys" of your grouped data, and the Y axis is the counts (or other aggregations).
If each of your keys are unique and you do
const placeGroup = placeDimension.group().reduceSum(d => d.foo)
then it will sum up the one value and return it to you. So your keys (X) will be place1,place2 and your values will be foo.
Then you can use the seriesAccessor and keyAccessor to pull the keys back apart, as in the example you linked.
Tooltips are called "titles" in dc.js, after the HTML/SVG element which implements them. You can format your text however you want in the accessor, including line breaks. The annotated stock example shows this in action.
Caveat
All this said, there aren't very many good reasons for using dc.js with unaggregated data. The library only shines when there are interactions by filtering the charts, and filtering will only work if the data is aggregated with crossfilter.
It will probably be easier to learn another charting library, since you aren't using any of the functionality that makes dc.js special.
I have 2 datatime series (A & B)
Xaxis should be time and yaxis is count.
If time t i have 1 value on serie A, graph will show: [x=t, y=1].
If same time t i have one other value on serie B, I would like that value to be show: [x=t, y=2].
At the moment I modify 'manualy' values on serie B.
I wonder if there os a built-in method in highcharts to have that behavior?
Thx
Ok, so in that case you would have to create some custom code that gets all data, checks for occurrences of the same dates and based on that information set appropriate y values for points. I have prepared a simple demo where all emails are correctly arranged on the chart.
Example:
https://jsfiddle.net/BlackLabel/ywsh98f5
I am currently plotting points by DateTime and Value using HighCharts. The points are per minute. Currently, it's drawing a connecting line between the points as can be seen below.
What I'd prefer is to be able to plot a point for each minute inbetween (if there is no value), is this possible with HighCharts? Or would I have to loop through each minute and add it to the data series with a null value?
you can also create an array with every minute in it and then merge that with the values you have ...
or you use the method, that you suggested. I found using an "empty" array easier.
I created an example fiddle. It is using some techniques coming from Nicks answer on this Question.
When I tried to do it with my data model nothing happened. A debug session showed me that if I do:
var maxItems = 1000;
var chartData = new Array(maxItems);
for (var i = 0; i <= maxItems; i++) {
chartData[i] = { y: 3, x: 1380385867013, myData:'hello' };
}
Highcharts will not display anything. If I then change the value of maxItems to 999 it will work.
Another strange thing is, that when I use:
chartData[i] = [ 1380385867013, 3 ];
I can as much items as I want but I need the "myData" option to add tooltips there. What now?
Running your jsfiddle example with opened console log shows:
Highcharts error #12: www.highcharts.com/errors/12
Content of that link:
Highcharts Error #12
Highcharts expects point configuration to be numbers or arrays in turbo mode
This error occurs if the series.data option contains object configurations and the number of points exceeds the turboThreshold. It can be fixed by either setting the turboThreshold option to a higher value, or changing your point configurations to numbers or arrays. See turboThreshold.
Highcharts docs about turboThreshold:
turboThreshold: Number
When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.
So, users Mark and strikers are right.
Set the turboThreshold: 0 in plotOptions > series option. Like this :-
plotOptions: {
series: {
turboThreshold: 0} }
I am uisng tickPositioner to plot certain dates on X Axis.
xAxis: {
......
tickPositioner: function(min, max) {
// custom function which returns dates array.
return getDatesBetweenRange(min, max);
},
.....
}
using Highstock v1.2.5.
I also have Show/Hide series option in the Legend. It works fine no issues till here.
Now, When I hide any series from the chart.
I do not want to show those dates on x Axis who have no data as the series is hidden.
I was looking into source code at "getOffset:" method where Label is being created for each
Tick.
Is there any relation in API which returns all series points for this Tick ?
Or
Is there any relation in API that says that this tick pos (e.g. date) has no data visible ?
As I know, you can use a little different solution:
In tickPositioner you have access to all series for specific axis via this.series. Now, each of these series have xData which contains all x-values. All you need to do now is check if series is visible, and then compare your tick values (generated by getDatesBetweenrange()) with values in xData arrays - and return only these values which could be find there.