{"id":11073,"date":"2023-03-14T15:20:34","date_gmt":"2023-03-14T12:20:34","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=11073"},"modified":"2023-05-02T12:40:13","modified_gmt":"2023-05-02T09:40:13","slug":"use-dhtmlx-building-javascript-heatmap-chart","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/use-dhtmlx-building-javascript-heatmap-chart\/","title":{"rendered":"Why Use DHTMLX for Building a JavaScript Heatmap Chart"},"content":{"rendered":"<p>DHTMLX Chart was one of the central figures in the latest major release of our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/\" rel=\"noopener\" target=\"_blank\">JavaScript UI widgets library<\/a> (v8.0). This charting widget received a couple of important updates but the most notable of them is a new data visualization option &#8211; a calendar heatmap chart. <\/p>\n<p>In this post, we take a closer look at this chart type, its purpose, fields of application, and the benefits of using DHTMLX for its implementation. <\/p>\n<h5>What is a Calendar Heatmap Chart and How it Works<\/h5>\n<p>A calendar heatmap chart provides a visual representation of comparative data, depicting data points with color ranges in a two-dimensional calendar view encompassing various periods of time. Each cell in the chart corresponds to a single day of the week and the whole time period spans from a week to a year. The color-coded format allows displaying complex data in a compact and clear way. A heatmap chart is commonly complemented with a legend that makes it easily readable. Thus, you can detect various patterns or anomalies over the necessary period much faster.<\/p>\n<p>Heatmaps were used as early as the 19th century. The first known usage of heatmaps is attributed to a French statistician Toussaint Loua, who applied this kind of technique for presenting different social statistics across the districts of Paris in 1873. The term  \u201cheatmap\u201d was first trademarked in 1991 by an American software designer Cormac Kinney. He used this type of chart for displaying financial market information in his software solution. <\/p>\n<p>Nowadays, heatmap charts have become a must-have visualization tool for data analysis in many fields:<\/p>\n<ul>\n<li>business analysis<\/li>\n<li>websites (user interaction analysis)<\/li>\n<li>geography<\/li>\n<li>biology<\/li>\n<li>sports<\/li>\n<li>and more<\/li>\n<\/ul>\n<p>Now let us discuss how to add a calendar heatmap chart to a web page and customize it with <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxChart\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Charts<\/a>.<\/p>\n<h5>Benefits of Building a JavaScript Heatmap Chart with DHTMLX<\/h5>\n<p>You may be wondering why to choose DHTMLX Chart for building a JavaScript heatmap chart since there are plenty of other JS libraries that can help to do the job right. So let us go through the main stages of implementing a calendar heatmap chart like the one below and see the main benefits of using our charting library for this purpose.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image5.gif\" alt=\"Calendar heatmap chart built with DHTMLX\" width=\"777\" height=\"364\" class=\"aligncenter size-full wp-image-11074\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/ptncsadz?tag=chart&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h6>Quick Initialization<\/h6>\n<p>DHTMLX Chart was originally designed as a developer-friendly tool, allowing you to visualize data with any of the available chart types without spending much time on it. Adding a JavaScript heatmap chart to your app takes just a few simple steps: download the Chart package and unpack it into your project folder, create a container for your chart, initialize the heatmap chart, and load data into the chart, and there you have it. <\/p>\n<p>To be more specific about the initialization process, it is done with the <strong>dhx.Chart<\/strong> object constructor.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> chart <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Chart<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;chart&quot;<\/span><span class=\"sy0\">,<\/span> config<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\nchart.<span class=\"me1\">data<\/span>.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>heatMapData<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>The constructor takes two parameters, namely the container where your chart will be placed and an object with configuration properties that we will discuss in the following section.<\/p>\n<p>The full information related to the chart initialization is provided in the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/initialization\/\" rel=\"noopener\" target=\"_blank\">documentation<\/a>.<\/p>\n<h6>Simple Configuration<\/h6>\n<p>Now you can proceed with configuring the settings of your chart and this stage is quite straightforward. The configuration object of a calendar heatmap chart built with DHTMLX comprises three properties:<\/p>\n<ul>\n<li>type: &#8220;calendarHeatMap&#8221; (required) &#8211; specifies the chart type<\/li>\n<li>series (required) &#8211; specifies how data is rendered in the chart<\/li>\n<li>legend (optional) &#8211; configures a legend that clarifies the charted data<\/li>\n<\/ul>\n<p>Here is how you can configure your calendar heatmap chart presented below:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> config <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;calendarHeatMap&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; css<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dhx_widget--bordered&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; series<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;value&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; date<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dateFormat<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;%d %M %Y&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startDate<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;20 Jan 2022&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; endDate<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;20 Aug 2023&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tooltipTemplate<span class=\"sy0\">:<\/span> point <span class=\"sy0\">=&gt;<\/span> `The profit<span class=\"sy0\">:<\/span> $<span class=\"br0\">&#123;<\/span>point<span class=\"br0\">&#91;<\/span><span class=\"nu0\">1<\/span><span class=\"br0\">&#93;<\/span><span class=\"br0\">&#125;<\/span>$<span class=\"sy0\">,<\/span> $<span class=\"br0\">&#123;<\/span>point<span class=\"br0\">&#91;<\/span><span class=\"nu0\">0<\/span><span class=\"br0\">&#93;<\/span><span class=\"br0\">&#125;<\/span>`<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; weekStart<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;monday&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxValue<span class=\"sy0\">:<\/span> <span class=\"nu0\">90<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minValue<span class=\"sy0\">:<\/span> <span class=\"sy0\">-<\/span><span class=\"nu0\">40<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; legend<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; values<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;The profit of my business per day&quot;<\/span><span class=\"sy0\">,<\/span> <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tick<span class=\"sy0\">:<\/span> <span class=\"nu0\">5<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; majorTick<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; step<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tickTemplate<span class=\"sy0\">:<\/span> value <span class=\"sy0\">=&gt;<\/span> `$<span class=\"br0\">&#123;<\/span>value<span class=\"br0\">&#125;<\/span>$`<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; halign<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><span class=\"sy0\">,<\/span> <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; valign<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;top&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; margin<span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; size<span class=\"sy0\">:<\/span> <span class=\"nu0\">60<\/span><span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/ptncsadz?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe><br \/>\nJust like other types of charts included in our charting widget, the calendar heatmap chart is highly customizable. You can easily change the styling of your chart or modify its key elements. In the code of our example, you may notice the use of the <strong>tooltipTemplate<\/strong> parameter intended for specifying a template for displaying values of data items in tooltips. Other common customization options for charts are described in the corresponding <a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/customization\/\" rel=\"noopener\" target=\"_blank\">section<\/a> of our documentation.<\/p>\n\n\t\t<div class='post-banner'>\n\t\t    <div class='post-banner__inside'>\n\t\t        <div>\n\t\t            <div class=\"post-banner__title\">Download DHTMLX Charts<\/div>\n\t\t            <div class=\"post-banner__text\">Create interactive JavaScript charts with clean Material-styled UI<\/div>\n                <\/div>\n\t\t            \n                \n            <div class='post-banner__btn'>\n                <a href='https:\/\/dhtmlx.com\/docs\/products\/dhtmlxChart\/download.shtml' title='' class='button-secondary'>Get free trial<\/a>\n            <\/div>\n        \n            <\/div>\n\t\t<\/div>\n\t\n<p>One of the key strengths of our calendar heatmap chart is that it allows visualizing data for various periods of times. By default, end-users will see the information dating from the 1st of January of the earliest year to the 31st of December of the latest year provided in the dataset. But at the same time, our chart gives you plenty of customization opportunities related to date ranges.<\/p>\n<h6>Custom Date Ranges in Heatmap Chart<\/h6>\n<p>It is often the case that end-users may need to see data within a particular timeframe rather than the whole dataset that may be too large. For this purpose, the configuration object of our heatmap chart includes <strong>startDate<\/strong> and <strong>endDate<\/strong> parameters in the <strong>series<\/strong> property. It should be noted that the date format for these parameters depends on the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/api\/chart_series_config\/#the-list-of-config-options-for-series-for-charts-without-scales-calendar-heatmap\" rel=\"noopener\" target=\"_blank\">dateFormat<\/a><\/strong> property.<\/p>\n<p>In our example presented above, the date range spans from &#8220;20\/01\/22&#8221; to &#8220;20\/08\/23&#8221; inclusively i.e. the whole period includes one year and eight months. By changing <strong>startDate<\/strong> and <strong>endDate<\/strong> parameters, we can also set our chart to display data for a month, a year, or any other period.  Here is how we make the chart in our sample show data for one month:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> config <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;calendarHeatMap&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; series<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;value&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; date<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dateFormat<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;%d %M %Y&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startDate<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;20 Jan 2022&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; endDate<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;20 Feb 2022&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image2.png\" alt=\"DHTMLX heatmap chart - custom date range\" width=\"574\" height=\"213\" class=\"aligncenter size-full wp-image-11075\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image2.png 574w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image2-300x111.png 300w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><\/p>\n<p>Moreover, if you do not specify one of the date parameters, the chart will calculate the range of dates automatically depending on the other parameter and the <a href=\"https:\/\/snippet.dhtmlx.com\/ptncsadz?tag=chart&#038;mode=html\" rel=\"noopener\" target=\"_blank\">dataset<\/a>. In our example, if we set a value for the <strong>startDate<\/strong> parameter but left the <strong>endDate<\/strong> parameter empty, the chart would include the period from &#8220;20\/01\/22&#8221; to &#8220;19\/01\/24&#8221;.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image4.png\" alt=\"Heatmap chart - custom date range\" width=\"821\" height=\"359\" class=\"aligncenter size-full wp-image-11076\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image4.png 821w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image4-300x131.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image4-768x336.png 768w\" sizes=\"auto, (max-width: 821px) 100vw, 821px\" \/><br \/>\nAll the details on custom date ranges in a calendar heatmap chart are available in the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/configuration_properties\/#custom-range-of-dates\" rel=\"noopener\" target=\"_blank\">documentation<\/a>.<\/p>\n<h6>Integration with Other DHTMLX Components<\/h6>\n<p>Since heatmap charts are quite useful for business purposes, we offer you integration samples with top DHTMLX products for project management &#8211; <a href=\"https:\/\/snippet.dhtmlx.com\/jodcbkr5?mode=wide\" rel=\"noopener\" target=\"_blank\">Gantt<\/a>, <a href=\"https:\/\/snippet.dhtmlx.com\/0n3ta0je?mode=wide\" rel=\"noopener\" target=\"_blank\">Event Calendar<\/a>, and <a href=\"https:\/\/snippet.dhtmlx.com\/tlfazogt?mode=wide\" rel=\"noopener\" target=\"_blank\">Scheduler<\/a>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image3-1024x394.png\" alt=\"Integration of Heatmap chart with Gantt chart\" width=\"1024\" height=\"394\" class=\"aligncenter size-large wp-image-11077\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image3-1024x394.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image3-300x116.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image3-768x296.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/03\/image3.png 1327w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/jodcbkr5?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>The image above shows how a calendar heatmap chart can be useful in providing a general overview of working hours and overloads presented in the histogram of the <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">JavaScript Gantt chart<\/a>. Thus, you can get an additional source of information in your project management app.<\/p>\n<h5>Wrapping Up<\/h5>\n<p>Summarizing the above, we can say that DHTMLX Chart is a reliable instrument for adding a calendar heatmap chart to a web page. A wide range of configuration and customization options will help you to adjust the chart to your requirements and ensure a good user experience. <\/p>\n<p>You can get acquainted with our calendar heatmap chart using the <a href=\"https:\/\/snippet.dhtmlx.com\/ptncsadz?tag=chart&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">DHTMLX code snippet tool<\/a> or download a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxChart\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day trial version<\/a> and see if it fits for your project. Bear in mind that this chart type is available only in the PRO edition of DHTMLX Chart and DHTMLX Suite. If you decide to go with DHTMLX Chart, it can be purchased as a separate JavaScript component or in a pack with other Suite widgets.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>DHTMLX Chart was one of the central figures in the latest major release of our JavaScript UI widgets library (v8.0). This charting widget received a couple of important updates &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":11078,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[33,21,10],"class_list":["post-11073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-all-posts","tag-charts","tag-dhtmlxsuite"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/11073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=11073"}],"version-history":[{"count":12,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/11073\/revisions"}],"predecessor-version":[{"id":11189,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/11073\/revisions\/11189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/11078"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=11073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=11073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=11073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}