CODEWITHSUNDEEP
javascriptjquerychartsjqplot
Zelter Ady
Zelter Ady

Reputation: 6338

jqplot: draw series

I want to draw some data using jqplot and I have a small issue.

The code I use is this (code on fiddle): 

$.jqplot('chart1', [[202],[249],[148]], {
    seriesColors : ['#ff0000', '#0f0', '#00f'],
    seriesDefaults : {
       renderer :$.jqplot.BarRenderer,
       pointLabels : {
           show : true
       },
       tickRenderer : $.jqplot.CanvasAxisTickRenderer,
        rendererOptions : {
            barDirection : 'horizontal'
        }
    },
    axes: { 
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer, 
            ticks: ["some value", "other series", "third series"],
        },
    },
});

The graph has 3 horizontal regions, "some value", "other series" and "third series" I need that each graph bar to be under corresponding region, and to keep the colors as now (red to "some value", green to "other series" and blue to "third series").

How do I need to format the data to get this?

As extra questions:

  1. I want few pixels margin between yaxis and corresponding axe labels. How do I set this?

  2. The graph has a bg color (fade yellow). How do I eliminate that color and to get as bg whatever color the container has?

Upvotes: 0

Views: 976

Answers (1)

AnthonyLeGovic
AnthonyLeGovic

Reputation: 2335

You need to change your data to 

data = [[[202,1],[248,2],[148,3]]];

See working example here.

PS1 : You can change width of the bar by setting barWidth = xx; where xx is in pixels (50px in given example).

PS2 : For your first extra question, you can add something like this :

$("#chart1 .jqplot-grid-canvas").offset({left:$("#chart1 .jqplot-grid-canvas").offset().left+5});
$("#chart1 .jqplot-series-shadowCanvas").offset({left:$("#chart1 .jqplot-series-shadowCanvas").offset().left+5});
$("#chart1 .jqplot-series-canvas").offset({left:$("#chart1 .jqplot-series-canvas").offset().left+5});
$("#chart1 .jqplot-point-label").offset({left:$("#chart1 .jqplot-point-label").offset().left+5});
$("#chart1 .jqplot-highlight-canvas").offset({left:$("#chart1 .jqplot-highlight-canvas").offset().left+5});
$("#chart1 .jqplot-highlighter-tooltip").offset({left:$("#chart1 .jqplot-highlighter-tooltip").offset().left+5});
$("#chart1 .jqplot-barRenderer-highlight-canvas").offset({left:$("#chart1 .jqplot-barRenderer-highlight-canvas").offset().left+5});
$("#chart1 .jqplot-event-canvas").offset({left:$("#chart1 .jqplot-event-canvas").offset().left+5});

I'm pretty sure you can make it a cleaner way but it works (change the +5 values to whatever you need in order to move the chart block). Please see an updated working example here

Upvotes: 1

Related Questions