Nanosecond plots using highstockJS - javascript

I'm trying to plot oscilloscope time traces using highcharts/highstock. The problem is highstock only takes the xAxis as date values. I can't figure out how to force it to only use seconds (because then I could just change the label to nanoseconds).
Highcharts on the other hand can plot anything really but doesnt have the advanced data grouping features that I need to plot these long (and sometimes concatenated - i.e. SUPER long) time traces.
I could go server side with it but I don't think anything beats highcharts in terms of usability and flexibility.
Anyone have any advice?

Have you consider to modify labels, by formatter ?
http://api.highcharts.com/highstock#xAxis.labels.formatter
http://api.highcharts.com/highstock#highcharts.dateFormat()

Related

Properly scaling xAxis with time in chart.js

Using chart.js, I have a bar chart with datapoints spread across many years:
If you look closely near the x-axis, you can see some grey bars. Here's a line chart with the same data for reference:
While using a line chart for this example could make sense, it makes the charts with less data a bit awkward:
and with bars instead of lines
Is there an option that could be used on bar charts to improve the readability when large x-axis are involved? I am representing occurrences of events over-time, another adapted kind of chart could be acceptable too.
Thanks.
I am not sure there will be an option on chart.js.
One way to deal with it is to render line charts initially and then switch the type to 'bar' when zoomed into certain date ranges.
Depending on the type of data, you could also group up the data by summing (or averaging) the data by day (or week or month). Then pass it into the chart and the time series option should be able to display the x axis dates in a more sensible manner.
Otherwise you will have to look into more power charting libraries that can handle and manipulate bigger datasets like amCharts: https://www.amcharts.com/demos/stock-chart-candlesticks/
Or look into using D3 that is highly customisable, but a bit more complex to work with.

Plotly JS line graph has very weird lines

So I have a site where I am doing some data modeling using plotly.js. I am plotting a large number of points (in the thousands). on my backend, I calculate regression equations for the points, and generate coordinates for each x value on the graph. When I plot the equation points in a plotly.js trace, I sometimes get extremely weird results such as
Which is supposed to be a polynomial curve where I get the points using the equation
yPoints.push((quad[0] * (m*m)) + (quad[1] * m) + quad[2])
Where quad[0] quad[1] and quad[2] are the coeffecients that I got from determining the regression analysis.
I am not sure why I am getting such weird graph results for certain sets of coordinates. Does anybody have any idea why?
Alternatively does anybody know of any way to plot a function in a plotly.js graph using either plotly or a third party?
let me know if you need any more info.
Thanks for the help!
Thanks for all of the comments NVRM. As it turns out it wasn't an SVG issue. It wasn't even a plotly issue. The issue was with my data. I have a database which I query for the data that I used to generate the trendline (the points on the graph). For some reason occasionally the y value of the points that I am generating was NULL. This was causing some oddities with the regression calculations, and there were some outliers generated when the value was NULL.
There is still a few oddities with the graph, but the main one is resolved by removing the values with NULL from the trendline consideration.
The moral of the story is always check your data kids.

Plot multiple irregular timeseries on same line chart dojo

I am looking to create a line chart which will plot an array of data which has a corresponding x value (date/time) and y value associated with it. The chart can have any number of series (different lines on the same graph). You can think of this as like how yahoo/google graph a particular stock and if you want to compare different companies stock prices on the same chart.
The problem I am facing is that the data I am given might not be given in regular intervals (e.g. series 1 might give an array of plots that occur every 15 mins, series2 might be 10 mins, etc). Also the data might not have the same start / end time (e.g. series 1 starts at 8:40 am, series 2 starts at 8:42 am). There can also be holes in the data where no data was gathered (want to display this as nothing in the chart)
I have thought about some potential ways to solve this problem
Put everything on a 1 minute interval (the smallest possible interval) and place null values for everything we do not have data for. I need to have null values because there are datatips on the graph when you hover over a point to tell you what the value is at that point. The problem with this is that this will cause the graph to become a point graph rather than a line graph and will look ugly. I can tell dojo to interpret the data between null values but I also want to have explicit null values (e.g. when the market is not open leave the space as nothing rather than connecting the lines)
Round the data to the closest interval. The problem with this is the data is no longer accurate for that particular moment which is a problem.
Don't allow them to be plotted together (not an option).
Use a different charting library (last resort)
I am using the dojox charting library and I cannot change the back end code that gives me the data.
What are my options?

Javascript simple barchart with tooltip

I have some metrics to display, I need a simple barchart to show values for every day in month, and it doesn't need to have any labels or legend, when you hover the day, the data is displayed. I found this http://codepen.io/deegill/pen/macik which is something that I need but it cost 90$ smallest package. Does anyone have chart like this which I can use in my project?
A set of reusable charts using D3
http://nvd3.org/examples/line.html
If you want to make any chart I'd look at using D3. It's a pretty smart js framework that allows you to display data in a lot of different ways. Here is an example of it displaying a bar chart. And here is another example that uses time as the x value.
Google Charts API
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart
g.Raphael.js
http://g.raphaeljs.com/
Highcharts.js (Free for non-commercial use)
http://www.highcharts.com/
I've been using Flot for a few years now, and I have no complaints. Might take a little effort to get started, but we use it commercially, and it's great (and free).

JavaScript graphing library which supports line graphs with missing data

I am looking for a charting library that supports creating graphs with missing data.
A bit of an odd request, but required for my application as my DB doesn't always have a complete data set.
I'm currently using ChartJS to create a line graph, however because there are holes in my data, it is causing my graph to look quite messy.
The graph contains months on the x axis, and a users score on the y axis. There is one year of data, broken in months... and then the user score ranges from 0 - 10
However, sometimes I end up with months with no data, and it is causing NaN for that month. Does anyone know of a graph library that supports missing data, or a work around solution for such an issue?
You actually refer to chart.js
ChartJS supports missing data

Categories