CODEWITHSUNDEEP
javascriptjqplot
Sarthak Srivastava
Sarthak Srivastava

Reputation: 1518

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.

Upvotes: 1

Views: 45

Answers (1)

Chandler
Chandler

Reputation: 26

Try the below code. Since you were rendering a list so in var s1 you would had got a list 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);
            });
});

Upvotes: 1

Related Questions