I'm currently designing a financial timescale with quite a large dataset, as a result I have noticed that using d3's built-in timescale doesn't really allow for "clipping" parts of the day out, and results in quite an ugly looking graph if I'm wanting to span say, weeks or months (a lot of flat lines like this):
I'm aware that I can use ordinal scales and input my own data but with a dataset of over 2000 points for just a week, this isn't really feasible. I was wondering if there were any plug-ins for d3 that I could use to have custom defined timescales in my chart so that I could clip say, from 9pm to 9am and exclude weekends?
The project d3 discontinuous scale could be useful for your use case.
They have an example to remove weekends https://github.com/d3fc/d3fc-discontinuous-scale/blob/1a2e551fbcaec2852581e20c30e3e5fd7c3e9b32/src/discontinuity/skipWeekends.js that could be a good starting point.
Also here's a blog post and a gist that can be useful too
Related
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.
d3 is pretty cool and I just got started with it as a novice. There are several examples for histograms and I settled on this one. And I did a brief search for cumulative line chart, cumulative distribution, and cumulative frequency, all with respect to d3 but didn't find anything like what I was looking for, but the closest I came to was this, and in light of a better solution, I will try to pursue that and see if I can customize it for my needs. Ideally though, I'm looking for something akin to what Excel offers in terms of histogram with a cumulative frequency/distribution line overlaid on top (with its axis/label being the y-axis on the right). Is there such an equivalent capability with d3 (ideally available as an example/demo to work off of)? That way I have 1 chart rather than 2.
If no readily available examples/demo, any tips for extending my chosen histogram implementation with the cumulative frequency line on same chart with an axis label to the right? As I'm a novice, it will be hard/tricky for me to figure out on my own.
Would this example be close to what you are looking for? D3 has a histogram layout that does a lot of the computational legwork for you and can be plotted like any other bar graph. Just sum up the count data to create the CDF.
I am building an arc graph where the start and end points of the arcs are times in one day. I have a d3 scale that converts date objects into radians, but I need a scale with four ticks applied around the outside of the graph. I did it with jQuery, and you can see how it's supposed to look below
The problem I'm having is that the jQuery (and myself) is doing a poor job keeping those ticks at equal distances from the graph. Different screen sizes are making this a pain.
Does anyone have any idea how do create d3 time axis that is a circle? I've googled with no results.
Here is a link to the live site
I'm currently working on building a charting web application, and I've chosen dygraphs for my time series data (Two weeks of data at an hourly level, if anyone finds this information relevant). On the same page, I also have a couple of customized d3.js charts that pull metrics from the same database as the trendline.
I want to know if I will be able to link the selection on my dygraph line (Supposing I zoom in on 3 hours worth of data, i.e., 3 rows) - to my d3 charts, so that the data in the d3 charts also get filtered down to the date range chosen by zooming in?
I'm quite the amateur here, and apologize if my question seems vague, but any sense of direction would be helpful.
I'm guessing I should be able to do this by modifying some class in the dygraphs source code, or reference the same from my d3 chart.
Thanks.
You shouldn't have any trouble doing this. There's no need to modify the dygraphs source. You can implement handlers on the dygraph object (zoomHandler or drawCallback, most likely) which update the D3 chart.
See this demo for an example of synchronization between multiple dygraphs.
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()