xcharts-demo-1.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. $(function() {
  2. var tt = document.createElement('div'),
  3. leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')),
  4. topOffset = -32;
  5. tt.className = 'ex-tooltip';
  6. document.body.appendChild(tt);
  7. var data = {
  8. "xScale": "time",
  9. "yScale": "linear",
  10. "main": [{
  11. "className": ".pizza",
  12. "data": [{
  13. "x": "2012-11-05",
  14. "y": 6
  15. }, {
  16. "x": "2012-11-06",
  17. "y": 6
  18. }, {
  19. "x": "2012-11-07",
  20. "y": 8
  21. }, {
  22. "x": "2012-11-08",
  23. "y": 3
  24. }, {
  25. "x": "2012-11-09",
  26. "y": 4
  27. }, {
  28. "x": "2012-11-10",
  29. "y": 9
  30. }, {
  31. "x": "2012-11-11",
  32. "y": 6
  33. }]
  34. }]
  35. };
  36. var opts = {
  37. "dataFormatX": function(x) {
  38. return d3.time.format('%Y-%m-%d').parse(x);
  39. },
  40. "tickFormatX": function(x) {
  41. return d3.time.format('%A')(x);
  42. },
  43. "mouseover": function(d, i) {
  44. var pos = $(this).offset();
  45. $(tt).text(d3.time.format('%A')(d.x) + ': ' + d.y)
  46. .css({
  47. top: topOffset + pos.top,
  48. left: pos.left + leftOffset
  49. })
  50. .show();
  51. },
  52. "mouseout": function(x) {
  53. $(tt).hide();
  54. }
  55. };
  56. var myChart = new xChart('line-dotted', data, '#example4', opts);
  57. });