gramex-bullet-chart

Bullet Chart Generator

Overview

This JavaScript function, drawBulletChart, generates a bullet chart using D3.js. The bullet chart is a compact and efficient way to display performance data, comparing a primary measure to one or more other measures. It is particularly useful for visualizing key performance indicators (KPIs) and their targets.

Usage

Parameters

• selector (string): The CSS selector for the container where the bullet chart will be rendered.
• config (object): Configuration settings for the chart.
  • width (number): The width of the chart.
  • height (number): The height of the chart.
  • rectColors (object): Object containing color settings for different chart elements.
    • frontColor (string): Color of the front rectangle representing the current value.
    • backColor (string): Color of the back rectangle representing the previous value.
    • targetColor (string): Color of the target line.
  • font (object): Font settings for chart text.
    • title (object): Title text settings.
      • size (number): Font size.
      • color (string): Font color.
    • subtitle (object): Subtitle text settings.
      • size (number): Font size.
      • color (string): Font color.
    • comparison (object): Comparison text settings.
      • size (number): Font size.
      • color (string): Font color.
    • currentPeriod (object): Current period text settings.
      • size (number): Font size.
      • color (string): Font color.
• data (array): An array of objects, each containing data for a single bullet chart.
  • max (number): The maximum value for scaling.
  • previous (number): The previous value.
  • current (number): The current value.
  • target (number): The target value.
  • previousTitle (string): Tooltip text for the previous value.
  • currentTitle (string): Tooltip text for the current value.
  • targetTitle (string): Tooltip text for the target value.
  • titleText (string): Title text for the chart.
  • subtitleText (string): Subtitle text for the chart.
  • comparisonText (string): Comparison text for the chart.
  • currentPeriodText (string): Text for the current period.

Example

const selector = "#chart-container";
const config = {
  width: 300,
  height: 80,
  rectColors: {
    frontColor: "#3498db",
    backColor: "#ecf0f1",
    targetColor: "#e74c3c",
  },
  font: {
    title: { size: 14, color: "#333" },
    subtitle: { size: 12, color: "#555" },
    comparison: { size: 10, color: "#777" },
    currentPeriod: { size: 10, color: "#888" },
  },
};

const data = [
  {
    max: 100,
    previous: 70,
    current: 85,
    target: 90,
    previousTitle: "Previous Value: 70",
    currentTitle: "Current Value: 85",
    targetTitle: "Target Value: 90",
    titleText: "Sales Performance",
    subtitleText: "This Month",
    comparisonText: "vs Last Month",
    currentPeriodText: "Current Period: Jan 2023",
  },
  // Add more data objects as needed
];

drawBulletChart(selector, config, data);