Search code examples
axis-labelsdygraphs

In Dygraphs, How to display AxisLabels as Text instead of Numbers/Date


I need to build a graph to show world's population by region and sample data would be  

China           1,361,300,000
India           1,236,970,000
United States   317,148,000
Indonesia       237,641,326
Brazil          201,032,714

I am new to Dygraphs and I tried simple example on the same:

<html>
<head>
<script type="text/javascript"
  src="http://dygraphs.com/dygraph-combined.js"></script>

</head>
 <body>
<div id="demodiv" style="width:500px;height:500px"></div>
<script type="text/javascript">
 var data = "Country,Population\n" +
     "1,1361300000\n" +
     "2,1236970000\n" +
     "3,317148000\n" +
     "4,237641326\n" +
     "5,201032714\n";
 g = new Dygraph(document.getElementById("demodiv"), data, {
     title: "World's Population"
 });
</script>
</body>
</html>

Now, How can I use Dygraphs to display country Name instead of numbers on x-Axis? Is it possible with Dygraphs?

Thanks in Advance.


Solution

  • You could use the valueFormatter and axisLabelFormatter options. See http://dygraphs.com/options.html

    The following example will print 'text:' inside the legend and the x value from your data.

    axes: {
        x: {
            valueFormatter: function(x) {
            return 'text';
           },
            axisLabelFormatter: function(x) {
            return x; 
           },
        }
    },
    

    Example in jsfiddle: http://jsfiddle.net/JaM3S/