diff --git a/docs/chart/charts_overview.md b/docs/chart/charts_overview.md index 2a9a0a94..8cd4e151 100644 --- a/docs/chart/charts_overview.md +++ b/docs/chart/charts_overview.md @@ -6,31 +6,30 @@ description: You can have an overview of various Chart types in the documentatio # Overview of Chart types -DHTMLX Chart provides a variety of charts types that will help you to represent you data in the most suitable way. Each type of chart is easily configurable and can be adjusted according to your preferences. -All in all there are 11 types of chart, in the list below they are combined into groups for the sake of convenience: - -- Overview of Chart types - - [Line and Spline chart](#line-and-spline-chart) - - [Line chart](#line-chart) - - [Spline chart](#spline-chart) - - [Bar and X-Bar chart](#bar-and-x-bar-chart) - - [Bar chart](#bar-chart) - - [X-Bar chart](#x-bar-chart) - - [Area and SplineArea chart](#area-and-splinearea-chart) - - [Area chart](#area-chart) - - [SplineArea chart](#splinearea-chart) - - [Pie, Pie 3D and Donut chart](#pie-pie-3d-and-donut-chart) - - [Pie and Pie 3D chart](#pie-and-pie-3d-chart) - - [Donut chart](#donut-chart) - - [Radar chart](#radar-chart) - - [Scatter chart](#scatter-chart) - - [Treemap chart](#treemap-chart) - - [Calendar heatmap chart](#calendar-heatmap-chart) +DHTMLX Chart includes 13 chart types, so you can display your data in the best way. Every type is fully configurable. + +The list below groups the types by kind: + +- [Line and Spline chart](#line-and-spline-chart) + - [Line chart](#line-chart) + - [Spline chart](#spline-chart) +- [Bar and X-Bar chart](#bar-and-x-bar-chart) + - [Bar chart](#bar-chart) + - [X-Bar chart](#x-bar-chart) +- [Area and SplineArea chart](#area-and-splinearea-chart) + - [Area chart](#area-chart) + - [SplineArea chart](#splinearea-chart) +- [Pie, Pie 3D and Donut chart](#pie-pie-3d-and-donut-chart) + - [Pie and Pie 3D chart](#pie-and-pie-3d-chart) + - [Donut chart](#donut-chart) +- [Radar chart](#radar-chart) +- [Scatter chart](#scatter-chart) +- [Treemap chart](#treemap-chart) +- [Calendar heatmap chart](#calendar-heatmap-chart) ## Line and Spline chart -This is a basic chart type that shows changes of trends in progress over a period of time. Thus it will help you to display the dynamics of prices over a year or -how the number of staff has increased over several years. Choose this variant when your data has **more than 10 items**. +A basic chart type that shows how trends change over time. Use it to display price dynamics over a year or staff growth over several years. Choose this type when your data has **more than 10 items**. ### Line chart @@ -50,7 +49,7 @@ how the number of staff has increased over several years. Choose this variant wh ## Bar and X-Bar chart -The same as Line chart it displays data for certain periods. It greatly suits you if there are **less than 10 items** in your data set. +Like the Line chart, the Bar chart displays data for a set of periods. It works best when your data set has **fewer than 10 items**. ### Bar chart @@ -70,7 +69,7 @@ The same as Line chart it displays data for certain periods. It greatly suits yo ## Area and SplineArea chart -Area chart is based on the Line chart. The difference is that areas below lines are filled with color. This type of chart allows you to provide visual comparison of two or more values over time. +The Area chart builds on the Line chart, but fills the areas below the lines with color. Use it to compare two or more values over time. ### Area chart @@ -90,7 +89,7 @@ Area chart is based on the Line chart. The difference is that areas below lines ## Pie, Pie 3D and Donut chart -Pie chart and its variations are the best choice when you deal with proportions and percentages. It is a circular chart divided into proportional parts that illustrate relations between items in a data set. +The Pie chart and its variations are the best choice for proportions and percentages. Each chart splits a circle into parts that show how items in a data set relate to each other. ### Pie and Pie 3D chart @@ -112,8 +111,7 @@ Pie chart and its variations are the best choice when you deal with proportions ## Radar chart -This one is a two-dimensional chart that allows placing one or several series of values over multiple numerical variables. For example, Radar chart will help you to study how a number of parameters -relate to one item (the center point of a chart) and compare their values. +A two-dimensional chart that places one or more series of values over multiple numerical variables. Use the Radar chart to study how several parameters relate to one item (the center point of the chart) and to compare parameter values. ![Radar chart plotting two data series across multiple axes in DHTMLX Suite](/img/chart/radar_overview.png) @@ -123,7 +121,7 @@ relate to one item (the center point of a chart) and compare their values. ## Scatter chart -The peculiarity of Scatter Chart is that it allows exploring relations between two sets of data in order to find out possible dependencies or patterns. +The Scatter chart explores relations between two sets of data to reveal dependencies or patterns. ![Scatter chart plotting two value series as points on XY axes in DHTMLX Suite](/img/chart/scatter_overview.png) @@ -133,7 +131,7 @@ The peculiarity of Scatter Chart is that it allows exploring relations between t ## Treemap chart -A treemap chart presents a hierarchical visualization of data as a set of rectangular tiles and makes it easy to spot patterns. Several tiles can be collected into a group. The sizes of tiles are proportional to the values of the data items they represent. +The Treemap chart displays hierarchical data as a set of rectangular tiles, which makes patterns easy to spot. You can collect several tiles into a group. The size of each tile is proportional to the value of its data item. ![Treemap chart sizing planets by value with a color legend in DHTMLX Suite](/img/chart/treemap.png) @@ -143,15 +141,15 @@ A treemap chart presents a hierarchical visualization of data as a set of rectan **Related article:** [Treemap chart configuration](chart/configuration_properties.md#treemap-chart) -## Calendar heatmap chart +## Calendar heatmap chart :::tip PRO VERSION ONLY -The calendar heatmap chart is available only in the PRO version of the DHTMLX Chart (or DHTMLX Suite). +The Calendar heatmap chart is available only in the PRO version of DHTMLX Chart (or DHTMLX Suite). ::: -The calendar heatmap chart is a two dimensional calendar view that uses graduated colors to visualize certain number of events for specific days during a year or other specified period of time. The whole time period in the chart is divided into years and years into months. Each cell in a column corresponds to a day of the week. +This chart is a two-dimensional calendar view. It uses graduated colors to show how many events fall on each day of a year or another period. The chart divides the period into years, and each year into months. Each cell in a column corresponds to a day of the week. -The chart helps to display and identify daily patterns or anomalies over the necessary period. +The chart helps you identify daily patterns and anomalies over the chosen period. ![Calendar heatmap chart showing daily profit values by color over a year in DHTMLX Suite](/img/chart/heatmap_overview.png) @@ -162,6 +160,4 @@ The chart helps to display and identify daily patterns or anomalies over the nec - [Event Calendar. Integration with Suite Calendar heatmap chart](https://snippet.dhtmlx.com/0n3ta0je) - [Scheduler. Integration with Suite Calendar heatmap chart](https://snippet.dhtmlx.com/tlfazogt) - **Related article:** [Calendar heatmap chart configuration](chart/configuration_properties.md#calendar-heatmap-chart) - diff --git a/docs/chart/configuration_properties.md b/docs/chart/configuration_properties.md index ce94ec09..e5428f38 100644 --- a/docs/chart/configuration_properties.md +++ b/docs/chart/configuration_properties.md @@ -6,13 +6,13 @@ description: You can explore the configuration of Chart in the documentation of # Configuration -This chapter will guide you through the set of Chart configuration options. It explores both common DHTMLX Chart properties actual for all chart types and the config options individual for particular types. +This chapter describes the Chart configuration options. It covers both the properties that apply to all chart types and the options specific to particular types. -You need to set necessary properties from those listed below within the configuration object passed to the chart constructor function and thus adjust the chart settings to meet your needs. +Set the properties you need in the configuration object that you pass to the chart constructor. ## Main properties -DHTMLX Chart includes several configuration options that are mostly common for all chart types. They are: +DHTMLX Chart includes several configuration options that apply to most chart types: - [type](#type) - [scales](#scales) @@ -20,10 +20,9 @@ DHTMLX Chart includes several configuration options that are mostly common for a - [legend](#legend) - [maxPoints](#maxpoints) - ### type -- [](chart/api/chart_type_config.md) - (*string*) defines the [type of a chart](chart/charts_overview.md) to initialize; "bar", "x-bar" (for horizontal Bar chart), "line", "spline", "scatter", "area", +- [](chart/api/chart_type_config.md) - (`string`) defines the [type of a chart](chart/charts_overview.md) to initialize: "bar", "x-bar" (for horizontal Bar chart), "line", "spline", "scatter", "area", "splineArea", "donut", "pie", "pie3D", "radar", "treeMap", and "calendarHeatMap" ~~~js @@ -34,7 +33,7 @@ const chart = new dhx.Chart("chart_container", { ### scales -- [](chart/api/chart_scales_config.md) - (*object*) defines configuration of chart scales +- [](chart/api/chart_scales_config.md) - (`object`) defines the configuration of chart scales ~~~js const chart = new dhx.Chart("chart_container", { @@ -43,10 +42,10 @@ const chart = new dhx.Chart("chart_container", { ~~~ :::info -It is necessary to configure [](chart/api/chart_scales_config.md) for the Line, Spline, Bar, X-Bar, Area, SplineArea, Radar, or Scatter chart. +Configure [](chart/api/chart_scales_config.md) for the Line, Spline, Bar, X-Bar, Area, SplineArea, Radar, or Scatter chart. ::: -There are "left","right","top","bottom" and "radial" (for Radar chart) types of [scales](chart/api/chart_scales_config.md). +[Scales](chart/api/chart_scales_config.md) support five types: "left", "right", "top", "bottom", and "radial" (for the Radar chart). ~~~js const chart = new dhx.Chart("chart_container", { @@ -72,11 +71,11 @@ const chart = new dhx.Chart("chart_container", { **Related sample**: [Chart. Scale title](https://snippet.dhtmlx.com/5ir00fer) -Scales have both common and specific options. Check the full list of the available options for scales in the [API reference](chart/api/chart_scales_config.md). +Scales support both common and type-specific options. See the full list of scale options in the [API reference](chart/api/chart_scales_config.md). ### series -- [](chart/api/chart_series_config.md) - (*array*) defines configuration of chart series +- [](chart/api/chart_series_config.md) - (`array`) defines the configuration of chart series ~~~js const chart = new dhx.Chart("chart_container", { @@ -85,10 +84,10 @@ const chart = new dhx.Chart("chart_container", { ~~~ :::info -The [](chart/api/chart_series_config.md) configuration option is required for all types of charts. +The [](chart/api/chart_series_config.md) configuration option is required for all chart types. ::: -[Series](chart/api/chart_series_config.md) present an array of objects each of which contains a number of properties for rendering a separate [data set](chart/data_loading.md#preparing-data-set) on a chart. +[Series](chart/api/chart_series_config.md) is an array of objects. Each object defines how one [data set](chart/data_loading.md#preparing-data-set) appears on the chart. ~~~js const chart = new dhx.Chart("chart_container", { @@ -120,11 +119,11 @@ const chart = new dhx.Chart("chart_container", { **Related sample**: [Chart. Point types](https://snippet.dhtmlx.com/cbj54wwu) -See the full list of configuration options for chart series in the [API reference](chart/api/chart_series_config.md). +See all chart series options in the [API reference](chart/api/chart_series_config.md). ### legend -- [](chart/api/chart_legend_config.md) - (*object*) defines the configuration of a chart legend +- [](chart/api/chart_legend_config.md) - (`object`) defines the configuration of a chart legend ~~~js const chart = new dhx.Chart("chart_container", { @@ -133,10 +132,10 @@ const chart = new dhx.Chart("chart_container", { ~~~ :::info -The [](chart/api/chart_legend_config.md) configuration option is required for Treemap charts and is optional for other types of charts. +The [](chart/api/chart_legend_config.md) configuration option is required for Treemap charts and optional for other chart types. ::: -The [](chart/api/chart_legend_config.md) object may contain a number of options that define its configuration. +The [](chart/api/chart_legend_config.md) object can contain several options. ~~~js const chart = new dhx.Chart("chart_container", { @@ -159,12 +158,11 @@ const chart = new dhx.Chart("chart_container", { - [Chart. Enable legend](https://snippet.dhtmlx.com/00ei3q23) - [Chart. Legend position](https://snippet.dhtmlx.com/pgqf1yxj) -You can view the full list of the configuration options of chart legends in the [API reference](chart/api/chart_legend_config.md). - +See all chart legend options in the [API reference](chart/api/chart_legend_config.md). ### maxPoints -- [](chart/api/chart_maxpoints_config.md) - (*number*) displays an average number of values in case a data set is too large to show all the values in the chart +- [](chart/api/chart_maxpoints_config.md) - (`number`) sets the maximum number of data points; if the data set is larger, the chart displays averaged values ~~~js const chart = new dhx.Chart("chart_container", { @@ -602,7 +600,7 @@ The configuration object of [Calendar heatmap chart](chart/charts_overview.md#ca - [series: []](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-without-scales-calendar-heatmap) - and, optionally, [legend: {}](chart/api/chart_legend_config.md#the-list-of-config-options-for-legend-for-charts-without-scales-calendar-heatmap) -For example +For example: ~~~js const heatMapData = [ @@ -651,17 +649,17 @@ chart.data.parse(heatMapData); ### Default range of dates -The default range of dates for which Calendar heatmap chart will be shown is **from** the 1st of January of the minimal year found in the dataset **to** the 31st of December of the maximal year found in the dataset. +The default period for the Calendar heatmap chart runs **from** January 1 of the earliest year in the data set **to** December 31 of the latest year. ### Custom range of dates -If you have a large data set and don't need the chart to be shown for the [whole period of time](#default-range-of-dates), you may change a range of dates to display the chart during the necessary period of time. +If your data set is large and you do not need the [whole period](#default-range-of-dates), you can narrow the range of dates that the chart displays. -For this, use the **startDate** and **endDate** properties of the [series](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-without-scales-calendar-heatmap) property. +Set the `startDate` and `endDate` properties in the [series](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-without-scales-calendar-heatmap) configuration. #### 1. startDate & endDate -Let's take the following data set: +Consider the following data set: ~~~js const heatMapData = [ @@ -677,7 +675,7 @@ const heatMapData = [ ]; ~~~ -and consider how the chart will be shown depending on the values of the start and end dates. +The examples below show how the start and end dates affect the period that the chart covers. - **One year** @@ -698,7 +696,7 @@ const chart = new dhx.Chart("chart_container", config); chart.data.parse(heatMapData); ~~~ -As a result, the chart will be displayed for the period from "15/03/22" to "15/03/23" inclusively. +The chart then covers the period from "15/03/22" to "15/03/23" inclusive. - **One month** @@ -719,7 +717,7 @@ const chart = new dhx.Chart("chart_container", config); chart.data.parse(heatMapData); ~~~ -As a result, the chart will be displayed for the period from "01/03/22" to "31/03/22" inclusively. +The chart then covers the period from "01/03/22" to "31/03/22" inclusive. - **Any other period** @@ -740,11 +738,11 @@ const chart = new dhx.Chart("chart_container", config); chart.data.parse(heatMapData); ~~~ -As a result, the chart will be displayed for the period from "01/03/22" to "01/07/24" inclusively. +The chart then covers the period from "01/03/22" to "01/07/24" inclusive. #### 2. startDate -If you specify the start date but don't specify the end date, the period for which the chart will displayed depends both on the data set and the start date. +If you specify the start date but not the end date, the period that the chart covers depends on both the data set and the start date. ~~~js title="Example 1. Data in the range less than a year" {16} const heatMapData = [ @@ -771,7 +769,7 @@ const chart = new dhx.Chart("chart_container", config); chart.data.parse(heatMapData); ~~~ -As a result, the chart will be displayed for the period from "15/03/22" to "14/03/23" inclusively (i.e. for one year). +The chart then covers the period from "15/03/22" to "14/03/23" inclusive (that is, one year). ~~~js title="Example 2. Data in the range more than a year" {18} const heatMapData = [ @@ -800,11 +798,11 @@ const chart = new dhx.Chart("chart_container", config); chart.data.parse(heatMapData); ~~~ -As a result, the chart will be displayed for the period from "15/03/22" to "14/03/24" inclusively (i.e. for two years). +The chart then covers the period from "15/03/22" to "14/03/24" inclusive (that is, two years). #### 3. endDate -If you specify the end date but don't specify the start date, the period for which the chart will displayed depends both on the data set and the end date. Note, that in this case the chart will start from the 1st of January of the minimal year found in the dataset. +If you specify the end date but not the start date, the period that the chart covers depends on both the data set and the end date. Note that the chart starts from January 1 of the earliest year in the data set. ~~~js {18} const heatMapData = [ @@ -833,11 +831,11 @@ const chart = new dhx.Chart("chart_container", config); chart.data.parse(heatMapData); ~~~ -As a result, the chart will be displayed for the period from "01/01/22" to "15/05/23" inclusively. +The chart then covers the period from "01/01/22" to "15/05/23" inclusive. ## Mixed graphs in one chart -You can create a chart that combines several graphs of different types. Define each graph as an object in the `series` array and set the desired chart type via the `type` property. For example: +You can create a chart that combines graphs of different types. Define each graph as an object in the `series` array and set its type in the `type` property. For example: ~~~jsx const chart = new dhx.Chart("chart_container", { diff --git a/docs/chart/customization.md b/docs/chart/customization.md index 9f024b45..1507d81b 100644 --- a/docs/chart/customization.md +++ b/docs/chart/customization.md @@ -8,15 +8,15 @@ description: You can explore the customization of Chart in the documentation of ## Styling chart -There is a possibility to make changes in the look and feel of a chart. +Apply custom CSS classes to change chart appearance. ![Bar chart styled with custom CSS on a dark background and orange bars in DHTMLX Suite](/img/chart/custom_style.png) **Related sample**: [Chart. Styling (custom CSS)](https://snippet.dhtmlx.com/p82iew5s) -For this you need to take the following steps: +Follow these steps: -- add a new CSS class(es) with desired settings in the <style> section of your HTML page or in your file with styles (don't forget to include your file on the page in this case) +- Add one or more CSS classes in the ` ~~~ -- specify the name of the created CSS class (or names of classes separated by spaces) as the value of the [](chart/api/chart_css_config.md) property in the Chart configuration: +- Assign the class name (or several names separated by spaces) to the [](chart/api/chart_css_config.md) property: ~~~js const chart = new dhx.Chart("chart_container", { @@ -85,7 +85,7 @@ For example: **Related sample**: [Chart. Text template for scale labels](https://snippet.dhtmlx.com/nhm3438n) -While configuring chart scales you can add a template for the labels of the scales by using the **textTemplate** configuration option of [scales](chart/configuration_properties.md#scales): +Set the `textTemplate` option of [scales](chart/configuration_properties.md#scales) to add a template for scale labels: ~~~js {7-9} const chart = new dhx.Chart("chart_container", { @@ -116,7 +116,7 @@ const chart = new dhx.Chart("chart_container", { **Related sample**: [Chart. Bar chart. Gradient](https://snippet.dhtmlx.com/j3duyn2q) -It is possible to define a color gradient for bars with the help of the **gradient** option of [series](chart/configuration_properties.md#series). You need to set its value as a function that takes the color of the series filling in Hex format as a parameter: +Use the `gradient` option of [series](chart/configuration_properties.md#series) to define a color gradient for bars. Set it to a function that takes the series fill color as a Hex string: ~~~js {16-31} const chart = new dhx.Chart("chart_container", { @@ -161,7 +161,7 @@ const chart = new dhx.Chart("chart_container", { **Related sample**: [Chart. Tooltip template](https://snippet.dhtmlx.com/mbz7dkku) -You can easily define a template for showing values of data items in tooltip via the **tooltipTemplate** option of [series](chart/configuration_properties.md#series): +Set the `tooltipTemplate` option of [series](chart/configuration_properties.md#series) to define how data item values appear in a tooltip: ~~~js {1-3,18,23} function tooltipTemplate(p) { @@ -201,7 +201,7 @@ const chart = new dhx.Chart("chart_container", { **Related sample**: [Chart. Show text](https://snippet.dhtmlx.com/o7ke2f1s) -The **showTextTemplate** option of [series](chart/configuration_properties.md#series) allows you to add a template to values that are shown for data items in bars: +The `showTextTemplate` option of [series](chart/configuration_properties.md#series) formats the values that appear on bars: ~~~js {20-22,29-31} const chart = new dhx.Chart("chart_container", { @@ -252,7 +252,7 @@ const chart = new dhx.Chart("chart_container", { **Related sample**: [Chart. Value template](https://snippet.dhtmlx.com/o7ke2f1s) -When you need to show values for data items on the Pie, Pie3D and Donut charts, you can use the **valueTemplate** option of [series](chart/configuration_properties.md#pie-pie-3d-and-donut-chart) to specify the necessary template function. For example: +The `valueTemplate` option of [series](chart/configuration_properties.md#pie-pie-3d-and-donut-chart) formats the values displayed on Pie, Pie3D, and Donut charts. For example: ~~~jsx {6-8} const chart = new dhx.Chart("chart_container", { diff --git a/docs/chart/data_loading.md b/docs/chart/data_loading.md index 7a80ed51..490684a4 100644 --- a/docs/chart/data_loading.md +++ b/docs/chart/data_loading.md @@ -6,22 +6,22 @@ description: You can explore the data loading of Chart in the documentation of t # Data loading -There are two ways of loading data into DHTMLX Chart: +DHTMLX Chart supports two ways to load data: -- on initialization of Chart -- after initialization of Chart +- On initialization +- After initialization -First, you need to prepare a data set that will be loaded into Chart. +First, prepare a data set to load into Chart. ## Preparing data set -DHTMLX Chart expects loaded data in the JSON format. +DHTMLX Chart expects data in JSON format. :::info -Please note that if you specify the `id` fields in the data collection, their values should be **unique**. You can also omit the `id` fields in the data collection. In this case they will be generated automatically. +If you specify the `id` fields in the data collection, their values must be **unique**. You can also omit these fields; Chart then generates the ids automatically. ::: -Here are examples of appropriate data sets for different chart types: +The following examples show data sets for different chart types: - **Line, Spline, Bar, X-Bar, Area, Spline Area, Radar, Scatter charts** @@ -42,11 +42,11 @@ const dataset = [ ] ~~~ -Each object in the data set contains a number of *key:value* pairs for data titles and values. +Each object in the data set contains `key:value` pairs for data titles and values. - **Pie, Pie3D and Donut charts** -A data set for Pie, Pie3D and Donut charts differs a little bit and includes the following properties: +A data set for Pie, Pie3D, and Donut charts includes the following properties: @@ -64,13 +64,13 @@ A data set for Pie, Pie3D and Donut charts differs a little bit and includes the - +
color(string) points to the property in a data set that defines the color of a pie/donut sector(string) points to the data set property that defines the color of a pie/donut sector

-You need to provide the "color":"value" properties to color the sections of these types of Chart. For example: +Set the `"color": "value"` properties to color the sections of these chart types. For example: ~~~js const pie_dataset = [ @@ -84,7 +84,7 @@ const pie_dataset = [ - **Treemap chart** -A data set for Treemap chart has also another structure and may include the following properties: +A data set for the Treemap chart has a different structure and can include the following properties: @@ -122,7 +122,7 @@ const treeMapData = [ - **Calendar heatmap chart** -A data set for Heatmap chart should include the following properties: +A data set for the Calendar heatmap chart must include the following properties:
@@ -157,7 +157,7 @@ const heatMapData = [ ## Loading data on initialization -You can load [a predefined data set](#preparing-data-set) into Chart on the initialization stage. Use the [data](chart/api/chart_data_config.md) configuration property, as in: +You can load [a predefined data set](#preparing-data-set) into Chart during initialization. Use the [data](chart/api/chart_data_config.md) configuration property: ~~~js const chart = new dhx.Chart("chart_container", { @@ -203,14 +203,14 @@ const chart = new dhx.Chart("chart_container", { ## Loading data after initialization -There are two ways to load data into Chart after its initialization: +You can load data into Chart after initialization in two ways: -- [from an external file](#external-data-loading) -- [from a local data source](#loading-from-local-source) +- [From an external file](#external-data-loading) +- [From a local data source](#loading-from-local-source) ### External data loading -To load data from an external file, make use of the [load()](data_collection/api/datacollection_load_method.md) method of [DataCollection](/data_collection/). It takes the URL of the file with data as a parameter: +To load data from an external file, use the [load()](data_collection/api/datacollection_load_method.md) method of [DataCollection](/data_collection/). The method takes the data file URL as a parameter: ~~~js const chart = new dhx.Chart("chart_container", { @@ -228,9 +228,9 @@ const chart = new dhx.Chart("chart_container", { chart.data.load("../common/dataset.json"); ~~~ -The component will make an AJAX call and expect the remote URL to provide valid JSON data. +The component makes an AJAX call and expects the remote URL to return valid JSON data. -Data loading is asynchronous, so you need to wrap any after-loading code into a promise: +Data loading is asynchronous, so wrap in a promise any code that runs after loading: ~~~js chart.data.load("/some/data").then(function(){ @@ -242,7 +242,7 @@ chart.data.load("/some/data").then(function(){ ### Loading from local source -To load data from a local data source, use the [parse()](data_collection/api/datacollection_parse_method.md) method of [DataCollection](/data_collection/). Pass [a predefined data set](#preparing-data-set) as a parameter of this method: +To load data from a local data source, use the [parse()](data_collection/api/datacollection_parse_method.md) method of [DataCollection](/data_collection/). Pass [a predefined data set](#preparing-data-set) to the method: ~~~js const chart = new dhx.Chart("chart_container", { @@ -264,14 +264,14 @@ chart.data.parse(dataset); ## Saving and restoring state -To save the current state of a chart, use the **serialize()** method of [DataCollection](/data_collection/). It converts the data of a chart into an array of JSON objects. -Each JSON object contains a set of *key:value* pairs for data titles and values. +To save the current state of a chart, use the `serialize()` method of [DataCollection](/data_collection/). The method converts the chart data into an array of JSON objects. +Each JSON object contains `key:value` pairs that match the original data set structure. ~~~js const state = chart1.data.serialize(); ~~~ -Then you can parse the data stored in the saved state array to a different chart. For example: +You can then parse the saved state into a different chart. For example: ~~~js // creating a new chart diff --git a/docs/chart/events.md b/docs/chart/events.md index 630724e7..a933fcaf 100644 --- a/docs/chart/events.md +++ b/docs/chart/events.md @@ -6,39 +6,39 @@ description: You can explore the event handling of Chart in the documentation of # Event handling -## Attaching event listeners +## Attach event listeners -You can attach event listeners with the **chart.events.on()** method: +Use the `chart.events.on()` method to attach event listeners: ~~~js -chart.events.on("resize", function({width:500, height:500}){ +chart.events.on("resize", function({ width, height }){ console.log("The size of the chart has changed"); }); ~~~ **Related sample**: [Chart. Events](https://snippet.dhtmlx.com/a1b9yfwo) -## Detaching event listeners +## Detach event listeners -To detach events, use the **chart.events.detach()** method: +The `chart.events.detach()` method removes a listener: ~~~js -chart.events.on("resize", function({width:500, height:500}){ +chart.events.on("resize", function({ width, height }){ console.log("The size of the chart has changed"); }); chart.events.detach("resize"); ~~~ -## Calling events +## Trigger events -To call events, use the **chart.events.fire()** method: +Call `chart.events.fire()` to trigger an event manually: ~~~js chart.events.fire("name",args); // where args is an array of arguments ~~~ -## The list of events +## Event list -The full list of events is available in the related [API section](chart/api/api_overview.md#events). +For the full event list, see the [API section](chart/api/api_overview.md#events). diff --git a/docs/chart/features.md b/docs/chart/features.md index 903eff3d..441fa973 100644 --- a/docs/chart/features.md +++ b/docs/chart/features.md @@ -6,11 +6,11 @@ description: You can explore the features of Chart in the documentation of the D # Features -This page contains structured information that will help you to start working with DHTMLX Chart and go into deep dive on its functionality. +This page lists DHTMLX Chart guides, examples, and API references. ## How to start with DHTMLX Chart -In this section you can find out how to initialize different types of Charts, and how to integrate Chart into your applications. +Learn how to initialize different chart types and integrate Chart into your applications. ### Initialization @@ -22,7 +22,7 @@ In this section you can find out how to initialize different types of Charts, an | Topic | Description | | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -| [Specifying the Chart type](chart/api/chart_type_config.md) | Check the list of available Chart types and learn how to specify the necessary one | +| [Specifying the Chart type](chart/api/chart_type_config.md) | Check the list of available Chart types and learn how to specify one | | [Spline area chart](chart/charts_overview.md#area-and-splinearea-chart) | Learn how to initialize Spline area chart ([Example](https://snippet.dhtmlx.com/bo82km4n)) | | [Spline chart](chart/charts_overview.md#line-and-spline-chart) | Learn how to initialize Spline chart ([Example](https://snippet.dhtmlx.com/2wvmdm0y)) | | [Area chart](chart/charts_overview.md#area-and-splinearea-chart) | Learn how to initialize Area chart ([Example](https://snippet.dhtmlx.com/nv6t6lvm)) | @@ -40,8 +40,6 @@ In this section you can find out how to initialize different types of Charts, an ### Loading data into Chart -In this section you can discover the ways of loading data into Chart. - | Topic | Description | | -------------------------------------- | ----------------------------------------------------------------------------------------------- | | [Loading chart data](chart/data_loading.md) | Learn how to load the initial data into Chart ([Example](https://snippet.dhtmlx.com/qah8exx2)) | @@ -50,15 +48,15 @@ In this section you can discover the ways of loading data into Chart. | Topic | Description | | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) | -| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components) | +| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) | +| [Optimus](/optimus_guides/) | Learn how to use the DHTMLX Optimus framework to build a DHTMLX-based app
(the recommended framework for apps with Suite components) | | [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Chart with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) | | [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Chart with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) | | [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Chart with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) | ## How to configure Chart -In this section you can discover how to configure a Chart legend, scales, and series. +Learn how to configure a Chart legend, scales, and series. | Topic | Description | | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -70,26 +68,24 @@ In this section you can discover how to configure a Chart legend, scales, and se | [Configuring series](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-without-scales-pie-pie3d-donut) | Learn how to configure series for Pie, Pie3D, Donut charts | | [Configuring a legend](chart/api/chart_legend_config.md#the-list-of-config-options-for-legend-for-charts-without-scales-treemap) | Learn how to configure a legend for Treemap chart ([Example 1](https://snippet.dhtmlx.com/p31wzm0b), [Example 2](https://snippet.dhtmlx.com/fmgnlue4)) | | [Configuring series](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-without-scales-treemap) | Learn how to configure series for Treemap chart | -| [Configuring a mixed chart](chart/configuration_properties.md#mixed-graphs-in-one-chart) | Learn how to combine different types of graphs in one chart ([Example](https://snippet.dhtmlx.com/eti3i33o)) | -| [Changing configuration on the fly](https://snippet.dhtmlx.com/7umj531n) | Learn how to set configuration of a chart dynamically | -| [Displaying average values](chart/api/chart_maxpoints_config.md) | Learn how to display a huge data set in the chart ([Example](https://snippet.dhtmlx.com/6917eudu)) | +| [Configuring a mixed chart](chart/configuration_properties.md#mixed-graphs-in-one-chart) | Learn how to combine different graph types in one chart ([Example](https://snippet.dhtmlx.com/eti3i33o)) | +| [Changing configuration on the fly](https://snippet.dhtmlx.com/7umj531n) | Learn how to set the configuration of a chart dynamically | +| [Displaying average values](chart/api/chart_maxpoints_config.md) | Learn how to display a large data set in the chart ([Example](https://snippet.dhtmlx.com/6917eudu)) | ## How to customize Chart -In this section you can learn how to customize Chart. - | Topic | Description | | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | [Bar chart. Gradient](https://snippet.dhtmlx.com/j3duyn2q) | Learn how to define a color gradient for bars | | [Bar chart. Stacked chart](https://snippet.dhtmlx.com/ilew1ds4) | Learn how to show a stacked Bar chart | -| [Bar chart. Base line](https://snippet.dhtmlx.com/6tls4qhf) | Learn how to set a base line for rendering items in Bar chart | -| [Bar chart. Show text](https://snippet.dhtmlx.com/o7ke2f1s) | Learn how to show and customize text values of data items in Bar chart | +| [Bar chart. Base line](https://snippet.dhtmlx.com/6tls4qhf) | Learn how to set a base line to render items in a Bar chart | +| [Bar chart. Show text](https://snippet.dhtmlx.com/o7ke2f1s) | Learn how to show and customize text values of data items in a Bar chart | | [Legend position](https://snippet.dhtmlx.com/pgqf1yxj) | Learn how to customize legend position | -| [Series. Point types](https://snippet.dhtmlx.com/cbj54wwu) | Learn how to customize the type of the points of data items in a series | +| [Series. Point types](https://snippet.dhtmlx.com/cbj54wwu) | Learn how to customize point types for data items in a series | | [Series. Tooltip template](https://snippet.dhtmlx.com/mbz7dkku) | Learn how to customize tooltips for series | | [Scales. Text template for scale labels](https://snippet.dhtmlx.com/nhm3438n) | Learn how to customize the text of scale labels | -| [Scales. Dashed grid](https://snippet.dhtmlx.com/gnj1xc3r) | Learn how to make the grid lines dashed for Chart with scales | -| [Scales. Without grid (lines)](https://snippet.dhtmlx.com/leqdx9qr) | Learn how to show/hide the grid lines (for x,y, or both scales | +| [Scales. Dashed grid](https://snippet.dhtmlx.com/gnj1xc3r) | Learn how to make the grid lines dashed for charts with scales | +| [Scales. Without grid (lines)](https://snippet.dhtmlx.com/leqdx9qr) | Learn how to show or hide the grid lines (for the x scale, the y scale, or both) | | [Scales. Custom paddings (indents)](https://snippet.dhtmlx.com/74onr5q1) | Learn how to set the padding between the scale and the chart container | | [Styling (custom CSS)](chart/customization.md) | Learn how to change the look and feel of Chart ([Example](https://snippet.dhtmlx.com/p82iew5s)) | | [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library | @@ -97,45 +93,37 @@ In this section you can learn how to customize Chart. ## How to work with data in Chart -In this section you can discover how to apply the [DataCollection API](guides/datacollection_guide.md) to work with data of Chart. +Learn how to apply the [DataCollection API](guides/datacollection_guide.md) to Chart data. | Topic | Description | | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | [Serializing chart data](chart/data_loading.md#saving-and-restoring-state) | Learn how to serialize the chart data ([Example](https://snippet.dhtmlx.com/rqvvpopp)) | | [Adding new data into Chart](chart/usage.md#adding-items-into-chart) | Learn how to add data on the fly ([Example](https://snippet.dhtmlx.com/dpz4w5nr)) | -| [DataCollection API](/data_collection/) | Check the list of all available DataCollection API | +| [DataCollection API](/data_collection/) | Check the full DataCollection API reference | ## How to work with Chart series -In this section you will find out how to work with Chart series. - | Topic | Description | | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -| [Iterating over series](chart/usage.md#iterating-over-series) | Learn how to perform iteration over chart series ([Example](https://snippet.dhtmlx.com/4kbj4lmw)) | -| [Getting series configuration](chart/usage.md#getting-series-configuration) | Learn how to get an object with the configuration of a certain series ([Example](https://snippet.dhtmlx.com/9jtscd9q)) | +| [Iterating over series](chart/usage.md#iterating-over-series) | Learn how to iterate over chart series ([Example](https://snippet.dhtmlx.com/4kbj4lmw)) | +| [Getting series configuration](chart/usage.md#getting-series-configuration) | Learn how to retrieve the configuration of a specific series ([Example](https://snippet.dhtmlx.com/9jtscd9q)) | ## How to export Chart -In this section you will know how to export Chart to different formats. - | Topic | Description | | :----------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- | | [Exporting Chart to a PDF or PNG file](chart/usage.md#exporting-data) | Learn how to export Chart to PDF or PNG formats ([Example](https://snippet.dhtmlx.com/4rybsjjq)) | ## How to work with Chart events -This section explains how to work with Chart events. - | Topic | Description | | :------------------------------------------ | :----------------------------------------------------------------------------------------------------- | -| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events | -| [Event handling](chart/events.md) | Learn how to attach, detach, or call the Chart events ([Example](https://snippet.dhtmlx.com/a1b9yfwo)) | +| [Event basic rules](guides/events_guide.md) | Learn the basic rules for working with events | +| [Event handling](chart/events.md) | Learn how to attach, detach, or call Chart events ([Example](https://snippet.dhtmlx.com/a1b9yfwo)) | ## API reference -In this section you can find out corresponding references of Chart API. - | Topic | Description | | ---------------------------------------------------- | --------------------------------- | | [Chart methods](/category/chart-methods/) | Learn how to use Chart methods | @@ -144,13 +132,13 @@ In this section you can find out corresponding references of Chart API. ## Common functionality -In this section you will learn about common functionality of the library which can be useful while working with Chart. +Chart shares these features with other Suite components. | Topic | Description | | ------------------------------------------------------------- | ------------------------------------------------------------- | | [Touch support](common_features/touch_support.md) | Learn how to work with touch support | | [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript | -| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component's rendering | +| [AwaitRedraw](helpers/await_redraw.md) | Learn how to run code after the component renders | ## Any questions left? @@ -159,5 +147,5 @@ In this section you will learn about common functionality of the library which c :::info -Do you need more functionality? Feel free to share your suggestions in the comments below! +Do you need more functionality? Share your suggestions in the comments below! ::: \ No newline at end of file diff --git a/docs/chart/index.md b/docs/chart/index.md index 88edc3f5..7f74ff5b 100644 --- a/docs/chart/index.md +++ b/docs/chart/index.md @@ -6,15 +6,14 @@ description: You can have an overview of Chart in the documentation of the DHTML # Chart overview -DHTMLX Chart is a great tool for creating powerful charts for web applications. It provides a wide variety of chart types, the possibility to render several data properties on the same chart and adding tooltips, -both 2D and 3D presentation, different variants of data loading, and a whole kit of configuration settings for all elements of a chart interface. -Check [online samples for DHTMLX Chart](https://snippet.dhtmlx.com/bo82km4n?tag=chart). +DHTMLX Chart renders interactive charts in web applications. It supports many chart types, displays several data properties on one chart, and adds tooltips. +Chart offers both 2D and 3D presentation, several ways to load data, and configuration settings for every chart interface element. ![Line chart comparing four company data series with a values tooltip in DHTMLX Suite](/img/chart/line_overview.png) ## Features -You can check the following page to learn how to build a full-featured DHTMLX Chart: +Learn how to build a complete DHTMLX Chart: - [Features](chart/features.md) @@ -24,14 +23,14 @@ You can check the following page to learn how to build a full-featured DHTMLX Ch ## Related resources -- To get just DHTMLX Chart, download it from [our website](https://dhtmlx.com/docs/products/dhtmlxChart/download.shtml) -- To get the whole JavaScript library of UI components [download DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml) -- There are also [online samples for DHTMLX Chart](https://snippet.dhtmlx.com/bo82km4n?tag=chart) -- To work with data of Chart check [DataCollection API](/data_collection/) +- Download DHTMLX Chart alone from [the DHTMLX website](https://dhtmlx.com/docs/products/dhtmlxChart/download.shtml). +- To get the whole JavaScript library of UI components, [download DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml). +- [Online samples for DHTMLX Chart](https://snippet.dhtmlx.com/bo82km4n?tag=chart). +- To work with Chart data, check the [`DataCollection` API](/data_collection/). ## Guides -You can read the following articles to find out how to add Chart on the page and work with it. +These articles explain how to add Chart to a page and configure it. - [](chart/charts_overview.md) - [](chart/initialization.md) diff --git a/docs/chart/initialization.md b/docs/chart/initialization.md index 7703e568..462e4886 100644 --- a/docs/chart/initialization.md +++ b/docs/chart/initialization.md @@ -10,10 +10,10 @@ description: You can explore the initialization of Chart in the documentation of Download the DHTMLX Chart package: - [as a separate component](https://dhtmlx.com/docs/products/dhtmlxChart/download.shtml) -- [as a part of the DHTMLX Suite library](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml) +- [as part of the DHTMLX Suite library](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml) ::: -To initialize DHTMLX Chart in an application, you need to take the following steps: +Follow these steps to initialize DHTMLX Chart in an application: - [Include source files](#include-source-files) - [Create a container](#create-a-container) @@ -60,24 +60,24 @@ To initialize DHTMLX Chart in an application, you need to take the following ste ## Include source files -Unpack the downloaded package into a folder of your project. +Unpack the downloaded package into your project folder. -After that, create an HTML file and place full paths to JS and CSS files of the library into the header of the created file. +Create an HTML file and add full paths to the library JS and CSS files in its header. -**If you use DHTMLX Chart standalone**, you need to include JS/CSS files of DHTMLX Chart: +**If you use DHTMLX Chart standalone**, include these JS/CSS files: -- *chart.js* -- *chart.css* +- `chart.js` +- `chart.css` ~~~html title="index.html" ~~~ -**If you use DHTMLX Chart as a part of the Suite package**, you need to include JS/CSS files of the DHTMLX Suite library: +**If you use DHTMLX Chart as part of the Suite package**, include these JS/CSS files: -- *suite.js* -- *suite.css* +- `suite.js` +- `suite.css` ~~~html title="index.html" @@ -86,7 +86,7 @@ After that, create an HTML file and place full paths to JS and CSS files of the ## Create a container -Add a container for Chart and give it an id, "chart_container", for example: +Add a container for Chart and give it an `id`, for example `chart_container`: ~~~html title="index.html"
@@ -94,10 +94,10 @@ Add a container for Chart and give it an id, "chart_container", for example: ## Initialize Chart -Initialize Chart with the `dhx.Chart` object constructor. The constructor has two parameters: +Initialize Chart with the `dhx.Chart` object constructor. The constructor takes two parameters: -- a container to place a Chart into. You've defined it at the previous step. -- an object with configuration properties. [See the full list of properties here](chart/api/api_overview.md#properties) +- A container for Chart. You defined it in the previous step. +- An object with configuration properties. See the [full list of properties](chart/api/api_overview.md#properties). ~~~js title="index.js" const config = { @@ -131,7 +131,7 @@ See the full list of Chart configuration properties in the [Chart API overview]( ## Load data into Chart -Detailed information on how to load data into DHTMLX Chart is given in the [Data loading](chart/data_loading.md) article. +The [Data loading](chart/data_loading.md) article explains how to load data into DHTMLX Chart. ## Example diff --git a/docs/chart/usage.md b/docs/chart/usage.md index adfd2027..f98c0324 100644 --- a/docs/chart/usage.md +++ b/docs/chart/usage.md @@ -8,7 +8,7 @@ description: You can explore how to work with Chart in the documentation of the ## Setting Chart configuration -You can change configuration of Chart on the fly with the help of the [](chart/api/chart_setconfig_method.md) method. It takes as a parameter an object with updated [chart configuration](chart/configuration_properties.md). +You can change the Chart configuration on the fly with the [](chart/api/chart_setconfig_method.md) method. It takes an object with the updated [chart configuration](chart/configuration_properties.md) as a parameter. ~~~js const config = { @@ -44,7 +44,7 @@ chart.setConfig(config); ## Getting series configuration -The Chart API gives you the possibility to get an object with the configuration of a certain series. Use the [](chart/api/chart_getseries_method.md) method for this purpose. It takes the id of a series as a parameter: +Use the [](chart/api/chart_getseries_method.md) method to get the configuration of a specific series. It takes the series `id` as a parameter: ~~~js const config = chart.getSeries("A"); @@ -67,8 +67,8 @@ const config = chart.getSeries("A"); ## Iterating over series -It is possible to iterate over chart series using the [](chart/api/chart_eachseries_method.md). As a parameter it takes a handler function that will perform iteration. -Pass an array with series objects as a parameter of the handler function: +Use the [](chart/api/chart_eachseries_method.md) method to iterate over chart series. It takes a handler function that runs for each series. +The handler function receives each series object as its argument: ~~~js const chart = new dhx.Chart("chart_container", { @@ -107,8 +107,8 @@ chart.eachSeries(function(seria){ ## Adding items into Chart -The API of [Data Collection](/data_collection/) allows you to perform operations with Chart data items. -For example, you can add more items (points) into your Chart using the [](data_collection/api/datacollection_add_method.md) method, like this: +The [Data Collection](/data_collection/) API lets you work with Chart data items. +For example, you can add more items (points) to your Chart with the [](data_collection/api/datacollection_add_method.md) method: ~~~js const config = { @@ -156,32 +156,32 @@ function add() { }; ~~~ -The method takes as a parameter an object with two properties: +The method takes an object with two properties as a parameter:
- + - +
valuevalue the value of an item
texttext the text of an item on the X-axis
-A new data item is added relative to the X-axis. In case of adding many items, you need to increase the value of each new data item position to add it correctly. +Chart places a new data item relative to the X-axis. When you add several items, increase the position value of each one so that they render in order. **Related sample**: [Chart. Adding data on the fly](https://snippet.dhtmlx.com/dpz4w5nr) ## Exporting data -You can export data of Chart into the PDF or PNG format via the corresponding methods of the `Export` module. +You can export Chart data to PDF or PNG with the `pdf()` and `png()` methods of the `Export` module. ### Exporting data to PDF -The [`pdf()`](chart/api/export/chart_pdf_method.md) method of the Export module allows you to export Chart data into a PDF file. The method takes an [object with the export settings](chart/api/export/chart_pdf_method.md) as a parameter (all settings are optional) and returns a promise of data export. +The [`pdf()`](chart/api/export/chart_pdf_method.md) method of the `Export` module exports Chart data to a PDF file. The method takes an [object with export settings](chart/api/export/chart_pdf_method.md) as a parameter (all settings are optional) and returns a promise of data export. ~~~jsx chart.export.pdf({ @@ -197,7 +197,7 @@ chart.export.pdf({ ### Exporting data to PNG -The [`png()`](chart/api/export/chart_png_method.md) method of the Export module allows you to export data from Chart into a PNG file. The method takes an [object with export settings](chart/api/export/chart_png_method.md) as a parameter (all settings are optional) and returns a promise of data export. +The [`png()`](chart/api/export/chart_png_method.md) method of the `Export` module exports Chart data to a PNG file. The method takes an [object with export settings](chart/api/export/chart_png_method.md) as a parameter (all settings are optional) and returns a promise of data export. ~~~jsx chart.export.png({