CODEWITHSUNDEEP
javascriptgraphflot
bobbyrne01
bobbyrne01

Reputation: 6745

Using labels on y axis of flot graph instead of numbers

At the moment each team is assigned a value e.g team1.txt == 1
So when i render the graph each team has a continuous line along the x-axis (timeline).
The y-axis has values 1 .. 3, how could i change the y-axis' labels?
So that instead of seeing 1 as first metric on y-axis, I saw team1.txt .. then next value on y-axis would be team2.txt

html

<div id="content">
    <div class="demo-container">
        <div id="placeholder" class="demo-placeholder">
    </div>
</div>
<div id="chartLegend"></div>
</div>

javascript

text = '[{"name":"team1.txt","points":[[1389340501000,1],[1389370501000,1],[1389873602000,1],[1390046402000,1],[1390078402000,1]]},{"name":"team2.txt","points":[[1389370501000,2],[1389441601000,2],[1389528002000,2]]},{"name":"team3.txt","points":[[1389370501000,3],[1389441601000,3],[1389441601000,3]]}]';
var datasets = JSON.parse(text);

var data = [];
for (var i = 0; i < datasets.length; i++) {
    data.push({label: datasets[i].name, data: datasets[i].points});
}


$.plot($("#placeholder"), data, {
    xaxis: {
        mode: "time",
        min: (new Date(2014, 1, 1)).getTime(),
        max: (new Date()).getTime()
    },
    series: {
        stack: true,
        lines: {
            show: true
        },
        points: {
            show: true
        }
    },
    grid: {
        hoverable: true,
        clickable: true
    },
    legend: {
        noColumns: 5,
        container: $("#chartLegend")
    }
});

Upvotes: 1

Views: 1267

Answers (2)

Margo
Margo

Reputation: 682

Use:

yaxis:{mode: "categories", tickLength:0}

That works for me, adds all different strings values i have automatically(when they are sendt in as y point). here is a fiddle http://jsfiddle.net/Margo/yKG7X/4/

remmenber to add this script: http://www.flotcharts.org/flot/jquery.flot.categories.js

You could also use something like:

yaxis: { ticks: [[0, 'true'], [1, 'false']] }

.. if your values are predefined.

Hope it helps :)

Upvotes: 3

Raidri
Raidri

Reputation: 17550

You can use a tickFormatter function for that:

yaxis: {
    tickFormatter: function (val, axis) {
        if (datasets[val - 1])
            return datasets[val - 1].name;
        else
            return '';
    }
},

See this fiddle for a working demo.

PS: I had to change the xaxis min value to new Date(2014, 0, 1) (January is month 0, see here).

Upvotes: 3

Related Questions