JQuery Flot Charts with Time Series

Tags: .NET, ASP.Net, JavaScript, JQuery

Tuesday, January 26, 2010 10:42:00 AM

Flot is an awesome library to produce the simple charts based on the great JQuery.

Using the date/time data (e.g. X-axis data type) is a little difficult to get working right but after exchanging the emails with the developer of the Flot library, I got it right and this solution I couldn’t find anywhere on Google/Bing.

Here’s the code snippet and I hope this helps.

This example uses our OLD json-based asmx ASP.Net service (sorry, I didn’t need to use WCF). :) You may have to tweak this code to suite your needs.

 

   1:  function LoadCharts() {
   2:      $.ajax({
   3:          type: "POST",
   4:          contentType: "application/json; charset=utf-8",
   5:          url: "SomeService.asmx/ChartData",
   6:          data: "{dataFor: 'blah'}",
   7:          success:
   8:      function(msg) {
   9:          ProcessCharts($.evalJSON(msg).d);
  10:      },
  11:          error:
  12:      function(XMLHttpRequest, textStatus, errorThrown) {        
  13:          alert(XMLHttpRequest.responseText);
  14:      }
  15:      });
  16:  }
  17:   
  18:  function ProcessCharts(tables) {
  19:      var plot0, plot1, plot2;
  20:      //Assume I've 3 tables in the result.
  21:      $(tables).each(function(i) {
  22:          var data = tables[i].Data;
  23:          var plotData = [];
  24:          var offset = new Date().getTimezoneOffset() * 60 * 1000; 
  25:          
  26:      //TODO: find a simple better way in jquery to do this.
  27:          for (var j = 0; j < data.length; j++) {
  28:              var d = data[j].Date; //my case the date is 20090101 format
  29:              d = d.substr(4, 2) + "/" + d.substr(6, 2) + "/" + d.substr(0, 4);
  30:              var date = new Date(d).getTime() - offset;
  31:              tables[i].Data[j].Date = date;
  32:   
  33:              plotData.push([date, data[j].Val]);
  34:          }
  35:          var previousPoint = null;
  36:          var lbl = "";
  37:          var options = {
  38:              colors: ['#123658', '#000000'],
  39:              series: {
  40:                  lines: { show: true, lineWidth: 2 },
  41:                  points: {
  42:                      show: true
  43:                  }
  44:              },
  45:              shadowSize: 5,
  46:              grid: {
  47:                  hoverable: true,
  48:                  clickable: false,
  49:                  borderWidth: 1,
  50:                  backgroundColor: '#ddf0ff'
  51:              },
  52:              legend: {
  53:                  show: false
  54:                  //position: "nw"
  55:              },
  56:              xaxis: {
  57:                  mode: "time",
  58:                  timeformat: "%m/%d/%y",
  59:                  minTickSize: [1, "day"] 
  60:              }
  61:          };
  62:          var InitChart = function() {
  63:   
  64:              $("#Chart" + i).remove();
  65:   
  66:              return $.plot($("#Chart" + i),
  67:              [{ data: plotData, label: lbl }],
  68:              options
  69:              );
  70:          }
  71:      //I've more tables in my case so change this code as per your need
  72:          switch (i.toString()) {
  73:              case "0":
  74:                  lbl = "Label1";
  75:                  plot0 = InitChart();
  76:                  break;
  77:              default:
  78:                  break;
  79:          }
  80:   
  81:          $("#Chart" + i).bind("plothover", function(event, pos, item) {
  82:              if (item) {
  83:                  if (previousPoint != item.datapoint) {
  84:                      previousPoint = item.datapoint;
  85:   
  86:                      $("#tooltip").remove();
  87:                      var x = item.datapoint[0], y = item.datapoint[1];
  88:   
  89:                      var d = new Date();
  90:                      d.setTime(x + offset);
  91:   
  92:                      showTooltip(item.pageX, item.pageY, "Total " + item.series.label + " of " + d.toDateString() + " is " + addCommas(y));
  93:                  }
  94:              }
  95:              else {
  96:                  $("#tooltip").remove();
  97:                  previousPoint = null;
  98:              }
  99:          });
 100:      });
 101:   
 102:  }
 103:   
 104:  function showTooltip(x, y, contents) {
 105:      $('<div id="tooltip">' + contents + '</div>').css({
 106:          position: 'absolute',
 107:          display: 'block',
 108:          "z-index": 10,
 109:          top: y + 5,
 110:          left: x + 5,
 111:          border: '1px solid #e17009',
 112:          padding: '3px',
 113:          'background-color': '#fee',
 114:          opacity: 0.70,
 115:          margin: '5px',
 116:          'font-size': '10px'
 117:      }).appendTo("body").fadeIn(200);
 118:  }

3 Comments

  • rachitp said

    @akhilparasa: You can use any sample JSON data format to use this code with. It's really no-brainer. Did you even try? Read the jFlot's documentation and you'll know what you need. Copy/pasting is easy but when you use a little of your brain as well, it'll be fun. Trust me! Good luck!

  • Lee Theobald said

    Thanks for the great article Rachit. It's nice to see a solid example as Flot's documentation can be lacking. I just wanted to point out some trouble that I was having incase anyone stumbles across this article first. I was attempting to use the above code but mark the data up as a bar chart. The trouble with this is that each bar was just 1px wide. The bar was being sized for the exact timestamp I supplied (so 0:00 on each day) instead of the 1 day I wanted (and my axis showed). The fix for me (as I was showing daily counts was to calculate the bar width manually). E.g. series : { bars : { show : true, barWidth : 24*60*60*1000 // 1 day in milliseconds } } With that in your flot options you get lovely wide bars!

Comments have been disabled for this content.