CODEWITHSUNDEEP
chartsdimple.js
user3574196
user3574196

Reputation: 1

Dimple X-Y Chart without Aggregation

Using Dimple, I would like to create a simple line chart with numeric X-Y data points. I use addMeasureAxis() for Y axis. If I use addCategoryAxis() for X, I get a data point for each X value if all X are unique, else dimple will aggregate for like values of X. If I use addMeasureAxis(), again, Dimple will aggregate, this time by summing. If I modify the X values to be time (hh:mm) and use addTimeAxis(), dimple will treat each X value as a time, and will place the data points properly. Is there a way to create a similar chart with numeric X values of arbitrary scale? I'm not sure, but I may be asking if Dimple can create charts with no aggregation on the X values.

The code for an X-Y line chart with time values on X axis is shown below. Note that the time values are not equally spaced. Dimple correctly positions the X-Y points.

  <script type="text/javascript">
    var svg = dimple.newSvg("body", 800, 600);
    var data = [
      { "xval":"12:00", "yval":20 },
      { "xval":"13:00", "yval":30 },
      { "xval":"14:00", "yval":25 },
      { "xval":"16:00", "yval":50 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addTimeAxis("x", "xval", "%H:%M", "%H:%M" );
    chart.addMeasureAxis("y", "yval");
    chart.addSeries(null, dimple.plot.line);
    chart.draw();
  </script>

Here is similar code with "xval" being numeric, which results in 4 data points, but without the desired spacing between X values 14 and 16.

  <script type="text/javascript">
    var svg = dimple.newSvg("body", 800, 600);
    var data = [
      { "xval":12, "yval":20 },
      { "xval":13, "yval":30 },
      { "xval":14, "yval":25 },
      { "xval":16, "yval":50 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "xval" );
    chart.addMeasureAxis("y", "yval");
    chart.addSeries(null, dimple.plot.line);
    chart.draw();
  </script>

Upvotes: 0

Views: 1115

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

I'm afraid you'll need to add a key dimension and a grouping dimension into your data and draw the line like this:

var svg = dimple.newSvg("body", 800, 600);
var data = [
  { "key": 1, "group": "a", "xval":12, "yval":20 },
  { "key": 2, "group": "a", "xval":13, "yval":30 },
  { "key": 3, "group": "a", "xval":14, "yval":25 },
  { "key": 4, "group": "a", "xval":16, "yval":50 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "xval" );
chart.addMeasureAxis("y", "yval");
chart.addSeries(["key", "group"], dimple.plot.line);
chart.draw();

Version 2 of dimple will remove the need for the group column so you'll be able to do this instead to achieve exactly the same result, but I'm afraid the key is still required:

var svg = dimple.newSvg("body", 800, 600);
var data = [
  { "key": 1, "xval":12, "yval":20 },
  { "key": 2, "xval":13, "yval":30 },
  { "key": 3, "xval":14, "yval":25 },
  { "key": 4, "xval":16, "yval":50 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "xval" );
chart.addMeasureAxis("y", "yval");
chart.addSeries(["key", "a"], dimple.plot.line);
chart.draw();

If you know that x or y values will be unique in your dataset then you could use one of those as a key. So for example if x values will be unique, the following will work in version 2:

var svg = dimple.newSvg("body", 800, 600);
var data = [
  { "xval":12, "yval":20 },
  { "xval":13, "yval":30 },
  { "xval":14, "yval":25 },
  { "xval":16, "yval":50 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "xval" );
chart.addMeasureAxis("y", "yval");
chart.addSeries(["xval", "a"], dimple.plot.line);
chart.draw();

Upvotes: 1

Related Questions