How to add Dynamics Ticks through JSON in Flot?

问题

I want to change the X-Axis values from default to Dynamic Ticks which is passed from JSON.

Through my last post How to plot time values in Flot Graph, I found out that it is possible through Categories.js

I added the JS and modified My JSON in the format below matching to the format given in the Example.

  [{"data":[["Over Time",5202]],"label":"Over Time"},{"data":[["Shift Start",19620]],"label":"Shift Start"},{"data":[["Maintenance break",82920]],"label":"Maintenance break"},{"data":[["Lunch break",240]],"label":"Lunch break"},{"data":[["BreakDown",75720]],"label":"BreakDown"},{"data":[["Break",3060]],"label":"Break"},{"data":[["Tea break",72840]],"label":"Tea break"}]

and my JS code as

  <script language="javascript" type="text/javascript">  
$(document).ready(function(){
$.getJSON('ReasonByTime.txt', function(json) {
    $.plot($("#placeholder"),json, {bars: { show: true, barWidth:0.2}, xaxis: { mode: "categories" }});
});

});

When i run this code, x-axis is not displaying any values, the default values also not getting displayed. My result graph is look like this.

I tested The sample example given in code.google.com/p/flot/ but the tickes/categories is not working. I get the Output for the example like this.

回答1:

Flot is now hosted out of github: https://github.com/flot/flot

If you grab jquery.flot.js and jquery.flot.categories.js from there and run your code, it will work. What does NOT work is jquery.flot.js version 0.7 combined with the latest categories plugin from github.

I ran it with this code and it displayed correctly:

var data = [{
    "data": [["Over Time", 5202]]},
{
    "data": [["Shift Start", 19620]]},
{
    "data": [["Maintenance break", 82920]]},
{
    "data": [["Lunch break", 240]]},
{
    "data": [["BreakDown", 75720]]},
{
    "data": [["Break", 3060]]},
{
    "data": [["Tea break", 72840]]}];


$.plot($("#placeholder"), data, {
    bars: {
        show: true,
        barWidth: 0.2
    },
    xaxis: {
        mode: "categories"
    }
});

Here is a working version of it: http://jsfiddle.net/ryleyb/CQ3YS/

来源：https://stackoverflow.com/questions/13506586/how-to-add-dynamics-ticks-through-json-in-flot

标签

javascript

jquery

flot