How to draw a line chart and a scatter chart together?

[calfzhou]

I found that multiChart doesn't support scatter, and scatterPlusLineChart only draws a straight line. Is there any way to draw a normal line chart together with a scatter chart?

[chunwanglh]

In my opinion, I read the code about the Line Chart, and the line chart actually has a layer for scatter, so maybe what you can do is to style different series to make the similar effects.

[calfzhou]

Thanks @IncubatedChun for the hint. Now I could use CSS to make this effect. In nvd3's live code page, add the following css style to Line Chart demo:

#chart g.nv-scatter g.nv-series-0 path.nv-point
{
    fill-opacity: 1;
    stroke-opacity: 1;
}
#chart g.nv-series-0 path.nv-line
{
    stroke-opacity: 0;
}

These markers are defined by path, not a list of circles. So i still cannot change their shape and size.

It would be grate if there are some parameters to customize these.

[calfzhou]

Updates:

I tried to add a shape property to every data of a line, it works.

In above example, change the data definition to:

...
  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10), shape: 'square'});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
  }
...
}

The markers changed to small squares.

[jkarmel]

@calfzhou, can you post the completed code you used to do this?

[calfzhou]

@jkarmel, here is the full code to generate above chart. It's based on NVD3's Simple Line Chart demo.

<script src="http://nvd3.org/lib/d3.v2.js"></script>
<script src="http://nvd3.org/nv.d3.js"></script>
<link href="http://nvd3.org/src/nv.d3.css" rel="stylesheet">
<style>
#chart svg {
  height: 400px;
}
#chart g.nv-scatter g.nv-series-0 path.nv-point
{
    fill-opacity: 1;
    stroke-opacity: 1;
}
#chart g.nv-series-0 path.nv-line
{
    stroke-opacity: 0;
}
</style>
<div id="chart">
  <svg></svg>
</div>
<script type="text/javascript">
data = function() {
  var sin = [],
      cos = [];

  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10), shape: 'square'});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
  }

  return [
    {
      values: sin,
      key: 'Sine Wave',
      color: '#ff7f0e'
    },
    {
      values: cos,
      key: 'Cosine Wave',
      color: '#2ca02c'
    }
  ];
}
nv.addGraph(function() {
  var chart = nv.models.lineChart();

  chart.xAxis
      .axisLabel('Time (ms)')
      .tickFormat(d3.format(',r'));

  chart.yAxis
      .axisLabel('Voltage (v)')
      .tickFormat(d3.format('.02f'));

  d3.select('#chart svg')
      .datum(data())
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});
</script>

[chunwanglh]

@jkarmel You can see the data format of the values, and there are fields of size and shape so that you could customize the points. Besides, use css you can style the path as what you wish.

[liquidpele]

I think making an attribute in the data for a line to just show the scatter points would be a great enhancement. That's different than just making a scatter chart in multichart as it's just a style issue.

[Sutikshan]

👍 +1

[liquidpele]

Oh, this is done in multiChart now, someone added scatter models to that so you can do both line and scatter there together.

[hldawe]

Apologies for my naive question but from which version is this ability to code line and scatter together available? Is it in the current stable version or do I need to get a later version? Many thanks!

[hldawe]

Apologies again. Please ignore my last question - I have got it to work!

[lijianliu]

@calfzhou Your full code still works very well in 2016! Thanks for sharing! This is exactly what I am looking for.

[mars0i]

Thanks very much calvzhou! Can someone explain to me how those CSS lines manage to choose the display of the sine data and make it into circles (or squares)? I don't see the connection. I'm not getting this to work in October 2016. Maybe I'm doing something foolish with the code, though. (I'm also trying to do something similar using nvd3 1.8.2-1 with Clojurescript, so it would help if I understood how the CSS did what it's doing.)