pmsi-alignalytics / dimple Goto Github PK

The examples pages seem to use some sort of dynamic loading to load example pages. Switching to simple, static setup will make it easier to look at the static html/javascript code, actually add debug points to see how examples are actually coded.

Hi, Not much of an issue really, more a question (sorry). Is it possible to provide data to dimple.js that represents timeseries data as milliseconds-since-epoch, or do I need to convert each data-point to a date string (in order to allow the timeaxis code to convert it back again.)

I assume it is and I'm just being stupid :( sorry!

I couldn't find dimple user forum. That's why I am writing here my question.

I am using iris dataset for scatter graph.

• DataSet -
  [ kmeans_data.csv ]
  S_LEN,S_WID,P_LEN,P_WID,NUMBER,DISTANCE
  4.3,3.0,1.1,0.1,2,0.8231777012151009
  4.4,2.9,1.4,0.2,2,0.5116524156538738
  4.4,3.0,1.3,0.2,2,0.5846265427129052
  4.4,3.2,1.3,0.2,2,0.632551600881523
  4.5,2.3,1.3,0.3,2,0.8327393716590514
  4.6,3.1,1.5,0.2,2,0.3501735680741449
  4.6,3.2,1.4,0.2,2,0.471827858204428
  4.6,3.4,1.4,0.3,2,0.5874704484293465
  4.6,3.6,1.0,0.2,1,0.7825102058262386

[ scatter.html ]

show the source code..
http://openankus.org/download/attachments/2720271/d3_scatter.html_-__visual__-_visual_-____Documents_workspace_visual_.jpeg?version=1&modificationDate=1389076792604&api=v2

.... So I want to show S_LEN(x axis) value on height. How do I do?

http://openankus.org/download/attachments/2720271/localhost_8888_d3_scatter.html.jpg?version=1&modificationDate=1389057844232&api=v2

Thank you. I will waiting for reply.

When using data with characters like "Â, é, ó, ê" (accents) the lib doesn't work, it doesn't recognize the data.

Even if i specify the encoding of the html page as UTF-8.

When styling through CSS, I would have more flexibility if the groups in my data were added as single strings. Currently if I have a space in an item that is added as a class or, it is added separate words, e.g. class="A Serious Man" as opposed to `class="A-Serious-Man". This also causes problems if groups in my data begin with numbers, since CSS doesn't like those class names. Perhaps numbers could be prefixed.

my tooltip font color is blending in with the tooltip (on waterfall). unfortunately 'hovering' with developer tools isn't activating the tooltip so I can't figure out how what classes are being used for tooltips.

any idea how to change font-color in tooltips?

There's no good way to get rid of a chart you don't want. Something like this is equivalent I think, but you gotta go find it.

myChart.svg.remove();

Also, I don't know if there is more cleanup that needs to be done.

Also related to Issue #29.

When using:

s.shapes.each(function(d) {
})

Firefox receives a null in value and throws exception when trying to split it

    // Copyright: 2013 PMSI-AlignAlytics
    // License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
    // Source: /src/methods/_parseXPosition.js
    dimple._parseXPosition = function (value, parent) {
        console.log(value, value.toString().split(","))
        var returnValue = 0,
            values = value.toString().split(",");

The same happens for dimple._parseYPosition
They all happen when svg is created without width and height being specified

dimple.newSvg('#dimpleContainer')

If you do not have every y category in every x category for that measure you get funny results on the area chart:

However, adding in 0 values :

weekEndDates = .uniq(.pluck(data,"Date")).sort();
categories = .uniq(.pluck(data,"Traffic Lights (cat. 2)"));

weekEndDates.forEach(function(date){
categories.forEach(function(category) {
data.push({
CountryName: "",
Date: date,
Items: 0,
"New/Existing Price": "New",
Sales: 0,
"Targets Flag": 0,
"Traffic Lights": "Red",
"Traffic Lights (cat. 1)": "Red - price down",
"Traffic Lights (cat. 2)": category
});
data.push({
CountryName: "",
Date: date,
Items: 0,
"New/Existing Price": "Existing",
Sales: 0,
"Targets Flag": 0,
"Traffic Lights": "Red",
"Traffic Lights (cat. 1)": "Red - price down",
"Traffic Lights (cat. 2)": category
});
});
});

Gets you ...

Should this check be put into the code base?

Hi there,

So I'm trying to line up xaxis with data.

mySeries.shapes.selectAll("line").attr("transform",
function (d) {
return d3.select(this).attr("transform") + " translate(10,0) rotate(0)";
});

Tried the above but it isn't rendered at the time of the line running so it doesn't select anything.

Any quick way to alter the X coords of the path?

Cheers,

Adam

If you have CategoryAxis as y axis then applying a filter through legend tries to recalculate range of axis and alignment of data points goes to middle instead of on the actual lable.
You can see this issue here
http://jsfiddle.net/farrukhsubhani/S6FLv/7/
Initial set of points are aligned with y-axis labels as soon as you apply any filter.
Clicking on 1 or 3 star filter will change the data and you would see that actual points are no longer aligned to y-axis labels after that. It never comes back to initial stage even if you remove filters.

Hi,

I've build a multi-series line chart with data coming from a d3.json call, and after the call to draw function i'd like to change one serie stroke-width attribute.

It's ok if do it from an user action for instance, but ko when i do it just after the draw call.

Any idea of what's wrong ?

Tks

Fred

working on waterfall and adding labels will make the visualization more readable. any way to do so with api? tried using the 'bar chart' labels but it's not trivial to adapt.

thanks!

If there is a null value (on purpose) how should this be handled in teh chart?

Currently I think it won't plot any of the other values so its empty.

Hi,
I have a bar chart where I'd like to hide axis titles. In the earlier version of the dimple I used an assignment for axis.titleShape = "" to achieve this. Now it doesn't work, and code fails on lines 1342 - 1344 of dimple.v.1.1.0.js:
if (axis.titleShape !== null && axis.titleShape !== undefined) {
axis.titleShape.remove();
})

Is there any better way of hiding axis titles?

Thanks!

I'm trying to override the tooltip creation, much like what's done in this example: http://dimplejs.org/advanced_examples_viewer.html?id=advanced_lollipop_with_hover

I'm having a line chart and I construct my axes and series using:

var x = mychart.addTimeAxis('x', 'date', '%Y-%m-%d %H:%I:%S', '%Y-%m-%d'),
    y = mychart.addMeasureAxis('y', 'pageviews'),
    s = mychart.addSeries('id', dimple.plot.line);

Then I attach an eventHandler to the series:

s.addEventHandler("mouseover", displayTooltip);

Where the handler function simply is defined as:

function displayTooltip(e) {
    console.log(e);
}

The output of the console.log command indicates that all the seriesValue, xValue, yValue, zValue and colorValue fields are "undefined".

Also, the mouseover event doesn't seem to be triggered when hovering a point in the line chart – only when hovering the lines.

Is there any additional configuration that is required or something else that I've missed?

I've tried switching to a bubble chart instead (by passing dimple.plot.bubble to addSeries) and when doing that, the values appear correctly in the dimple.eventArgs object.

If showing line markers, and a graph gets redrawn, the old line markers are not removed.

http://jsfiddle.net/Cx8aW/3/

Hi!

Maybe I'm missing something, but I can't find any way to have an axis title that isn't the same as field used for that axis.

Illustrated through an example:
In my dataset there is an indicator called "pageviews", which I use for the y axis of type "measure axis". I want the title label to display "Page Views", but the only way I've found is to rename the indicator in the dataset, which feels a bit awkward.

Is this decoupling of title and field name already possible? If not, I think it would be a great addition. The best thing is that is doesn't create any BC breaks either – just create a new method for the axis that allows to override the title.

But as mentioned a couple of times, I might very well be missing something really obvious :-)

Regards,
Manny

Hi John,

This is one other thing I notice that could be easy to fix:

class="series0 bar 9-16 days 18 - 2013 "

You notice that to get a hold of a class name for the series it needs to put '_' in for spaces.

class="series0 bar 9-16_days 18_-_2013 "

Then I can use css selectors to colour them quickly. I will use the Dimple library below for now though so no biggy:

myChart.assignColor("1-2 months", "red", "black", 1);

Cheers,

Adam

I read through the code, and I cannot find a way to disable aggregate method. One use case would be a scatter/bubble plot where I would like a bubble for each point. Currently, it seems I have to add an id, but then I get different colors for each point.

data : [{"x":1,"y":1},{"x":2,"y":2},{"x":3,"y":3},{"x":4,"y":4},{"x":5,"y":5},{"x":6,"y":6},{"x":7,"y":7},{"x":8,"y":8},{"x":9,"y":9},{"x":10,"y":10}]

While I love aggregate functionality, it would be nice if there is a way to turn it off for these type use cases.

Thanks for dimple. It is amazing.

Hi John,

Looking good! Up and running very quickly but I am wondering how subdivide the access ticks. So I have 80 days on a time axis but only want a tick and label every 7 days or so.

I guess in D3 you would use axis.tickSubdivide(7). How would I do this in dimple?

Cheers,

Adam

It would be nice if dimple supported the different interpolations provided in d3 (https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate)

For example, I was looking to create a stacked area chart using a step-after interpolation.

I've noticed the tooltip doesn't get a class of its own. Is there a way to target it with CSS or through another way to change its font, stroke, rx, ry and fill?

Hi John,

I notice that ordering a series on a stacked bar isn't behaving as the normal ordering for axis does (i.e. it doesn't order).

var s = myChart.addSeries("myCategories", dimple.plot.bar);
s.addOrderRule("myCategories");

myCategoriesis should be in A-Z. I also tried it with array of labels and no luck. Does seem fine on axis ordering though.

Am I using this right?

Cheers,

Adam

I'm trying to recreate the grouped bar chart example here, but am experiencing some positioning issues with the labels in certain parts of the chart:

• Legend labels appear offset above the legend keys:
  . The width of the label text is also not being taken into account when placing the next legend item.
• x and y axis labels are too close to the axis:
  and
  

This looks like a styling issue, because when I remove Bootstrap's CSS styles, the chart renders fine. However, I can't pinpoint which styles is affecting the placement of the text. I've tried overriding the line spacing and text size, but that didn't seem to work. The SVG is rendered in a variable width div, but the SVG itself has fixed width.

Can you shed some light on what assumptions dimple is using the calculate the positioning of the labels?

In this case my data was sorted by year. Explicitly sorting using one of the options below seemed to do the trick. Maybe it is good practice to always explicitly sort, but I wasn't sure if it should be required.

x.addOrderRule("Year");

By the way, just started using dimple, so far I love it. Nice looking charts with very little code. Only basic chart type I didn't see that would be nice is a pie chart.

When we hover a bar, the dropline that pinpoint the X/Y vlaue gets a part of the Y axis to be hidden under Firefox.

Please include a few lines of actual data, which is being visualized. Just enough to see the format.

Is it possible to use dimple with crossfilter like dc.js to draw for example bar chart http://dimplejs.org/examples_viewer.html?id=bars_vertical and still allow filter. Is there any plan for such a thing in future.

I currently have it so the width of .newSvg is the width of its container div. Since my container div has a %-width, the chart expands or shrinks to the proper width across devices, but only on initial load. Is it possible to trigger a redraw on window resize?

Hi,

Could you start using tags to indicated major/minor/fix changes. I noticed the package.json is set to 1.0.0, but there's not tag to coordinate, such that 1.0.0 is a misnomer because it's always moving.

Some code https://gist.github.com/stephen-james/6421895 has been written for this. I'll have a crack at it if you like.

Is it possible to supply legend color array that can then be used on chart as current default colors.

We have three series 1 with numeric values (measureAxis) and 2 string (Brand and Store). I have an array of colors for each store and numeric values are star ratings from 1 to 5. Now we have Brands on y axis so there are lets say 5 -6 brands and then it tells star rating from x-axis. We want to show each bubble in a color obtained from store. Legend Colors are quite good with values shown however question is to provide a look up table for colors or an array of colors to be used when drawing legend.

Hi,

Dimple is very nice. Thank you.

It's not a big problem but on first try I kept getting a 'TypeError: t[0][0] is null' message that killed javascript. After a bit I realised I was referencing the target badly. That is <div id="putithere'... as 'putithere' instead of '#putithere'. A basic error (but I'm pretty basic). It would be nice if it didn't crash and just gave a nice console message (or not) saying use the right name.

Secondly, pie charts would be great as I use them a lot!

Thanks for your excellent efforts.

Heya,

Seem like it might not be aggregating properly with a timeseries axis. I have two categories in the data (I can pass you the output). The data is "Date" each week (on a Sunday). The total Task count should be much higher.

Cheers,

Adam

    // chart 1
    var svg = dimple.newSvg("#chartContainer1", 800, 450);

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 50, 650, 300);
    var x = myChart.addTimeAxis("x", "Date", "%Y-%m-%d", "%d %b %y");
    x.timePeriod = d3.time.weeks;
    x.floatingBarWidth = 15;

    var y1 = myChart.addMeasureAxis("y", "Tasks");

    var s = myChart.addSeries("Approval Hops", dimple.plot.bar);
    s.addOrderRule(["10+","6-10","4","3","2","1"]);


    myChart.assignColor("0", "#B3DE69", "#95b957", 0.8);
    myChart.assignColor("1", "#B3DE69", "#95b957", 0.8);
    myChart.assignColor("2", "#B3DE69", "#95b957", 0.8);
    myChart.assignColor("3", "#fdb462", "#d39651", 0.8);
    myChart.assignColor("4", "#fdb462", "#d39651", 0.8);
    myChart.assignColor("5", "#fdb462", "#d39651", 0.8);
    myChart.assignColor("6-10", "#fb8072", "#d26b5f", 0.8);
    myChart.assignColor("10+", "#fb8072", "#d26b5f", 0.8);

Maybe not a dimple bug but if i try http://dimplejs.org/examples_viewer.html?id=bubbles_vertical_lollipop with //cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js (or a local d3.min.js from d3js.org) I get:

Error: Invalid value for <line> attribute x2="NaN" d3.min.js:523
Error: Invalid value for <line> attribute x2="NaN" 

I came across this issue while trying to make a graph today:

http://stackoverflow.com/questions/18620053/multi-series-in-dimplejs

Can you share your ideas for the implementation? While your data hack works it requires me to have 3x the amount of objects in memory for this graph. Thanks.

Seems to put axis way down below when negative lines?

Not sure if this is my code but I think its because the x axis is not at 0 in middle of chart.

Cheers,

Adam

Somewhat related to #28; if a graph is being redrawn, and if there's no data in the new set of data, the old svg line remains:
http://jsfiddle.net/Cx8aW/4/

And in contrast, if there's no data in the original set, the graph won't get drawn if the new set of data contains data:
http://jsfiddle.net/Cx8aW/5/

Hi John,

Hope alls going well! This is by no means urgent but I hit a wall trying to fix it.

So the hidden x axis causes an error on tool tips. Its because dropDest.x is not defined below I think:

this.chart.axes.forEach(function (axis) {
if (axis.position === "x" && !this.x.hidden) {
if (axis === this.x) {
// Set the y co-ordinate for the x axis
if (xIndex === 0) {
coord.y = firstOrig.y;
} else if (xIndex === 1) {
coord.y = this.chart._yPixels();
}

Anyway, let me know if you have any pointers.

Cheers,

Adam

Null/Undefined values are currently treated as non-numeric when determining field type. This means that a null value causes measure axes to do a distinct count of values rather than correctly aggregating them.

Hi,

I want to use your library in one theme having d3 charts, can I re-sell that theme using your library?

Ajay

When you set the overrideMin value of the y-axis to be more than 0, the x-axis is not rendered, and animated drop-down line which appears when hovering over a data point extends beyond where the x-axis should be.

Example here:
http://www.straitstimes.com/breaking-news/singapore/story/ministry-health-spells-out-efforts-tackle-bed-crunch-20140109

I've created a horizontal bar chart but the labels line up with the ticks rather than the bars. You can see it here: https://gist.github.com/lornajane/4e51a76847e9ac9a75eb

I manually resized the label text which may not have helped - this is because there are a hundred bars in this chart normally so I need a very large chart size but I do NOT need the automatically large text size that you get by default when you have a large chart.

It would be great if there is a way to set the number of decimal places displayed in tooltips, like how we can choose output values for time axes. I notice numbers in tooltips are rounded to the nearest integer by default. Thanks!

how do i make the stacked bars start from a negative value on the y axis?

while updating charts in dimple if we increases the data then axis doesn't appear right.....can anyone know why is this happening..m also uploading images for better understanding

Hi John,

Hope alls going well! This is by no means urgent but I hit a wall trying to fix it.

So the hidden x axis causes an error on tool tips. Its because dropDest.x is not defined below I think:

this.chart.axes.forEach(function (axis) {
if (axis.position === "x" && !this.x.hidden) {
if (axis === this.x) {
// Set the y co-ordinate for the x axis
if (xIndex === 0) {
coord.y = firstOrig.y;
} else if (xIndex === 1) {
coord.y = this.chart._yPixels();
}

Anyway, let me know if you have any pointers.

Cheers,

Adam

I'm working on an analytical part of a web app and my requirements also contains pie chart. Is it possible to generate Pie Chart using dimple.js ?