5

Is it possible to make the graph using jqplot, as given below? The closest possible graph to this is stacked but using that coloring as well as point labels are a problem.

Expected Output

This jsfiddle contains my effort to make this bar chart along with it's legend and point labels. So is it possible to make it look like the image.

var barchart = $.jqplot('chart1', [s1, s2, s3], {
    animate: true,
    grid: {
        background: 'white',
        drawBorder:false,
        shadow: false
    },

    seriesColors: ['#73C6E8', '#F28570', '#727272'],
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: {
            barPadding: 20,
            barWidth: 25,
            barMargin:10,
            fillToZero: true
        },
        pointLabels: { show: true }
    },
    series: [
        { label: 'USA' },
        { label: 'India' },
        { label: 'South Africa' }
    ],
    legend: {
        show: true,
        placement: 'outsideGrid',
        location:'se',
        background:'white',
        border: 'white',
        fontFamily: 'Gotham Medium',
        fontSize:'12px',
        renderer: $.jqplot.EnhancedLegendRenderer
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks:xticks,
            showTicks:false
        },
        yaxis: {
            pad: 1.05,
            ticks: yticks,
            showTicks:false,
            rendererOptions: {drawBaseline: false}
        }
    }
});
Re Captcha
  • 3,125
  • 2
  • 22
  • 34
neel shah
  • 2,231
  • 15
  • 19
  • Yes. What is it you're struggling with? – johnkavanagh Dec 04 '13 at 12:45
  • Have you checked what jqplot provides? There is a similar to your case example on their site, but I guess it was easier to ask here instead. – Ivaylo Slavov Dec 04 '13 at 12:47
  • how to give colors to top and bottom graph separately and how can you use point labels – neel shah Dec 04 '13 at 12:47
  • 1
    ya i have checked jqplot – neel shah Dec 04 '13 at 12:48
  • @neelshah, You'd better add these to the question. I see you are a new user and not quite familiar with the FAQ and how to ask questions, bit you should include all the necessary information and current struggles in the question itself (not comments or follow-up posts). You can edit it and add what exactly you have hard time achieving. – Ivaylo Slavov Dec 04 '13 at 12:50
  • @neelshah Why do you want to use JQplot ? It is easy to make this with CSS... – user2226755 Jul 22 '14 at 14:08
  • because it loading from the data from server side and jqplot renders better with json data – neel shah Jul 23 '14 at 08:30

1 Answers1

0

I believe it would be much easier to achieve with highchart: http://www.highcharts.com/demo/column-stacked

This is only stack bar example you customize everything, legend, color, size, label, etc etc.

good luck

Alain Gauthier
  • 820
  • 1
  • 12
  • 14