title: Draw line chart dynamically using database values
body: <p>i am trying to draw line chart , but don't know how to pass dynamic database values in LineChart using jquery ?</p>
  
  <p>i have already searched , but could not find answer in stack.</p>
  
  <p>i am passing two fields : 
  1) date-time  (Y axis)
  2) no of downloads on that date (X axis)</p>
  
  <p>Does any body used this kind facility in their website? which plugin should i use?</p>
  
  <p>this is html </p>
  
  <pre><code>&lt;section class="panel corner-flip"&gt;
  &lt;header class="panel-heading no-borders"&gt;
    &lt;h2&gt;&lt;strong&gt;LINE&lt;/strong&gt; Chart &lt;/h2&gt;
    &lt;label class="color"&gt;Plugin &lt;strong&gt; Flot chart in table&lt;/strong&gt;&lt;/label&gt;
  &lt;/header&gt;
  &lt;div class="widget-chart chart-dark"&gt;
    &lt;table class="flot-chart" data-type="lines" data-tool-tip="show" data-width="100%" data-height="220px"&gt;
       &lt;thead&gt;
          &lt;tr&gt;
             &lt;th&gt;&lt;/th&gt;
             &lt;th style="color : #3db9af;"&gt;Page View&lt;/th&gt;
          &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
          &lt;tr&gt;
             &lt;th&gt;JAN&lt;/th&gt;
             &lt;td&gt;295&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;FEB&lt;/th&gt;
             &lt;td&gt;3145&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;MAR&lt;/th&gt;
             &lt;td&gt;1515&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;APR&lt;/th&gt;
             &lt;td&gt;4578&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;MAY&lt;/th&gt;
             &lt;td&gt;4041&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;JUN&lt;/th&gt;
             &lt;td&gt;12090&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;JUL&lt;/th&gt;
             &lt;td&gt;4235&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;AUG&lt;/th&gt;
             &lt;td&gt;1215&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;SEP&lt;/th&gt;
             &lt;td&gt;2315&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;OCT&lt;/th&gt;
             &lt;td&gt;5315&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;NOV&lt;/th&gt;
             &lt;td&gt;2015&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;th&gt;DEC&lt;/th&gt;
             &lt;td&gt;315&lt;/td&gt;
          &lt;/tr&gt;
       &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>and this is js file...</p>
  
  <pre><code>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 &gt;= 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":"&lt;b&gt;%s&lt;/b&gt; :  %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&lt;lable.length;i++){
                      li += '&lt;li&gt;&lt;span style="background-color:'+ colors[i] +'"&gt;&lt;/span&gt;'+ lable[i] +" ( "+$(data.flotId).find("tbody td").eq(i).text()+' ) &lt;/li&gt; ';
                  }
                  el.append("&lt;ul&gt;"+li+"&lt;/ul&gt;");
                  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 });
                  }
          });
  </code></pre>