XhiveFramework Charts

Create a chart

  <!--HTML-->
  <div id="chart"></div>

  // Javascript
  let chart = new xhiveframework.Chart( "#chart", { // or DOM element
    data: {
      labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
      "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],

      datasets: [
        {
          name: "Some Data", chartType: 'bar',
          values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
          name: "Another Set", chartType: 'bar',
          values: [25, 50, -10, 15, 18, 32, 27, 14]
        },
        {
          name: "Yet Another", chartType: 'line',
          values: [15, 20, -3, -15, 58, 12, -17, 37]
        }
      ],

      yMarkers: [{ label: "Marker", value: 70,
        options: { labelPos: 'left' }}],
      yRegions: [{ label: "Region", start: -10, end: 50,
        options: { labelPos: 'right' }}]
    },

    title: "My Awesome Chart",
    type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage', 'donut'
    height: 300,
    colors: ['purple', '#ffa3ef', 'light-blue'],

    tooltipOptions: {
      formatTooltipX: d => (d + '').toUpperCase(),
      formatTooltipY: d => d + ' pts',
    }
  });

  chart.export();

Listen to state change

Europa

Semi-major-axis: 671034 km

Mass: 4800000 x 10^16 kg

Diameter: 3121.6 km

  ...
  isNavigable: 1, // Navigate across data points; default 0
  ...

  chart.parent.addEventListener('data-select', (e) => {
    update_moon_data(e.index); // e contains index and value of current datapoint
  });

And a Month-wise Heatmap

  let heatmap = new xhiveframework.Chart("#heatmap", {
    type: 'heatmap',
    title: "Monthly Distribution",
    data: {
      dataPoints: {'1524064033': 8, /* ... */},
                        // object with timestamp-value pairs
      start: startDate
      end: endDate      // Date objects
    },
    countLabel: 'Level',
    discreteDomains: 0  // default: 1
    colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
                // Set of five incremental colors,
                // preferably with a low-saturation color for zero data;
                // def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
  });

Available options


    ...
    {
      data: {
        labels: [],
        datasets: [],
        yRegions: [],
        yMarkers: []
      }
      title: '',
      colors: [],
      height: 200,

      tooltipOptions: {
        formatTooltipX: d => (d + '').toUpperCase(),
        formatTooltipY: d => d + ' pts',
      }

      // Axis charts
      isNavigable: 1,        // default: 0
      valuesOverPoints: 1,   // default: 0
      barOptions: {
        spaceRatio: 1        // default: 0.5
        stacked: 1           // default: 0
      }

      lineOptions: {
        dotSize: 6,          // default: 4
        hideLine: 0,         // default: 0
        hideDots: 1,         // default: 0
        heatline: 1,         // default: 0
        regionFill: 1        // default: 0
      }

      axisOptions: {
        yAxisMode: 'span',   // Axis lines, default
        xAxisMode: 'tick',   // No axis lines, only short ticks
        xIsSeries: 1         // Allow skipping x values for space
                              // default: 0
      },

      // Pie/Percentage/Donut charts
      maxLegendPoints: 6,    // default: 20
      maxSlices: 10,         // default: 20

      // Percentage chart
      barOptions: {
        height: 15           // default: 20
        depth: 5             // default: 2
      }

      // Heatmap
      discreteDomains: 1,    // default: 1
    }
    ...

  // Updating values
  chart.update(data);

  // Axis charts:
  chart.addDataPoint(label, valueFromEachDataset, index)
  chart.removeDataPoint(index)
  chart.updateDataset(datasetValues, index)

  // Exporting
  chart.export();

  // Unbind window-resize events
  chart.destroy();

Install

Install via npm

  npm install xhiveframework-charts

And include it in your project

  import { Chart } from "xhiveframework-charts"

(for ES6+ import the ESModule from the dist folder)

  import { Chart } from "xhiveframework-charts/dist/xhiveframework-charts.esm.js"

... or include it directly in your HTML

  <script src="https://unpkg.com/xhiveframework-charts@1.1.0"></script>

Use as:

  new Chart();          // ES6 module
                        // or
  new xhiveframework.Chart();   // Browser