Documentation v3.0.6

Overview

Line chart based on ApexCharts.

Reference

Instance Methods

Name Description

Name	Description
`public constructor()`	Create a new instance of the LineChart class. Parameters: `element: string\|HTMLElement\|JQuery` HTMLElement selector, element, or JQuery object. `options: LineChartOptions` Chart options. `ajax.method?: 'GET'\|'POST'\|'PUT'` HTTP method of the request. Default is "GET". `ajax.url: string` URL to request. This option is required. The response must return an array of the following type. If it returns a different type, use the ajax.dataSrc option to convert it. `name: string` Data name. This value is used in tooltips and other displays. This option is required. `category: string` Category name. Data will be grouped by category and each data will be displayed in the chart as a child of the category. This option is required. `data: number` Data Value. This option is required. `color?: string` Line color. Default is "#009EF7". `ajax.data?: (data: object) => object` Callback function to add or change data to be sent to the server. Default is none (undefined). `data: data => { data.extra = 'Extra'; }` `ajax.dataSrc?: (data: LineChartResponse[]\|any) => LineChartResponse[]` Callback function to add or modify data retrieved from the server. Default is none (undefined). `dataSrc: data => { // Calculate and display data totals. const total = data.reduce((total, item) => { return total + item.data; }, 0); document.getElementById('total').textContent = total; // Returns data to be drawn on the chart. return data; }` `gradient?: boolean` When enabled, the line is filled with a gradient. Default is true. `lineWidth?: number` The line width (in pixels). Default is 1. `xAxisTickAmount?: number` Number of Tick Intervals to show on the x-axis. Default is x-axis data counts. `xAxisFormatter?: (value: string\|number) => string` Callback function to change the display value of the X-axis label. The default is none (undefined), which displays the original value. `xAxisFormatter: value => { // Converts values to a locale-specific format and displays them. return Number(value).toLocaleString(); }` `yAxisOpposite?: boolean` When enabled, will draw the yaxis on the right side of the chart. Default is false. `yAxisFormatter?: (value: string\|number) => string` Callback function to change the display value of the Y-axis label. The default is none (undefined), which displays the original value. `yAxisFormatter: value => { // Converts values to a locale-specific format and displays them. return Number(value).toLocaleString(); }` `tooltipDataFormatter?: (value: number) => string` A callback function that changes the value displayed in the numeric data on the tooltip. Default is none (undefined), displaying the original value.
`public reload()`	Redraw the chart. Return: `Promise<void>`

public constructor()

Create a new instance of the LineChart class.

Parameters:

element: string|HTMLElement|JQuery
HTMLElement selector, element, or JQuery object.
options: LineChartOptions
Chart options.
- ajax.method?: 'GET'|'POST'|'PUT'
  HTTP method of the request. Default is "GET".
- ajax.url: string
  URL to request. This option is required. The response must return an array of the following type. If it returns a different type, use the ajax.dataSrc option to convert it.
  - name: string
    Data name. This value is used in tooltips and other displays. This option is required.
  - category: string
    Category name. Data will be grouped by category and each data will be displayed in the chart as a child of the category. This option is required.
  - data: number
    Data Value. This option is required.
  - color?: string
    Line color. Default is "#009EF7".
- ajax.data?: (data: object) => object
  Callback function to add or change data to be sent to the server. Default is none (undefined).
  data: data => { data.extra = 'Extra'; }
- ajax.dataSrc?: (data: LineChartResponse[]|any) => LineChartResponse[]
  Callback function to add or modify data retrieved from the server. Default is none (undefined).
  dataSrc: data => { // Calculate and display data totals. const total = data.reduce((total, item) => { return total + item.data; }, 0); document.getElementById('total').textContent = total; // Returns data to be drawn on the chart. return data; }
- gradient?: boolean
  When enabled, the line is filled with a gradient. Default is true.
- lineWidth?: number
  The line width (in pixels). Default is 1.
- xAxisTickAmount?: number
  Number of Tick Intervals to show on the x-axis.
  Default is x-axis data counts.
- xAxisFormatter?: (value: string|number) => string
  Callback function to change the display value of the X-axis label.
  The default is none (undefined), which displays the original value.
  xAxisFormatter: value => { // Converts values to a locale-specific format and displays them. return Number(value).toLocaleString(); }
- yAxisOpposite?: boolean
  When enabled, will draw the yaxis on the right side of the chart. Default is false.
- yAxisFormatter?: (value: string|number) => string
  Callback function to change the display value of the Y-axis label.
  The default is none (undefined), which displays the original value.
  yAxisFormatter: value => { // Converts values to a locale-specific format and displays them. return Number(value).toLocaleString(); }
- tooltipDataFormatter?: (value: number) => string
  A callback function that changes the value displayed in the numeric data on the tooltip. Default is none (undefined), displaying the original value.

public reload()

Redraw the chart.

Return:

Promise<void>

Instance Properties

Name	Description
`public instance: ApexCharts\|undefined`	Read-only ApexCharts instance.

Single Line Chart

              <div id="singleLineChart"></div>

              import {components} from 'metronic-extension';

// Initialize chart.
const singleLineChart = new components.LineChart(document.getElementById('singleLineChart'), {
  ajax: {
    url: 'json/single-linechart.json',
  },
  yAxisFormatter: value => {
    // Comma-separate the values.
    return `${Number(value).toLocaleString()} items`;
  },
  tooltipDataFormatter: value => {
    // Comma-separate the values and add units.
    return `${Number(value).toLocaleString()} items`;
  },
});

This chart loads data via Ajax. The latest data loaded is shown below.

              [
  {"name": "Series1", "category": "May 04", "data": 190},
  {"name": "Series1", "category": "May 05", "data": 230},
  {"name": "Series1", "category": "May 06", "data": 230},
  {"name": "Series1", "category": "May 09", "data": 200},
  {"name": "Series1", "category": "May 10", "data": 200},
  {"name": "Series1", "category": "May 12", "data": 190},
  {"name": "Series1", "category": "May 14", "data": 190},
  {"name": "Series1", "category": "May 17", "data": 200},
  {"name": "Series1", "category": "May 18", "data": 200},
  {"name": "Series1", "category": "May 20", "data": 220},
  {"name": "Series1", "category": "May 22", "data": 220},
  {"name": "Series1", "category": "May 24", "data": 200},
  {"name": "Series1", "category": "May 26", "data": 200},
  {"name": "Series1", "category": "May 28", "data": 210},
  {"name": "Series1", "category": "May 30", "data": 210}
]

Multi-line chart

              <!--begin::Wrapper-->
<div class="d-flex flex-stack flex-wrap mb-5">
  <!--begin::Search-->
  <div class="d-flex align-items-center position-relative my-1 mb-2 mb-md-0">
    <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
    <span class="svg-icon svg-icon-1 position-absolute ms-4">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
        <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
      </svg>
    </span>
    <!--end::Svg Icon-->
    <input id="multiLineChartKeyword" type="text" class="form-control form-control-solid w-300px ps-15" placeholder="Search by name e.g. Series1" maxlength="20" />
  </div>
  <!--end::Search-->
</div>
<!--end::Wrapper-->
<!--begin::Chart-->
<div id="multiLineChart"></div>
<!--end::Chart-->

              import {components} from 'metronic-extension';

function initMultiLineChart() {
  return new components.LineChart(document.getElementById('multiLineChart'), {
    ajax: {
      url: 'json/multi-linechart.json',
      dataSrc: data => {
        // Filter chart data by categories matching the entered keywords.
        // Normally, use the ajax.data option to set the keywords as request parameters and perform the filtering on the server side.
        const keyword = multiLineChartKeyword.value.replace(/^[\s　]+|[\s　]+$/g, '');
        if (!keyword)
          // If the keyword is empty, all data is displayed.
          return data;

        // Return only data with keywords in the name.
        return data.filter(item => item.name.includes(keyword));
      },
    },
    yAxisFormatter: value => {
      // Comma-separate the values.
      return `${Number(value).toLocaleString()} items`;
    },
    tooltipDataFormatter: value => {
      // Comma-separate the values and add units.
      return `${Number(value).toLocaleString()} items`;
    },
  });
}

function initMultiLineChartSearchForm() {
  // Timer to prevent duplicate filtering runs.
 let searchTimer;
  multiLineChartKeyword.addEventListener('input', () => {
    // Cancel a reserved filtering request.
    if (searchTimer)
      clearTimeout(searchTimer);

    // Scheduled filtering runs.
    searchTimer = setTimeout(() => {
      // Filtering chart data.
      multiLineChart.reload();
    }, 1000);
  });
}

// Search keyword input field.
const multiLineChartKeyword = document.getElementById('multiLineChartKeyword');

// Initialize chart.
const multiLineChart = initMultiLineChart();

// Initialize events, etc.
initMultiLineChartSearchForm();

This chart loads data via Ajax. The latest data loaded is shown below.

              [
  {"name": "Series1", "category": "01:00", "data": 50, "color": "#009EF7"},
  {"name": "Series1", "category": "02:00", "data": 50, "color": "#009EF7"},
  {"name": "Series1", "category": "03:00", "data": 100, "color": "#009EF7"},
  {"name": "Series1", "category": "04:00", "data": 50, "color": "#009EF7"},
  {"name": "Series1", "category": "05:00", "data": 50, "color": "#009EF7"},
  {"name": "Series1", "category": "06:00", "data": 90, "color": "#009EF7"},
  {"name": "Series1", "category": "07:00", "data": 70, "color": "#009EF7"},
  {"name": "Series1", "category": "08:00", "data": 80, "color": "#009EF7"},
  {"name": "Series1", "category": "09:00", "data": 70, "color": "#009EF7"},
  {"name": "Series1", "category": "10:00", "data": 70, "color": "#009EF7"},
  {"name": "Series1", "category": "11:00", "data": 60, "color": "#009EF7"},
  {"name": "Series1", "category": "12:00", "data": 60, "color": "#009EF7"},
  {"name": "Series2", "category": "01:00", "data": 20, "color": "#50CD89"},
  {"name": "Series2", "category": "02:00", "data": 40, "color": "#50CD89"},
  {"name": "Series2", "category": "03:00", "data": 30, "color": "#50CD89"},
  {"name": "Series2", "category": "04:00", "data": 40, "color": "#50CD89"},
  {"name": "Series2", "category": "05:00", "data": 30, "color": "#50CD89"},
  {"name": "Series2", "category": "06:00", "data": 10, "color": "#50CD89"},
  {"name": "Series2", "category": "07:00", "data": 20, "color": "#50CD89"},
  {"name": "Series2", "category": "08:00", "data": 40, "color": "#50CD89"},
  {"name": "Series2", "category": "09:00", "data": 10, "color": "#50CD89"},
  {"name": "Series2", "category": "10:00", "data": 40, "color": "#50CD89"},
  {"name": "Series2", "category": "11:00", "data": 10, "color": "#50CD89"},
  {"name": "Series2", "category": "12:00", "data": 20, "color": "#50CD89"}
]