{"id":360,"date":"2023-03-12T14:53:16","date_gmt":"2023-03-12T13:53:16","guid":{"rendered":"http:\/\/localhost:8888\/?p=360"},"modified":"2025-11-26T14:53:16","modified_gmt":"2025-11-26T14:53:16","slug":"plotly-chart-block","status":"publish","type":"post","link":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/2023\/03\/plotly-chart-block\/","title":{"rendered":"Plotly Chart Block"},"content":{"rendered":"\n<p>The <strong>Plotly Chart<\/strong> block enables interactive visualisation using the great <a rel=\"noreferrer noopener\" href=\"https:\/\/plotly.com\/javascript\/\" target=\"_blank\">Plotly.js<\/a> library via its JSON schema &#8211; see <a rel=\"noreferrer noopener\" href=\"https:\/\/plotly.com\/chart-studio-help\/json-chart-schema\/\" target=\"_blank\">Plotly JSON chart schema<\/a>. <\/p>\n\n\n\n<div class=\"wp-block-inseri-core-text-editor\" data-attributes=\"{&quot;blockId&quot;:&quot;KaCV6b1xBVHc4v4LUH6u1&quot;,&quot;content&quot;:&quot;%7B%0A%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22giraffes%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22orangutans%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22monkeys%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2020%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2014%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2023%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22bar%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22layout%22%3A%7B%22height%22%3A500%7D%0A%7D&quot;,&quot;contentType&quot;:&quot;application\/json&quot;,&quot;editable&quot;:true,&quot;height&quot;:150,&quot;isVisible&quot;:true,&quot;label&quot;:&quot;Feel free to edit the JSON text below&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;textEditor&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<div class=\"wp-block-inseri-core-plotly\" data-attributes=\"{&quot;blockId&quot;:&quot;hrbGpj0iDhYFnrD124Ene&quot;,&quot;height&quot;:500,&quot;inputConfig&quot;:&quot;&quot;,&quot;inputData&quot;:&quot;&quot;,&quot;inputFull&quot;:&quot;KaCV6b1xBVHc4v4LUH6u1\/content&quot;,&quot;inputLayout&quot;:&quot;&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;plotly&quot;},&quot;outputs&quot;:[[&quot;onClick&quot;,&quot;click&quot;]]}\">is loading &#8230;<\/div>\n\n\n\n<p>You can try to click on one of the columns and the corresponding value will be shown dynamically below in the <strong>Text Viewer<\/strong> block (some small manipulation was done in the <strong>Python Code<\/strong> block, which runs automatically and is invisible to the visitor). Also, feel free to edit the JSON input used to generate the plot.<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-python\" data-attributes=\"{&quot;autoTrigger&quot;:true,&quot;blockId&quot;:&quot;sopWCY58UGn8FxJdAvbIA&quot;,&quot;content&quot;:&quot;res%20%3D%20%7Bselected_value%5B0%5D%5B%22x%22%5D%3Aselected_value%5B0%5D%5B%22y%22%5D%7D&quot;,&quot;editable&quot;:false,&quot;height&quot;:63,&quot;inputCode&quot;:&quot;&quot;,&quot;inputs&quot;:{&quot;selected_value&quot;:&quot;hrbGpj0iDhYFnrD124Ene\/onClick&quot;},&quot;isVisible&quot;:false,&quot;label&quot;:&quot;&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;python&quot;},&quot;mode&quot;:&quot;editor&quot;,&quot;outputs&quot;:[[&quot;res&quot;,&quot;application\/json&quot;]]}\">is loading &#8230;<\/div>\n\n\n\n<div class=\"wp-block-inseri-core-text-viewer\" data-attributes=\"{&quot;blockId&quot;:&quot;FDCPJq1oSMjVGD5MHLfzq&quot;,&quot;content&quot;:&quot;&quot;,&quot;height&quot;:60,&quot;inputKey&quot;:&quot;sopWCY58UGn8FxJdAvbIA\/res&quot;,&quot;label&quot;:&quot;Selected Column and the corresponding value&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;textViewer&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<p>For more details please see the corresponding <a href=\"https:\/\/inseri-swiss.github.io\/inseri-core-wp\/blocks\/plotly\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-inseri-core-export alignright\" data-attributes=\"{&quot;align&quot;:&quot;right&quot;,&quot;blockId&quot;:&quot;vaxQQCzmrnvQCf4meQgfk&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;export&quot;},&quot;postId&quot;:360}\">is loading &#8230;<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-inseri-core-share alignright\" data-attributes=\"{&quot;align&quot;:&quot;right&quot;,&quot;blockId&quot;:&quot;KTETwIissQyi0jL3ZpuwV&quot;,&quot;copiedText&quot;:&quot;Copied&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;share&quot;},&quot;showIcon&quot;:true,&quot;text&quot;:&quot;Share&quot;}\">is loading &#8230;<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Plotly Chart block enables interactive visualisation using the great Plotly.js library via its JSON schema &#8211; see Plotly JSON chart schema. You can try to click on one of the columns and the corresponding value will be shown dynamically below in the Text Viewer block (some small manipulation was done in the Python Code [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[40,47,48,50,52,53],"class_list":["post-360","post","type-post","status-publish","format-standard","hentry","category-inseri-core-block","tag-export","tag-plotly-chart","tag-python-code","tag-share","tag-text-editor","tag-text-viewer"],"_links":{"self":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/comments?post=360"}],"version-history":[{"count":1,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/360\/revisions"}],"predecessor-version":[{"id":2116,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/360\/revisions\/2116"}],"wp:attachment":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/media?parent=360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/categories?post=360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/tags?post=360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}