lack of documents for line with focus chart

[sazary]

Hi
I'm using your lib, and as powerful it is, it really lacks in documentation. right now, I lost nearly 3 hours trying to populate a line with focus chart with my data. before, I had filled it with dummy data successfully, and after that, I populated simple line chart with a series that had "time" and "value" fields instead of "x" and "y", and then I tried to do the same with focus chart. at last, I figured out that I have to add both "lines" and "lines2" fields with proper "x" and "y" functions to do the job. BTW, I still don't know what are "lines" and "lines2"!
hope that this is helpful for someone in similar situation.

[krispo]

Hi,

NVD3 has a set of very basic models, such as line, scatter, bar, multibar, pie, legend and so on. And any other chart is build on top of some of these basic models. So, in the chart api you can find the options for these basic models in a separate chart option (lines, bars, discretebar, ...). For example, the line with focus chart has 2 line charts (main and focus), so the basic line model is used twice in this chart. And as a result, in the chart options you can find lines and lines2 fields, that contain the basic line options. Actually, all these basic options are optional, and in most cases you can never use it at all, because as a rule (but not always) all these options are duplicated in the general chart options. For example, you can specify option forceX in two ways:

chart: {
    ...
    forceX: 100,
    ...
}

and

chart: {
    ...
    lines: { //options for basic line model; main chart 
        forceX: 100
    },
    ...
}

But there is no the same general option for a small focus chart. So, if we want to specify the same option for a small focus chart, we can specify it only via basic line model lines2:

chart: {
    ...
    lines2: { //options for basic line model; focus chart
        forceX: 100
    },
    ...
}

This is a simple example, when we can use the options of the basic models to fine-tune the chart.

Another example is event handling. General options contain only general events, so if you want to get and handle events for a specific chart element, you can do this via basic options. All event handlers are in dispatch container. For our example, we can handle events for the main line chart as follows:

chart: {
    ...
    lines: {
        dispatch: { //container of event handlers
            elementClick: function(e){ console.log('click') },
            elementMouseover: function(e){ console.log('mouseover') },
            elementMouseout: function(e){ console.log('mouseout') }
        }
    }
    ...
}

Actually, you can watch the chart api in a tree view on the website, and test it. It can help you to choose the options you need.

Regards,
Konstantin

[sazary]

This is a great explanation. Maybe you should consider adding this to "Quick Start", or create a separate section for this kind of detailed information.