We Keep Coding

Drawing linear chart without gaps in Chart.js

I want to draw a linear chart of currency rates. There are some days when there are no rates from the market (holidays). I would like to remove these days from the chart but without ugly gaps or straight lines between the days with rates.
You can see an example on this chart:
On 3rd of May there is no data, the chart is linked and the missing date is removed from the legend.
How do I get such effect using Chart.js?

I figured out a workaround. It requires some hacking but it works:
1) First, modify your dataset. Iterate over all your points and mutate x values so that they correspond to new position on your chart. Save the original x value in some property for future use (in tooltips)
2) Now you can draw the data on the chart and they look properly. The problem is with tooltips and ticks.
How to deal with the ticks:
The ticks are a list of mutated numbers (they don't correspond to their original values). You have utilize a hack. Temporarily overrite chartController.ticks in afterBuildTicks method with array of objects (instead of plain numbers) with original corresponding x values. You have to approximate original x value for every tick.
Having that you can use this information in ticks callback to return correct labels for ticks.
With such mutated data the chart won't plot. You have to revert it to the state before mutation. In the method afterTickToLabelConversion restore the ticks. Bear in mind that now they are stored in property ticksAsNumbers
The similar hack should be done with tooltips callbacks. You have access to the dataset and utated x value. Approximate original x value for mutated x and that's it.

You can use the spanGap attribute. From the documentation:
If [spanGaps is set to] true, lines will be drawn between points
with no or null data. If false, points with NaN data will create a
break in the line

How to find associated date(x axis) with max value(y axis) in d3js

I have this (SOLVED) chart where i want to find the x coordinates for the corresponding max/min value on the y axis.(and display em on the line chart as I've already started to do)
I've managed to find the coordinates for the y axis and it updates accordingly, but I'm not sure how I would find the corresponding date to the max/min value.
I tried using the d3.nest function and associate the max/min value to it's date and tried to assign it to a single key but wasn't sure how to go about it or whether it was the right approach to begin with.

An easier approach is simply finding the object with the highest value:
var maximumObj = data.filter(e => e[city] === maximum)[0];
And using it to plot a circle or anything you want.
Check the bl.ocks: https://bl.ocks.org/anonymous/b388c8557f4210b66f8eae25b436f4f3

Automatically resize d3.js chart y scale based on brush selection

I'm using d3.js v4.
Is there a more convenient way to find the minimum and maximum values of a brush selection. This is meant to resize the y axis when I select a period in my brush area below.
Here is my method (everything is inside my function called when the brush is used) :
I find the extent limits of my selection
extent = d3.event.selection.map(chartComponent.x2().invert))
Then I have to redo an array containing all my selected points: I go on each point and compare it to the extent[0] or extent[1] to see if it is in the limits. I store the beginning and end point indices and then I use data.slice(begin, end) on my original data to get a new array.
Then apply d3.min and d3.max on the new array to find the min and the max level.
Then set the y axis to use theses limits.
chart.y().domain([chartComponent.ymin, chartComponent.ymax]);
chart.yaxisGraph.call(chartComponent.yAxis(true));
Do someone have a better idea ?

How does C3js decide the y axis range

I'm working with C3.js to build graphs for my JSON data. However, I do not understand what decides the Y-axis ranges on the graph. I have a common code to generate 2 bar charts, out of which one comes as expected whereas the other one has high range for Y-axis causing my data bar being diminished. Please take a look at the image below.
The bar chart on the left has data value equal to 1, yet the axis ranges to 35. A similar graph on the right adjust well.
Does anyone know what could be the reason for this?

As yo can read in the doc there is a parameter to set the Y max and min. So you can set the max value dynamically. Or you can set de Y.padding to be 0, so the Y axis will be shorter.
C3.js calculate the Y axis hight dynamically, and I think that have a min default hight.

Scatter Chart in analog clock

I have a json data array like this:
var data=[
{"someProperty":"number","time":"2014-12-11T09:24:39.000Z"},
{"someProperty":"number","time":"2014-12-11T09:27:39.000Z"},
{"someProperty":"number","time":"2014-12-11T09:30:39.000Z"}, .....
]
I need to draw a circle for each one in the array (with radius of "someProperty")
and put them in an analog clock according the time.
I found a picture similar to my problem here:
but with no code :(
I use d3.js for it.
I succeeded in doing it by using rotate but then all the circles where on the circumference and intersect each other.
I want to put them across the radius in order to avoid collision.
I see some examples of collision detection like http://bl.ocks.org/mbostock/1747543
but I don't see there any option to control the x,y position like I want.

If I read the question right, "someProperty" will provide the radius value, and "time" provides the angle.
I would suggest transforming these datum to polar coordnates as described here: d3.js Plot elements using polar coordinates
Theta would be the angle converted from "time". r would be "someProperty"