i trying draw line chart , don't know how pass dynamic database values in linechart using jquery ?
i have searched , not find answer in stack.
i passing 2 fields : 1) date-time (y axis) 2) no of downloads on date (x axis)
does body used kind facility in website? plugin should use?
this html
<section class="panel corner-flip"> <header class="panel-heading no-borders"> <h2><strong>line</strong> chart </h2> <label class="color">plugin <strong> flot chart in table</strong></label> </header> <div class="widget-chart chart-dark"> <table class="flot-chart" data-type="lines" data-tool-tip="show" data-width="100%" data-height="220px"> <thead> <tr> <th></th> <th style="color : #3db9af;">page view</th> </tr> </thead> <tbody> <tr> <th>jan</th> <td>295</td> </tr> <tr> <th>feb</th> <td>3145</td> </tr> <tr> <th>mar</th> <td>1515</td> </tr> <tr> <th>apr</th> <td>4578</td> </tr> <tr> <th>may</th> <td>4041</td> </tr> <tr> <th>jun</th> <td>12090</td> </tr> <tr> <th>jul</th> <td>4235</td> </tr> <tr> <th>aug</th> <td>1215</td> </tr> <tr> <th>sep</th> <td>2315</td> </tr> <tr> <th>oct</th> <td>5315</td> </tr> <tr> <th>nov</th> <td>2015</td> </tr> <tr> <th>dec</th> <td>315</td> </tr> </tbody> </table>
and js file...
var bars = false, lines = true, pie=false; var createflot=function($chagetype , $change){ var el=$("table"+($change ? $change:".flot-chart")); el.each(function() { var colors = [], data = $(this).data(), gridcolor=data.tickcolor || "rgba(0,0,0,0.2)"; $(this).find("thead th:not(:first)").each(function() { colors.push($(this).css("color")); }); if($chagetype){ bars = $chagetype.indexof("bars") != -1; lines = $chagetype.indexof("lines") != -1; pie = $chagetype.indexof("pie") != -1; $(this).next(".chart_flot").hide(); }else{ if(data.type){ bars = data.type.indexof("bars") != -1; lines = data.type.indexof("lines") != -1; pie = data.type.indexof("pie") != -1; } } $(this).graphtable({ series: 'columns', position: data.position || 'after', width: data.width, height: data.height, colors: colors }, { series: { stack: data.stack , pie: { show: pie , innerradius: data.innerradius || 0, stroke: { shadow: data.piestyle=="shadow" ? true:false } , label:{ show:data.pielabel } }, bars: { show: bars , barwidth: data.barwidth || 0.5, fill: data.fill || 1, align: "center" } ,lines: { show: lines , fill:0.1 , steps: data.steps } }, xaxis: { mode: data.mode || "categories", ticklength: 0 }, yaxis: { tickcolor: gridcolor ,max:data.yaxismax, tickformatter: function number(x) { var num; if (x >= 1000) { num=(x/1000)+"k"; }else{ num=x; } return num; } }, grid: { borderwidth: {top: 0, right: 0, bottom: 1, left: 1},color : gridcolor }, tooltip: data.tooltip=="show" ? true:false , tooltipopts: { content: (pie ? "%p.0%, %s":"<b>%s</b> : %y") } }); }); } // create flot chart createflot(); $(".chart-change a").click(function (e) { var el=$(this),data=el.data(); el.closest(".chart-change").find("a").toggleclass("active"); el.closest(".chart-change").find("li").toggleclass("active"); createflot(data.changetype,data.forid); }); $(".label-flot-custom").each(function () { var el=$(this), data=el.data() ,colors = [] ,lable=[] , li=""; $(data.flotid).find("thead th:not(:first)").each(function() { colors.push($(this).css("color")); lable.push($(this).text()); }); for(var i=0;i<lable.length;i++){ li += '<li><span style="background-color:'+ colors[i] +'"></span>'+ lable[i] +" ( "+$(data.flotid).find("tbody td").eq(i).text()+' ) </li> '; } el.append("<ul>"+li+"</ul>"); if($(data.flotid).prev(".label-flot-custom-title")){ var height=$(data.flotid).next(".chart_flot").css("height"); $(data.flotid).prev(".label-flot-custom-title").css({"height":height, "line-height":height }); } });
try example solve question.
here link example: line charts example
and can change labels on x- axis using syntax:
labels: ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"] just try change in php
labels: [ <?php foreach($month $value){ echo '"'.$value.'"'; } ?>] 
Comments
Post a Comment