CODEWITHSUNDEEP
jqueryasp.netjquery-pluginsgraphjqplot
Carls Jr.
Carls Jr.

Reputation: 3078

JQPlot - Move the point label to the starting point of the graph

I have been working on a jqplot horizontal bar graph.

I WANTED TO HAVE THIS OUTPUT (I wanted the Point Labels to be in percentage and should be placed at the starting point of the graph)

Expected Outpt

Here is my code.....

$.jqplot.config.enablePlugins = true;

voteResults = [[Chinabank,0],['Citibank',100], ['UOB',0]['POSB',0],['OCBC',0]];
// voteResults = [[Chinabank,50],['Citibank',50], ['UOB',0]['POSB',0],['OCBC',0]];

plot = $.jqplot('chart1', [voteResults], {
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        shadowAngle: 135,
        rendererOptions: {
            barDirection: 'horizontal',
            barWidth:15,
            barMargin: 25
        }
    },
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions:{
                showGridline:true,
                markSize:0
            }
        },
        xaxis:{
            ticks:[0,100],
            tickOptions:{formatString:'%d\%'}
        }
    }
});

Right now the point labels are displayed after the end of the bar graph and if the point value is somewhere near 100% it won't display anything. And the Points are displayed as a whole number.

Is there a way that I could move the points near the starting point of the bar graph?

The code above displays these sample outputs… I hop you can help me fix my problem :(

Sample Output 1

Sample Output 2

Thank you :)

Upvotes: 1

Views: 6700

Answers (2)

Carls Jr.
Carls Jr.

Reputation: 3078

Somehow I managed to solve my problem with the help of @Matt and also I add a few lines of code to meet the requirements I wantend. Instead of placing the point labels on the starting point of the bar graph, I placed it at the center to make it more readable and presentable.

Here is my code: (I'm open for suggestions if you feel you have a better solution) thanks

var plot = $.jqplot('PollChart', [voteResults], {
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: { show: true, location: 'e', edgeTolerance: -50 },
        shadowAngle: 135,
        rendererOptions: {
            barDirection: 'horizontal',
            barWidth: 15,
            barMargin: 25
        }
    },
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions: {
                showGridline: true,
                markSize: 0
            }
        },
        xaxis: {
            ticks: [0, 100],
            tickOptions: {
                formatString: '%d%',
                showGridline: false
            }
        }
    }
});

// these lines here positions the Point Labels at the center of the graph
var ChartStartingPoint = parseInt($('#PollChart .jqplot-series-canvas').css('left'),10);
var ChartWidth = parseInt($('#PollChart .jqplot-series-canvas').css('width'),10);
var PointLabelLocation = (ChartWidth/2)+ ChartStartingPoint;
$('#PollChart .jqplot-point-label').css('left',PointLabelLocation+'px');

Upvotes: 2

Matt Ball
Matt Ball

Reputation: 359826

To allow the labels to show when the bar is near 100%, use the PointLabels edgeTolerance option.

edgeTolerance

Number of pixels that the label must be away from an axis boundary in order to be drawn. Negative values will allow overlap with the grid boundaries.

As I commented on your question, I'm not sure that you actually posted the code you used to generate those charts. Here is a direct dump of that code (with typos fixed), and here is the closest I could get to your pictures, and that's with a lot of changes to your original code.

Mind posting a jsfiddle that shows how you generated those examples?

Upvotes: 1

Related Questions