Question

I'm using in X axes numbers and custom names. Problems is with last column - it is without name.

Why is the last column name only with date? How do I make that visible with every date type?

My sample, date:

"X,Y,Z\n" +
                 "1,0,3\n" +
                 "2,2,6\n" +
                 "3,4,8\n" +
                 "4,6,9\n" +
                 "5,8,9\n" +
                 "6,10,8\n" +
                 "7,12,6\n" +
                 "8,14,3\n",

http://jsfiddle.net/JaM3S/1/

Where is "Bangladesh" (8 row)?

Was it helpful?

Solution

PLEASE READ MY NOTE AT THE BOTTOM

The label and data are there, DyGraph just scales the chart so it does not appear. Hover over where "Bangladesh" should be, and it will appear in the legend.

As a workaround you could use the "xRangePad" option (adds padding to the x-axis), in conjunction with "axisLabelFontSize" and "axisLabelWidth" to adjust the label visibility. (See http://dygraphs.com/options.html for more info)

But this may remove other labels from view.

You will also need to add

default:
    ret = "";
break;

to each of your switch statements, otherwise "undefined" will appear as a ticker label when the graph scales in size. I've given your header labels a different name, and moved them into the "labels" option.

g = new Dygraph(document.getElementById("graph"),
     "1,0,3\n" +
     "2,2,6\n" +
     "3,4,8\n" +
     "4,6,9\n" +
     "5,8,9\n" +
     "6,10,8\n" +
     "7,12,6\n" +
     "8,14,3\n",
     {
         legend: 'always',
         xRangePad: 20,
         animatedZooms: true,
         title: 'dygraphs chart template',
         axes: {
                x: {
                    valueFormatter: function(x) {
                        var ret;
                        switch (x){
                            case 1:
                               ret = 'India';                
                               break;
                            case 2:
                               ret = 'US';                
                               break;
                            case 3:
                               ret = 'China';                
                               break;
                            case 4:
                               ret = 'Pakistan';                
                               break;
                            case 5:
                               ret = 'England';                
                               break;
                            case 6:
                               ret = 'Australia';                
                               break;
                            case 7:
                               ret = 'West Indies';                
                               break;
                            case 8:
                               ret = 'Bangladesh';                
                            break;
                            default:
                                ret = "";
                                break;
                        }
                        return ret;
                    },
                    axisLabelFormatter: function(x) {
                        var ret;
                        switch (x){
                            case 1:
                               ret = 'India';                
                               break;
                            case 2:
                               ret = 'US';                
                               break;
                            case 3:
                               ret = 'China';                
                               break;
                            case 4:
                               ret = 'Pakistan';                
                               break;
                            case 5:
                               ret = 'England';                
                               break;
                            case 6:
                               ret = 'Australia';                
                               break;
                            case 7:
                               ret = 'West Indies';                
                               break;
                            case 8:
                               ret = 'Bangladesh';                
                               break;    
                            default:
                                ret = "";
                                break;
                        }
                        return ret;
                    },
                }                
        },
        labels:["Country", "Score 1", "Score 2"],
        axisLabelWidth: 50,
        axisLabelFontSize: 10,
    }
);

BUT I do not think that this is a solution to what you are actually trying to do. What is your intended goal? Would the data be better represented in a Bar Chart?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top