jquery - Passing an PHP Array as variable into Flot Bar Chart -


i trying implode php array variable flot bar chart. idea please ?

what correct format flot data expects array of arrays ?

someplot = null; $(function () {      var data = $.map( <? php echo '['.implode(", ", $studentsage).']' ?> , function (val, idx) {         return [[idx, val]];     });      var dataset = [{         label: "exams student age",         data: data,         color: "#5482ff"     }];     var ticks = [         [0, "0-2"]     ]; // expand each idx in data      var options = {         series: {             bars: {                 show: true             }         },         bars: {             align: "center",             barwidth: 0.6,             vertical: true,             show: true         },         xaxis: {             axislabel: "exams student ages",             axislabelusecanvas: true,             axislabelfontsizepixels: 12,             axislabelfontfamily: 'verdana, arial',             axislabelpadding: 10,             ticklength: 0,              ticks: ticks          },         yaxis: {             axislabel: "number of exams",             axislabelusecanvas: true,             axislabelfontsizepixels: 12,             axislabelfontfamily: 'verdana, arial',             axislabelpadding: 3,              max: 20,             ticksize: 1,             tickformatter: function (v, axis) {                 return v;             }         },         legend: {             nocolumns: 0,             labelboxbordercolor: "#000000",             position: "nw"         },         grid: {             clickable: true,             borderwidth: 1,              backgroundcolor: {                 colors: ["#ffffff", "#edf5ff"]             }         }     };      $(document).ready(function () {         $.plot($("#flot-placeholder"), dataset, options);         $("#flot-placeholder").usetooltip();     });      function gd(year, month, day) {         return new date(year, month, day).gettime();     }     var previouspoint = null,         previouslabel = null;      $.fn.usetooltip = function () {         $(this).bind("plotclick", function (event, pos, item) {             var links = ['../../chart/studenttests/result.php'];             if (item) {                 //alert("clicked");                 //  window.location = (links[item.dataindex]);                  window.open(links[item.dataindex], '_blank');                 console.log(item);             } else {                 $("#tooltip").remove();                 previouspoint = null;             }         });     };      function showtooltip(x, y, color, contents) {         $('<div id="tooltip">' + contents + '</div>').css({             position: 'absolute',             display: 'none',             top: y - 40,             left: x - 120,             border: '2px solid ' + color,             padding: '3px',             'font-size': '9px',             'border-radius': '5px',             'background-color': '#fff',             'font-family': 'verdana, arial, helvetica, tahoma, sans-serif',             opacity: 10         }).appendto("body").fadein(200);     } }); 

i :

enter image description here

while getting result :

enter image description here

any idea please appreciate it.

you set maximum y axis 20.

remove setting , flot choose maximum automatically. or set number greater maximum value.

you want remove tick size setting or atleast increase it.


Comments

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -