Sarthak Srivastava Sarthak Srivastava - 20 days ago 7
Javascript Question

jqPlot - bart chart not generating

I am getting the value of likes but not able to generate the chart . below is my javascript code for bar chart.

$(document).ready(function(){
$.jqplot.config.enablePlugins = true;

var s1=${likes};
var s2=[30000000];
var s3 =[42000000];

var z=[s1,s2,s3];
var ticks = ['Your Organisation','Competitor#1','Cometitor#2'];
plot1 = $.jqplot('chart1', [z], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
 yaxis: {
                    min:0,
                    max:10000000000,
tickOptions: {formatString: '%d'},
ticks:[0,10000000,20000000,30000000,40000000,50000000]
                }
},
highlighter: { show: false }
});

$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});


the chart is generated when i pass the variables directly instead through array of variable z.
And also the chart is generated on 1st tick only.

Answer

Try below code..Since you were rendering a list so in var s1 you would had got alist of values . you must on take 1st value.

$(document).ready(function(){
            $.jqplot.config.enablePlugins = true;

            var s1=${likes[0]}; //first vaue from the list
            var s2=[30000000];
            var s3 =[42000000];

          var z=[s1,s2,s3];
             var ticks = ['Your Organisation','Competitor#1','Cometitor#2'];
            plot1 = $.jqplot('chart1', [z], {
                // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
                animate: !$.jqplot.use_excanvas,
                seriesDefaults:{
                    renderer:$.jqplot.BarRenderer,
                    pointLabels: { show: true }
                },
               axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks
                    },
                     yaxis: {
                                            min:0,
                                            max:10000000000,
                         tickOptions: {formatString: '%d'},
                        ticks:[0,10000000,20000000,30000000,40000000,50000000]
                                        }
                }, 
                highlighter: { show: false }
            });

         $('#chart1').bind('jqplotDataClick', 
                function (ev, seriesIndex, pointIndex, data) {
                    $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
                }
            );
            });