PMSI-AlignAlytics / dimple

An object-oriented API for business analytics
Other
2.73k stars 556 forks source link

How to plot 2 series of values to the same y axes? #229

Closed eox2 closed 8 years ago

eox2 commented 8 years ago

Basically I have 2 sets of data (both measuring different things) but I want to plot them on the same graph using the same axes. I figured out how to plot it with 2 different axes but then they both are very close and I don't want that. I want the contrast to be visible between the range of values since one set of values is way lower than the other.

var svg = dimple.newSvg("#chartContainer", 590, 400); var myChart = new dimple.chart(svg, thetable); var x = myChart.addCategoryAxis("x", "entries");

x.showGridlines = true; x.addOrderRule("entries");

var y = myChart.addMeasureAxis("y", "tpp");

var s = myChart.addSeries(["entry","tpp"], dimple.plot.line); var s2 = myChart.addSeries(["entry","ap"], dimple.plot.line);

myChart.draw();

I am not too familiar with the API. I want the y axis to be universal and plot both series relative to the same y axes. However, I am having trouble doing that as I don't know the api very well and the things I did try are not working. The only way it somewhat works if i create a seperate y axes and plot it against that but then I don't want that.

Thanks for your help.

welshjs commented 8 years ago

Don't you just plot the second series using the same scale as the first?

James

On May 11, 2016, at 8:10 PM, SephLeague notifications@github.com<mailto:notifications@github.com> wrote:

Basically I have 2 sets of data (both measuring different things) but I want to plot them on the same graph using the same axes. I figured out how to plot it with 2 different axes but then they both are very close and I don't want that. I want the contrast to be visible between the range of values since one set of values is way lower than the other.

var svg = dimple.newSvg("#chartContainer", 590, 400); var myChart = new dimple.chart(svg, thetable); var x = myChart.addCategoryAxis("x", "entries");

x.showGridlines = true; x.addOrderRule("entries");

var y = myChart.addCategoryAxis("y", "tpp");

var s = myChart.addSeries(["entry","tpp"], dimple.plot.line); var s2 = myChart.addSeries(["entry","ap"], dimple.plot.line);

myChart.draw();

I am not too familiar with the API. I want the y axis to be universal and plot both series relative to the same y axes. However, I am having trouble doing that as I don't know the api very well and the things I did try are not working. The only way it somewhat works if i create a seperate y axes and plot it against that but then I don't want that.

Thanks for your help.

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHubhttp://cp.mcafee.com/d/1jWVIi4x0SyMUPt55VBATsSDt-Xz2rb39JeXZT64ShNEVdFTvKUMCOMMrjhjsvuK-eudCffEj1lGMt-fMJV2KNgWSCXlwXYvxrO5tyxRJdCzBQQsSpp7fZvAkkPhOO_RXBQSnAujhusd7avkhjmKCHtB7BgY-F6lK1FJ4SyrLObxEVuhhpjKYrKr9PCJhbc8OCjr8sLwm6Nwdby1Yyc10YJelGox9lo_YBizvQNdcQsCUlzWNVo54pj9JAendLKfL6PiS5xIo3iUwv8z0gfbjBqC8ilmfYQKCy0bRc6y2tjh0IvmpEwjd45fzbW6y2HFEwcWuTZ3h1eFEwCjYQgkRnPh0md46x_Q96y0Qk0oCCqejhiruodycVTYqZDT5Xm

If you do not wish to receive any further email notifications, please click herehttp://www.conferenceboard.ca/casl.aspx?utm_source=CBoC&utm_medium=Email&utm_campaign=FooterUnSub. Please allow 10 business days for your request to be processed.

Please send any questions or comments to contactcboc@conferenceboard.camailto:contactcboc@conferenceboard.ca. The Conference Board of Canada 255 Smyth Road Ottawa ON K1H 8M7

© Copyright 2016

eox2 commented 8 years ago

Well no because then it has no way to distinguish and it would be the same results. The y values are what determine its location on the y axes.

johnkiernander commented 8 years ago

If I understand your situation correctly I think you just need to create a composite axis but your code only has a single data set and no measure axis so I'm a little confused. If I'm right then tpp and ap are both measures in the same data and you want a line for each. In which case you would do a composite axis by creating a second y axis referencing the first axis in it's first parameter:

var svg = dimple.newSvg("#chartContainer", 590, 400);
var myChart = new dimple.chart(svg, thetable);
var x = myChart.addCategoryAxis("x", "entries");

x.showGridlines = true;
x.addOrderRule("entries");

var y_tpp = myChart.addMeasureAxis("y", "tpp");
var y_ap = myChart.addMeasureAxis(y_tpp, "ap");

var s = myChart.addSeries("entry", dimple.plot.line, [x, y_tpp]);
var s2 = myChart.addSeries("entry", dimple.plot.line, [x, y_ap]);

myChart.draw();
eox2 commented 8 years ago

Thank you John. That is exactly what I needed. I got it working now!