CODEWITHSUNDEEP
d3.jsdimple.js
mike01010
mike01010

Reputation: 6038

dimple.js Scatter Plot issues

in the below code, i am have plotted a scatter plot. there are couple of questions i have. the rendered chart can be found here: https://jsfiddle.net/dizzy0ny/ch2187dd/4/

   var data1 = [
      {"x":0.123,"y":0.046},
      {"x":0.032,"y":-0.0345},
      {"x":-0.044,"y":-0.0505},
      {"x":0.05,"y":0.076},
      {"x":0.04,"y":0.036},
      {"x":-.034,"y":0.029},
      {"x":-.023,"y":0.087},
      {"x":0.034,"y":0.067},
      {"x":0.024,"y":0.048},
      {"x":0.087,"y":-0.09},
    ]; 
    var svg = dimple.newSvg("#chartContainer", 600,600);

      var myChart = new dimple.chart(svg);
      myChart.setBounds(90, 35, 480, 400)
      xAxis = myChart.addCategoryAxis("x", "x");
      yAxis = myChart.addCategoryAxis("y", "y");
      xAxis.showGridlines = true;
      yAxis.showGridlines = true;
      xAxis.tickFormat = '%'
      yAxis.tickFormat = '%'
      yAxis.ticks = 5 
      xAxis.ticks = 5 
      s1 = myChart.addSeries("Price Tier", dimple.plot.bubble, [xAxis, yAxis]);
      s1.data = data1
      myChart.addLegend(90, 480, 330, 20, "left");
      myChart.draw();
  1. Why is the is the axis ticks property not working? In the above i want only 5 labels along the axis
  2. Notice in the chart, '5%' and '3%' are shown as labels twice. is there anyway to prevent this?
  3. Notice the odd vertical white space in the middle of the chart, where the '0%' line should be. Why isn't 0% shown and why no vertical line at that point in the x-axis?
  4. Why no line down the y-vertical axis (like you see along the x-axis above the labels?
  5. lastly, is there a simple way to plot a regression line on this chart?

Thanks much

Upvotes: 0

Views: 992

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

You've used category axes which is an ordinal axis of the distinct values. That's the reason for the behaviours you describe, they are being treated as text values not numbers. Try using a measure axis like this:

xAxis = myChart.addMeasureAxis("x", "x");
yAxis = myChart.addMeasureAxis("y", "y");

You also need to adjust the series to include the x and y dimensions, otherwise they will be aggregated:

s1 = myChart.addSeries(["x", "y", "Price Tier"], dimple.plot.bubble, [xAxis, yAxis]);

Here it is working.

https://jsfiddle.net/ch2187dd/5/

A regression line is a separate issue, there is no out of the box way, you would need to calculate the points manually.

Upvotes: 1

Related Questions