I am currently using ApexChart to create a Graph where I would like to display the time that a user has been connected to a service (Y axis) depending on the dates of connection (X axis).
However, since a user can log in multiple times in the same day to use the service for different amount of times, and he also may not wish to use the service for multiple month at a time, I am having troubles to find a correct way to handle the X Axis labels: if I show only the date, it is difficult to differentiate the multiple connections made in a single day. On the other hand, if I put the date and the time of each connection, there is too much information on screen when we want to display connections made in a single day.
I would therefore like to change the format of my X-axis labels depending on the zoom: if the data displayed to the user is the data corresponding to the connections made in a single day, then I would like to display the time, and else I would like to only display the time.
I have checked Apex Chart API but I do not see anything on how to get back the visible data, or on how to get back zoom information.
Graph of the duration of connection by day of connection
Thanks in advance for your help :)
The prédéfinie "datetime" type do the job for you as your xaxis categories are dates :
xaxis:{ type: "datetime", }
Here is the example with labels changes when ZoomIn/ZoomOut
example https://apexcharts.com/javascript-chart-demos/area-charts/spline/
Related
I render a chart/line graph with Chart.js where a ping of a server throughout the last month is displayed (a cloud function is ran every hour and the data gets send to a time series database). But accidents happen, and the server is sometimes unreachable. For those times I save the ping as -1. Also sometimes the data is just missing. I need to display those two cases differently. Like, is there any way, to for example color a part of the graph red when the server was offline and with grey when the data is missing? Preferably using Chart.js, but you can suggest any other JavaScript library.
Thank you so much.
With the new version 3 of chartjs which is releasing soon you can set the backgroundColor of the points like this:
backgroundColor: (context) => {return context.dataPoint?.y > 5 ? "green" : "red"}
And then you will have to put the right logic and values there. If you want the line also in different colors you will need to write a custom plugin for that since it is not supported by the default lib
Working example of points: https://jsfiddle.net/Leelenaleee/8bkz96cd/7/
I have a HighCharts chart and am displaying a trend that has a value every minute. So in a given day I will have 1440 data points, because 24 hours = 1440 minutes.
This is fine when I am displaying one or two days of data. But if I am displaying 4 weeks I will have 40,000 data points. I can read this data from the server very quickly, but HighCharts takes several minutes to build the graph.
My proposed solution is to interpolate data on the server side so we will have 1000 points over a 4 week period, or one value every 43 minutes. Then, when the user zooms, use AJAX to read data from the server again.
Am I making a mess of this or is this what normally happens? Is there a way to make HighCharts do something like this for me (and quickly)? I have tried the HighCharts DownSample Plugin but the initial slowness (2-3 minutes to build the graph) remains.
In fact, you want to use Highstock, with dataGrouping. Demo here.
In case you can't use Highstock, then it may be hard. However, check this ticket - it's experimental plugin for Highcharts to use canvas for rendering huge amount of points. Of course IE6/7/8 is out of the discussion.
And regarding loading data on demand, check lazy loading article. Yes, it refers to Highstock, but should be possible to use the same solution in Highcharts. Demo here.
I have a master-detail chart that displays several series of values against timestamps in line, spline and column formats, depending on the user's choice.
My issue is that when a range of timestamps (say a whole week) and their corresponding values are missing, the spline, line and master do what is expected and plot a smooth line between the gap. However this is misleading and I would rather it show a break in the line once a given range of timestamps are missed. I have tried connectNulls: false but as both the timestamps and values are missing this does not work.
Is there any way to achieve this? Preferably without looping through the data and adding the missing timestamps and null values, as the intervals are not always regular.
So I am trying to devise a way to create a nifty chart in which the user can zoom. I want to try to create an effect that as the user zooms, the data will become more granular. For example, say we are looking at a count on a date/time.
when you're at default zoom, which is say 3 months, you will see 1 data point every 24 hours. I am trying to get it as you zoom in, and see a smaller chunk for that data to get more granular. Like if you're looking at a day, each hour will get its own data point.
Do you all think it's possible to achieve an effect like this using Jquery Flot? I have all of the data broken down into hours at the beginning, it's just a matter of calculating how much of it should be shown.
I already have the zoom functionality working, but just need to figure out how to make the data change as well.
Thanks!
Flot won't do this automatically; you would have to register a callback on zoom that iterates over the original array to pick out, i.e. every nth sample, then redraws the plot using the results.
I would like to show data from different date intervals in hour granularity in the same xAxis. I would like to show the two charts over each other, not near each other.
I can do it with 2 xAxis. See example: http://fiddle.jshell.net/X3jPh/770/
Is it possible to hide the second xAxis, because as you see in the example both has the same hour intervals.
See the answer here: http://dev.highslide.com/forum/viewtopic.php?f=9&t=9917&p=45544
In your example, it would make more sense to normalize that data first (i.e. adjust the values so that they happen on the same day), then display the data normally.
I do not think it is possible to plot the data in the way you intend. In order to show two different series with different start intervals with the same xAxis, you'll have to resort to some sort of trickery (since the chart is technically displaying two different dates, even if they are the same time).