CODEWITHSUNDEEP
jqueryhtmlflot
natsuki_2002
natsuki_2002

Reputation: 25349

custom ticks in js plotting library flot

I can't get flot to register the custom ticks I'm sending it. My code works fine but the ticks are still appearing as whatever default ticks flot chooses.

HTML:

<div class="flot" id="flotcontainer"></div>';

JS:

var $hist_data = [[1.0, 0],[2.0, 2],[3.0, 1],[4.0, 1],[5.0, 0],[6.0, 1],[7.0, 2],[8.0, 1],[9.0, 1],[10.0, 1]];

var $hist_ticks = [[1.0, 1.0],[2.0, 2.0],[3.0, 3.0],[4.0, 4.0],[5.0, 5.0],[6.0, 6.0],[7.0, 7.0],[8.0, 8.0],[9.0, 9.0],[10.0, 10.0]];



<script type="text/javascript">

    $.plot($("#flotcontainer"), 

        [
          {
            data: $hist_data,

            bars: { show: true, barWidth: 1, fill:0.8},

            color: "#227dda",

            xaxis: {ticks: $hist_ticks}

          }
        ]

    );

</script>

Upvotes: 0

Views: 685

Answers (1)

Matt Burland
Matt Burland

Reputation: 45135

You have your xaxis properties mixed up. Confusingly, there is an xaxis property of the data itself, but this is just a number that you use to specify which axis that data series should be plotted against. To actually set the axis ticks, you need to use the options parameter passed to .plot:

$.plot($("#flotcontainer"), [{ 
        data: $hist_data,

        bars: {
            show: true,
            barWidth: 1,
            fill: 0.8
        },

        color: "#227dda"

    }], {xaxis: { ticks: $hist_ticks} }

);

Fiddle

Upvotes: 2

Related Questions