Update for support for PHP 8.4 and a minor security fix<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":{"icon-256x256.jpg":{"filename":"icon-256x256.jpg","revision":2518242,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":2519069,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":{"oik-sb\/chart":{"apiVersion":3,"name":"oik-sb\/chart","title":"Chart","category":"widgets","icon":"chart-line","keywords":["Chart","Line","Bar","Horizontal bar","Pie"],"description":"Displays a chart for CSV content.","textdomain":"sb-chart-block","supports":{"html":false,"align":false,"typography":{"fontSize":false}},"attributes":{"type":{"type":"string","default":"line"},"content":{"type":"string","default":""},"theme":{"type":"string","default":"Chart"},"stacked":{"type":"boolean","default":false},"fill":{"type":"boolean","default":false},"height":{"type":"integer","default":null},"beginYAxisAt0":{"type":"boolean","default":false},"opacity":{"type":"number","default":0.8},"time":{"type":"boolean","default":false},"timeunit":{"type":"string","default":"day"},"barThickness":{"type":"integer","default":null},"tension":{"type":"number","default":0},"labelsFontSize":{"type":"number","default":12},"xTicksFontSize":{"type":"number","default":12},"yTicksFontSize":{"type":"number","default":12},"y1TicksFontSize":{"type":"number","default":12},"backgroundColors":{"type":"string","default":""},"borderColors":{"type":"string","default":""},"yAxes":{"type":"string","default":""}},"editorScript":"oik-sb-chart-editor-script","editorStyle":"file:.\/build\/index.css","style":"file:.\/build\/style-index.css"}},"tagged_versions":["0.3.0","0.4.1","1.0.0","1.1.0","1.2.2","1.2.3","1.2.4","1.2.5","1.2.6","1.3.1"],"block_files":["\/tags\/1.3.1\/.\/build\/index.css","\/tags\/1.3.1\/.\/build\/style-index.css"],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":2518242,"resolution":"1","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":2518242,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":2518242,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":2518242,"resolution":"4","location":"assets","locale":""},"screenshot-5.jpg":{"filename":"screenshot-5.jpg","revision":2518242,"resolution":"5","location":"assets","locale":""}},"screenshots":{"1":"Line chart - Gutenberg theme colors","2":"Bar chart - Chart theme colors","3":"Horizontal bar chart - Tertiary theme colors","4":"Pie chart - Visualizer theme colors","5":"Chart type toolbar selection"},"jetpack_post_was_ever_published":false},"plugin_section":[172757],"plugin_tags":[17088,1220,241005,17086,17072],"plugin_category":[],"plugin_contributors":[79761],"plugin_business_model":[],"class_list":["post-138823","plugin","type-plugin","status-publish","hentry","plugin_section-block","plugin_tags-bar-chart","plugin_tags-block","plugin_tags-horizontal-bar-chart","plugin_tags-line-chart","plugin_tags-pie-chart","plugin_contributors-bobbingwide","plugin_committers-bobbingwide"],"banners":{"banner":"https:\/\/ps.w.org\/sb-chart-block\/assets\/banner-772x250.jpg?rev=2519069","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/sb-chart-block\/assets\/icon-256x256.jpg?rev=2518242","icon_2x":"https:\/\/ps.w.org\/sb-chart-block\/assets\/icon-256x256.jpg?rev=2518242","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/sb-chart-block\/assets\/screenshot-1.jpg?rev=2518242","caption":"Line chart - Gutenberg theme colors"},{"src":"https:\/\/ps.w.org\/sb-chart-block\/assets\/screenshot-2.jpg?rev=2518242","caption":"Bar chart - Chart theme colors"},{"src":"https:\/\/ps.w.org\/sb-chart-block\/assets\/screenshot-3.jpg?rev=2518242","caption":"Horizontal bar chart - Tertiary theme colors"},{"src":"https:\/\/ps.w.org\/sb-chart-block\/assets\/screenshot-4.jpg?rev=2518242","caption":"Pie chart - Visualizer theme colors"},{"src":"https:\/\/ps.w.org\/sb-chart-block\/assets\/screenshot-5.jpg?rev=2518242","caption":"Chart type toolbar selection"}],"raw_content":"\n
Use the Chart block ( oik-sb\/chart ) to display a chart.<\/p>\n\n\n
\/wp-content\/plugins\/sb-chart-block<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n- Activate the plugin through the 'Plugins' screen in WordPress<\/li>\n<\/ol>\n\n
OR with the authority to install plugins<\/p>\n\n
\n- In the block editor, open the block inserter.<\/li>\n
- Search for the block by typing 'Chart'.<\/li>\n
- Click on the 'Add block' button for the SB Chart block.<\/li>\n
- The SB Chart block plugin will be installed and activated.<\/li>\n
- And the block will be inserted into your content.<\/li>\n<\/ol>\n\n\n
\nWhat types of chart can I display?<\/h3><\/dt>\nSo far...<\/p>\n\n
\n- Line and stacked line, with optional fill<\/li>\n
- Bar and stacked bar<\/li>\n
- Horizontal bar and stacked horizontal bar<\/li>\n
- Pie<\/li>\n<\/ul><\/dd>\n
How do I choose the chart colors?<\/h3><\/dt>\nThere are 6 predefined color palettes:\nchoose the color palette from a drop down list.<\/p>\n\n
Use the Background color overrides and border color overrides fields to set custom color values.<\/p><\/dd>\n
What options are there?<\/h3><\/dt>\nOptions to control the chart display are:<\/p>\n\n
\n- Stacked - Toggle on to stack line or bar charts<\/li>\n
- Begin Y axis at 0 toggle<\/li>\n
- Fill toggle for line charts<\/li>\n
- Time line toggle for a date based axis, with selectable Time unit (stepSize)<\/li>\n
- Y-axes for multi axis charts<\/li>\n
- Color palette dropdown<\/li>\n
- Background color overrides. Enter comma separated hex codes.<\/li>\n
- Border color overrides. Enter comma separated hex codes.<\/li>\n
- Opacity - set the opacity of the background colours.<\/li>\n
- Height of the chart, in pixels<\/li>\n
- Bar thickness in pixels<\/li>\n
- Tension - for curved line charts<\/li>\n
- Legend font size<\/li>\n
- X-axis font size<\/li>\n<\/ul><\/dd>\n
What Chart script does it use?<\/h3><\/dt>\nv1.2.6 delivers chartjs v4.4.2<\/a>\nand chartjs-adapter-date-fns v3.0.0<\/a><\/p><\/dd>\nWhat do I need to search for to find the block?<\/h3><\/dt>\nChart or SB Chart<\/p><\/dd>\n
What if my first language is not English?<\/h3><\/dt>\nIf your first language is not English then you could try:<\/p>\n\n
\n- French - graphique<\/li>\n
- German - Diagramm<\/li>\n
- Dutch - grafiek<\/li>\n
- Italian - grafico<\/li>\n
- Spanish - gr\u00e1fico<\/li>\n<\/ul><\/dd>\n
Do I need to build this block?<\/h3><\/dt>\nNo. The plugin is delivered with the production version of the block.\nIf you do wish to modify the code then you can find instructions in the src folder.<\/p><\/dd>\n
Are there shortcodes available?<\/h3><\/dt>\nCharts can be embedded with the shortcode chartjs<\/code>. The general syntax is as follows:<\/p>\n\n[chartjs attribute=\"attribute value\"]CSV content[\/chartjs]\n<\/code><\/pre>\n\nSeveral attributes can be added at the same time. Example:<\/p>\n\n
[chartjs attribute1=\"attribute1 value\" attribute2=\"attribute2 value\"]CSV content[\/chartjs]\n<\/code><\/pre>\n\nHere's the list of supported attributes:<\/p>\n\n
\nbackgroundColors<\/code> (string): list of custom background colors (separated by comma) to use for datasets. For example, if there are 3 datasets (d1<\/code>, d2<\/code> and d3<\/code>) and we want d1<\/code> to use the color #0000FF<\/code>, d2<\/code> to use #FFFF00<\/code> and d3<\/code> to use #008000<\/code>, the value of the attribute must be #0000FF,#FFFF00,#008000<\/code>. If some colors are missing (ex.: #0000FF,,#008000<\/code>), default colors from the theme (set with the attribute theme<\/code>) are used as fallback (#0000FF,second theme color,#008000<\/code>); default is no custom colors used<\/li>\nbarThickness<\/code> (int): thickness (in pixels) of a bar in bar charts; default is the default Chart.js thickness<\/li>\nbeginYAxisAt0<\/code> (bool): make sure the Y axis begins at 0; default is false<\/code><\/li>\nborderColors<\/code> (string): list of custom border colors (separated by comma) to use for datasets. See the description of the attribute backgroundColors<\/code> for more details; default is the value of the attribute backgroundColors<\/code><\/li>\nclass<\/code> (string): class or classes to be added to the chart container; default is an empty string<\/li>\nfill<\/code> (bool): fill the area under the line; default is false<\/code><\/li>\nheight<\/code> (int): chart height (in pixels); default is the default Chart.js height<\/li>\nindexAxis<\/code> (string): axis to use as index; choices are x<\/code>, y<\/code>; note that y<\/code> is automatically used for horizontal bar charts; default is x<\/code><\/li>\nmax<\/code> (float): maximum value for Y axes; default is no maximum value<\/li>\nopacity<\/code> (float): opacity to apply to the lines or bars; it must be between 0<\/code> and 1<\/code>; default is 0.8<\/code><\/li>\nshowLine<\/code> (bool): show (draw) lines; default is true<\/code><\/li>\nstacked<\/code> (bool): enable stacking for line\/bar charts; default is false<\/code><\/li>\ntension<\/code> (float): add Bezier curve tension to lines; when set to 0<\/code>, lines are straight; default is 0<\/code><\/li>\ntheme<\/code> (string): theme used for the chart colors; choices are Chart<\/code>, Gutenberg<\/code>, Rainbow<\/code>, Tertiary<\/code>, Visualizer<\/code>, Wordpress<\/code>; default is Chart<\/code><\/li>\ntime<\/code> (bool): add support for time line on the X axis; default is false<\/code><\/li>\ntimeUnit<\/code> (string): time unit to use if time line is enabled; choices are year<\/code>, quarter<\/code>, month<\/code>, week<\/code>, day<\/code>, hour<\/code>, minute<\/code>, second<\/code>, millisecond<\/code>; default is hour<\/code><\/li>\ntype<\/code> (string): type of chart; choices are bar<\/code>, horizontalbar<\/code>, line<\/code>, pie<\/code>; default is line<\/code><\/li>\nyAxes<\/code> (string): list of Y axes to which the datasets are bound. It allows to enable multi-axis charts. For example, if there are 3 datasets (d1<\/code>, d2<\/code> and d3<\/code>) and we want d1<\/code> to use the first Y axis, and d2<\/code> and d3<\/code> to use the second Y axis, the attribute value must be y,y1,y1<\/code>; default is an empty string, so multi-axis feature is disabled and all datasets are automatically bound to the first (and only) Y axis y<\/code><\/li>\n<\/ul>\n\nHere's a fully functional example:<\/p>\n\n
[chartjs backgroundColors=\"#008000\" fill=\"true\" opacity=\"0.35\" tension=\"0.2\" theme=\"Visualizer\" time=\"true\" timeUnit=\"month\" yAxes=\"y,y1\"]Year,Sales,Expenses\n2020-08,5421.32,1151.21\n2021-02,4823.99,887.23\n2021-03,4945.32,958.00\n2021-10,7086.65,1854.35\n2022-05,7385.21,2009.01\n[\/chartjs]\n<\/code><\/pre>\n\nHere's the result:<\/p>\n\n
<\/p><\/dd>\n
Are there hooks available for developers?<\/h3><\/dt>\nThe following filter hooks are available:<\/p>\n\n
\nsb_chart_block_content<\/code>: filter allowing to manipulate the content before it's processed<\/li>\nsb_chart_block_options<\/code>: filter allowing to add custom Chart.js options<\/li>\n<\/ul>\n\nFor example, to customize the legend, use the sb_chart_block_options<\/code> filter in your functions.php<\/code> theme file as follows:<\/p>\n\n`php\n<\/code><\/pre>\n\nfunction customize_legend($options, $atts, $series) {\n $custom_options = to_array($options);<\/p>\n\n
$custom_options['plugins']['legend']['labels']['font']['size'] = 16;\n$custom_options['plugins']['legend']['labels']['color'] = '#0000FF';\n\nreturn json_decode(json_encode($custom_options));\n<\/code><\/pre>\n\n}\nadd_filter('sb_chart_block_options', 'customize_legend', 10, 3);<\/p>\n\n
function to_array($data) {\n $array = [];<\/p>\n\n
if (is_array($data) || is_object($data)) {\n foreach ($data as $key => $value) {\n $array[$key] = (is_array($value) || is_object($value)) ? to_array($value) : $value;\n }\n} else {\n $array[] = $data;\n}\n\nreturn $array;\n<\/code><\/pre>\n\n}\n `<\/p>\n\n
Here's another way (without array conversion):<\/p>\n\n
`php\n<\/code><\/pre>\n\nfunction customize_legend($options, $atts, $series) {\n if (!isset($options->plugins)) $options->plugins = new stdClass();\n if (!isset($options->plugins->legend)) $options->plugins->legend = new stdClass();\n if (!isset($options->plugins->legend->labels)) $options->plugins->legend->labels = new stdClass();\n if (!isset($options->plugins->legend->labels->font)) $options->plugins->legend->labels->font = new stdClass();<\/p>\n\n
$options->plugins->legend->labels->font->size = 16;\n$options->plugins->legend->labels->color = '#0000FF';\n\nreturn $options;\n<\/code><\/pre>\n\n}\nadd_filter('sb_chart_block_options', 'customize_legend', 10, 3);\n `<\/p><\/dd>\n\n<\/dl>\n\n\n
1.3.1<\/h4>\n\n\n- Changed: Run esc_attr() against the classNames attribute. Props: Peter Thaleikis (Wordfence) #38<\/li>\n
- Changed: Support PHP 8.4's str_getcsv() changes #38<\/li>\n
- Tested: With WordPress 6.8 and WordPress Multisite<\/li>\n
- Tested: With PHP 8.3 and PHP 8.4<\/li>\n
- Tested: With PHPUnit 9.6<\/li>\n<\/ul>","raw_excerpt":"Displays a Chart for CSV content.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/138823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=138823"}],"author":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/bobbingwide"}],"wp:attachment":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=138823"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=138823"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=138823"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=138823"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=138823"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=138823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}