Custom Charts

HENGSHI SENSE supports dozens of charts, including bar charts, pie charts, line charts, relationship charts, scatter plots, heat maps, tables, maps, and more. Each chart type offers a rich variety of presentation styles, catering to most data analysis scenarios. However, in certain specific situations, users may have unique, customized chart requirements. To address this, HENGSHI SENSE has introduced a custom chart feature, allowing users to write their own JS code to achieve chart customization.

Create Custom Charts

Custom charts are different from other charts, where other charts are created through drag-and-drop, custom charts are created by writing JS code, so the creation process is also different from other charts. Below is an introduction to the process of creating custom charts.

1. Design the Chart. Before creating a custom chart, please first design the chart. This includes chart style, dimensions, measures, interaction operations, and other related information. For example, if a chart is to display the sales of various products by month throughout the year, one chart would display twelve pie charts. Drag the product category into dimensions and the sales data for each month into measures.
2. Create a JS Chart. After completing the chart design, proceed to the code implementation stage. Click New Chart in the app creation dashboard and select JS Chart.
3. Write Code. Click Write Code in the style settings to enter the code writing interface. Please refer to the Custom Chart API for the provided API interfaces.
4. Debug. After implementing the code, drag in dimensions, measures, and other relevant information to view the chart's display style and interaction operations. Continuously debug the code until the chart meets the design requirements.

Tip

1. Please pay attention to the version of the third-party libraries supported in custom icons, and the chart implementation should be within the supported version range.

Custom Chart Interactions

Custom charts support in-chart filters, drill-down, and interaction with other charts.

Custom Chart Examples

This article provides some examples of custom charts that can be downloaded and experienced directly.

• Example 1 This example dynamically showcases the change in life expectancy per capita from 1800 to 2015 as it relates to the gross national product, allowing you to view any year. This example is implemented using ECharts third-party related functions. The effect is shown in the figure below. Example 1 Data.zip

• Example 2 This example showcases a 3D rotating animation scene of the world map. It is suitable for large screen display. This example is implemented using D3 third-party related functions. The effect is shown in the figure below. Example 2 Data.zip

Custom Chart API

Below are the APIs provided in Custom Icons and their usage instructions.

params.axes

• Function Description Axis configuration in the chart corresponds to the axis dragged in, where the axisName for dimensions is 'group' and the axisName for measures is 'metric'.
• Parameters None.
• Example

params.axes[0].axisName

params.data

• Function Description The data returned by the interface corresponds to the axes dragged in.

• params.data.data is the original data returned by the interface.

• params.data.schema returns the preprocessed data, where dataUniq is deduplicated and sorted according to the configuration.

• Parameters None.

• Example

data_Country = params.data.schema[3].dataUniq;

params.width

• Function Description The width of the container.
• Parameters None.
• Example

const width = params.width;

params.height

• Function Description Container height.
• Parameters None.
• Example

const height = params.height;

params.getD3

• Function Description Get the D3 library, the currently supported version is 7.0.1.
• Parameters None.
• Example

const d3 = params.getD3();

params.getEcharts

• Function Description Get ECharts, the currently supported version is 4.9.
• Parameters None.
• Example

var EChart = params.getEcharts();

params.getEchartsItem

• Function Description Get the ECharts instance.
• Parameters None.
• Example

var myChart = params.getEchartsItem();

params.getThree

• Function Description Get Three.js, the currently supported version is 0.132.2.
• Parameters None.
• Example

const THREE = params.getThree();

params.getTween

• Function Description Get Tween.js, the currently supported version is 18.6.4.
• Parameters None.
• Example

const TWEEN = params.getTween();

params.createElement

• Function Description Method for creating elements.
• Parameters

{string} str

• Return Value

{HTMLElement}

• Example

var divElement = params.createElement('div');

params.appendChild

• Function Description Add a Dom to the container.
• Parameters HTMLElement type element.
• Example

var divElement = params.createElement('div');
params.appendChild(divElement);

params.getParentDOM

• Function Description Get the parent element, up to the container node.
• Parameters HTMLElement type element.
• Return Value HTMLElement type element or null.
• Example

var divElement = params.createElement('div');
params.appendChild(divElement);
params.getParentDOM(childElement);   // The return value is divElement

params.setInnerHTML

• Function Description Set the innerHTML of the container.
• Parameters The HTML fragment to be set in the container.
• Example

if (!axes || axes.length !== 2 || axes[0].axisName !== 'group' || axes[1].axisName !== 'metric') {
  // If it is not one dimension and one metric, prompt
  params.setInnerHTML(
    '<div style="text-align:center;line-height:' + params.height + 'px;">'
      +    '<span>This chart only supports the configuration of 1 dimension and 1 metric, please edit in the configuration area</span>'
      +  '</div>'
  );
  return;
}

clickOptions

• Function Description Click event.
• Parameters

* @property {string} className  The className of the current element in the click event
* @property {string} id  The id of the current element in the click event
* @property {number} x  The horizontal relative position of the current mouse in the container
* @property {number} y  The vertical relative position of the current mouse in the container
* @property {string} data  The content of the attribute named data bound to the element

• Example None.

params.bindClickListener

• Function Description Bind click events.
• Parameters

param {Function} clickHandler The handler function for clicking the page, which takes one parameter clickOptions

• Example

params.bindClickListener(function(clickOptions) {
	if (clickOptions.data) {
    params.onHSClickHandler([{
      data: clickOptions.data,
      path: 0
    }]);
  }
})

params.currentHighlight.clickEventData

• Function Description Click event data.
• Parameters

param {string} data Dimension value
param {string | number} path Axis position corresponding to the dimension value, e.g.: 0 (first axis); '1.1' (second axis's second sub-axis)

• Example

for (var i = 0; i < params.data.schema[1].data.length; i++) {
  if (params.currentHighlight
    && params.currentHighlight.clickEventData
    && params.currentHighlight.clickEventData[0].data === params.data.schema[0].data[i]) {
    // Set linkage filter highlight
    data.push({
      value: params.data.schema[1].data[i],
      itemStyle: {
        color: '#6173c9'
      }
    });
  } else {
    data.push(params.data.schema[1].data[i]);
  }
}

params.onHSClickHandler

• Function Description Trigger HENGSHI SENSE interaction.
• Parameters

param {Array<clickEventData>} clickData Data to be passed

• Example

myChart.on('click', function (option) {
  params.onHSClickHandler([{
    data: option.name,
    path: 0,
  }])
});

params.getContext

• Function Description Get the background of the canvas.
• Parameters Parameter: Background type '2d' | 'webgl' | 'webgl2'
• Return Value

CanvasRenderingContext2D
WebGLRenderingContext
WebGL2RenderingContext

• Example

var context = params.getContext('2d');

params.bindUnmountHandler

• Function Description params.bindUnmountHandler binds the method to be executed when unmounting, such as unmounting components, clearing setTimeout, etc.
• Parameters None.
• Example

var timer = setInterval(function () {
  .......
}, 100);
params.bindUnmountHandler(function () {
  clearInterval(timer);
});