Examples

Your Basic Bar Chart

var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
var myChart = new xChart('bar', data, '#example1');

Multi-Series Bar Chart

var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    },
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 6
        },
        {
          "x": "Cheese",
          "y": 5
        }
      ]
    }
  ]
};
var myChart = new xChart('bar', data, '#example2');

Time-Series Line

var data = {
  "xScale": "time",
  "yScale": "linear",
  "type": "line",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "2012-11-05",
          "y": 1
        },
        {
          "x": "2012-11-06",
          "y": 6
        },
        {
          "x": "2012-11-07",
          "y": 13
        },
        {
          "x": "2012-11-08",
          "y": -3
        },
        {
          "x": "2012-11-09",
          "y": -4
        },
        {
          "x": "2012-11-10",
          "y": 9
        },
        {
          "x": "2012-11-11",
          "y": 6
        }
      ]
    }
  ]
};
var opts = {
  "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
  "tickFormatX": function (x) { return d3.time.format('%A')(x); }
};
var myChart = new xChart('line', data, '#example3', opts);

Interacting With Points

Mouse over the points on the chart to see tooltips.

var tt = document.createElement('div'),
  leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')),
  topOffset = -32;
tt.className = 'ex-tooltip';
document.body.appendChild(tt);

var data = {
  "xScale": "time",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "2012-11-05",
          "y": 6
        },
        {
          "x": "2012-11-06",
          "y": 6
        },
        {
          "x": "2012-11-07",
          "y": 8
        },
        {
          "x": "2012-11-08",
          "y": 3
        },
        {
          "x": "2012-11-09",
          "y": 4
        },
        {
          "x": "2012-11-10",
          "y": 9
        },
        {
          "x": "2012-11-11",
          "y": 6
        }
      ]
    }
  ]
};
var opts = {
  "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
  "tickFormatX": function (x) { return d3.time.format('%A')(x); },
  "mouseover": function (d, i) {
    var pos = $(this).offset();
    $(tt).text(d3.time.format('%A')(d.x) + ': ' + d.y)
      .css({top: topOffset + pos.top, left: pos.left + leftOffset})
      .show();
  },
  "mouseout": function (x) {
    $(tt).hide();
  }
};
var myChart = new xChart('line-dotted', data, '#example4', opts);

Example Custom Vis Type: Error Bars

Error bars are used to represent the variability of data displayed. In this example, I'll create a custom vis type for the errors, that can be used within the comp data set in xCharts. For detailed documentation of methods, check out the Custom Vis Types Documentation.

First, lets create our custom vis. There are many comments inline to help explain what we're doing:

var errorBar = {
  enter: function (self, storage, className, data, callbacks) {
    var insertionPoint = xChart.visutils.getInsertionPoint(9),
      container,
      // Map each error bar into 3 points, so it's easier to draw as a single path
      // Converts each point to a triplet with y from (y - e) to (y + e)
      // It would be better to use the `preUpdateScale` method here,
      // but for this quick example, we're taking a shortcut :)
      eData = data.map(function (d) {
        d.data = d.data.map(function (d) {
          return [{x: d.x, y: d.y - d.e}, {x: d.x, y: d.y}, {x: d.x, y: d.y + d.e}];
        });
        return d;
      }),
      paths;

    // It's always a good idea to create containers for sets
    container = self._g.selectAll('.errorLine' + className)
      .data(eData, function (d) {
        return d.className;
      });

    // The insertionPoint is a special method that helps us insert this
    // vis at a particular z-index
    // In this case, we've chosen the highest point (above everything else)
    container.enter().insert('g', insertionPoint)
      .attr('class', function (d, i) {
        return 'errorLine' + className.replace(/\./g, ' ') +
          ' color' + i;
      });

    // Tell each path about its data
    // and ensure we reuse any previously drawn item
    paths = container.selectAll('path')
      .data(function (d) {
        return d.data;
      }, function (d) {
        return d[0].x;
      });

    paths.enter().insert('path')
      .style('opacity', 0)
      .attr('d', d3.svg.line()
        .x(function (d) {
          // We offset by half the rangeBand, because this is a bar chart
          return self.xScale(d.x) + self.xScale.rangeBand() / 2;
        })
        .y(function (d) { return self.yScale(d.y); })
      );

    storage.containers = container;
    storage.paths = paths;
  },
  update: function (self, storage, timing) {
    // This is mostly duplication to the d3.svg.line from the enter() method
    storage.paths.transition().duration(timing)
      .style('opacity', 1)
      .attr('d', d3.svg.line()
        .x(function (d) {
          return self.xScale(d.x) + self.xScale.rangeBand() / 2;
        })
        .y(function (d) { return self.yScale(d.y); })
      );
  },
  exit: function (self, storage, timing) {
    storage.paths.exit()
      .transition().duration(timing)
      .style('opacity', 0);
  },
  destroy: function (self, storage, timing) {
    storage.paths.transition().duration(timing)
      .style('opacity', 0)
      .remove();
  }
};

Next, we'll let xChart know about our new vis type:

xChart.setVis('error', errorBar);

Here's the first data set that is drawn on our example. Notice how in the comp data set, I've added an extra key to each point: e, which will tell us the margin of error:

var data = {
    "xScale": "ordinal",
    "yScale": "linear",
    "main": [
      {
        "className": ".errorExample",
        "data": [
          {
            "x": "Ponies",
            "y": 12
          },
          {
            "x": "Unicorns",
            "y": 23
          },
          {
            "x": "Trolls",
            "y": 1
          }
        ]
      }
    ],
    "comp": [
      {
        "type": "error",
        "className": ".comp.errorBar",
        "data": [
          {
            "x": "Ponies",
            "y": 12,
            "e": 5
          },
          {
            "x": "Unicorns",
            "y": 23,
            "e": 2
          },
          {
            "x": "Trolls",
            "y": 1,
            "e": 1
          }
        ]
      }
    ]
  };

Last: Create a new xChart with our data:

var myChart = new xChart('bar', data, '#exampleVis');