{"id":4714,"date":"2023-01-24T14:37:45","date_gmt":"2023-01-24T14:37:45","guid":{"rendered":"https:\/\/info.documotor.com\/?page_id=4714"},"modified":"2023-02-07T14:57:35","modified_gmt":"2023-02-07T14:57:35","slug":"charts","status":"publish","type":"page","link":"https:\/\/info.documotor.com\/?page_id=4714","title":{"rendered":"Charts"},"content":{"rendered":"\n<p>This article describes the options for creating charts binding transformed data. This article provides an overview of the valid data structure for creating charts. See the <a href=\"https:\/\/info.documotor.com\/?page_id=2718\">tutorial<\/a> for an in-depth walkthrough.<\/p>\n\n\n\n<p>Most native MSO chart types are supported with the <code>Chart<\/code> binding type, however the following chart types are only supported with the <code>ExtendedChart<\/code> binding type: <strong>Box and whisker<\/strong>, <strong>Funnel<\/strong>, <strong>Sunburst<\/strong>, <strong>Treemap<\/strong>, <strong>Waterfall<\/strong>.<\/p>\n\n\n\n<h2>Chart<\/h2>\n\n\n\n<p>Alter the data of chart based on the ChartData received. The content control must surround a chart or the anchor of a chart.<\/p>\n\n\n\n<h3>Syntax<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">{ \"BindingType\": \"Chart\", \"BindingKey\": \"ChartData\" }<\/code><\/pre>\n\n\n\n<p><strong>BindingType:<\/strong> Static. Must be &#8220;Chart&#8221;.<br><strong>BindingKey:<\/strong> JSON object with a defined <strong>model <\/strong>representing the configuration of the table. Use <a href=\"https:\/\/info.documotor.com\/?page_id=271\">Data Transformation<\/a> to structure your data according to this <strong>model<\/strong>:<\/p>\n\n\n\n<h3>Model<\/h3>\n\n\n\n<ul><li><strong>title:<\/strong> (string) The title of the chart. Is ignored if null.  <\/li><li><strong>categories<\/strong>: (array of strings) The values of the x-axis. Optional. <\/li><li><strong>series<\/strong>: (array) The data for each series. Categories, values, and labels must be of the same length, or null in order to produce a valid chart.<ul><li><strong>name<\/strong>: (string) Legend name of the series. Optional.<\/li><li><strong>values:<\/strong> (array of numbers) The values of the y-axis in this series.<\/li><li><strong>labels:<\/strong> (array of strings) The data label of the value with the same index. Use null to remove the data label. Optional.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Example of a JSON object that follows the <code>Chart<\/code> model:<\/p>\n\n\n\n<pre title=\"Data\" class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">{\n  \"MyChart\": {\n    \"title\": \"Yearly Data\",\n    \"categories\": [\"Q1\", \"Q2\", \"Q3\", \"Q4\"],\n    \"series\": [\n      {\n        \"name\": \"Revenue\",\n        \"values\": [100, 200, 100, 300],\n        \"labels\": [\"Q1\", \"Q2\", \"Q3\", \"Q4\"]\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\n<h2 id=\"section_10\">ExtendedChart<\/h2>\n\n\n\n<p>As mentioned in the beginning of the article, the following chart types are not supported by the <code>Chart<\/code> binding type: <strong>Box and whisker<\/strong>, <strong>Funnel<\/strong>, <strong>Sunburst<\/strong>, <strong>Treemap<\/strong>, <strong>Waterfall<\/strong>.<\/p>\n\n\n\n<p>The valid data structure is similar to the that of the <code>Chart<\/code> binding type described above. However, some extended chart types may require a specific configuration of categories and series. For more info, please the <a href=\"https:\/\/info.documotor.com\/?page_id=2718\">tutorial<\/a>.<\/p>\n\n\n\n<h3>Syntax<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json\">{ \"BindingType\": \"ExtendedChart\", \"BindingKey\": \"ChartData\" }<\/code><\/pre>\n\n\n\n<p><strong>BindingType:<\/strong> Static. Must be &#8220;ExtendedChart&#8221;.<br><strong>BindingKey:<\/strong> JSON object with a defined <strong>model <\/strong>representing the configuration of the table. Use <a href=\"https:\/\/info.documotor.com\/?page_id=271\">Data Transformation<\/a> to structure your data according to this <strong>model<\/strong> described in the <code>Chart<\/code> BindingType section above.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article describes the options for creating charts binding transformed data. This article provides an overview of the valid data structure for creating charts. See the tutorial for an in-depth walkthrough. Most native MSO chart types are supported with the Chart binding type, however the following chart types are only supported with the ExtendedChart binding [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":148,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/4714"}],"collection":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/info.documotor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4714"}],"version-history":[{"count":19,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/4714\/revisions"}],"predecessor-version":[{"id":5086,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/4714\/revisions\/5086"}],"up":[{"embeddable":true,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/148"}],"wp:attachment":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}