JQuery Flot Charts with Time Series

Posted by Komol on August 18, 2011 at 5:50 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:                  //"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:          '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:  }

 

 


Categories: JavaScript, JQUERY, ASP.NET

Post a Comment

Oops!

Oops, you forgot something.

Oops!

The words you entered did not match the given text. Please try again.

You must be a member to comment on this page. Sign In or Register

0 Comments