{"key":"chartist","name":"Chartist","instructions":"Select the type of chart that you want, and the other options below. In between the Generico tags put a regular html table using the Atto editor table icon. Each column is a set of data. The first row in a column is the data set title. When the page is displayed, in place of the table there will be a chart. (Dev. note. AMD broke on later versions of Chartist. So we remain on 0.97)","requirecss":"//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css","showatto":"1","requirejs":"//cdn.jsdelivr.net/chartist.js/0.9.7/chartist.min.js","shim":"","defaults":"charttype=\"line|bar|pie|donut\",rowlabels=\"no|yes\", style=\"ct-fixed-widths|ct-golden-section|ct-square|ct-perfect-fourth\",width=400,height=250","amd":"1","body":"<div id='@@AUTOID@@_chart' class='ct-chart @@style@@ '></div>\n<div id='@@AUTOID@@_datatable' style='display: none'>\n@@charttype@@\n@@rowlabels@@\n@@width@@\n@@height@@","bodyend":"</div>","script":"//this uses a plain html table as the data source, header row + no row label + multirows\nvar da = [];\nvar collabels = [];\nvar rowlabels = [];\nvar options = {};\nif(@@style@@=='ct-fixed-widths'){\noptions.width = opts['width'];\noptions.height = opts['height'];\n}\n\n//extract an array of values from each row(tr) as a 2d array of values (da)\n$('#' + @@AUTOID@@ + '_datatable > table tr').each(function(i, the_tr){\n\tvar onerow =[];\n\tvar cells= $(the_tr).find('td');\n\tif(cells.length>0){\n\t\t cells.each(function(j,the_cell){onerow.push($(the_cell).text())});\n\t\t da.push(onerow);\n\t};\n});\n\n//extract an array of values from the head row(th) as col labels (collabels)\nvar headcells = $('#' + @@AUTOID@@ + '_datatable > table th');\nif(headcells.length>0){\n\t headcells.each(function(n,the_hcell){collabels.push($(the_hcell).text())});\n};\n\n\n//if rowlabels = true, we extract row labels from the first col of each row\n//and remove the first col of the head row. \nif(opts['rowlabels']=='yes'){\n\t //remove the first col into labels \n\t $().each(da,function(index,item){\n\t  rowlabels.push(item.shift())\n\t });\n\t //remove the first col of head, because its useless\n\t if(collabels.length>0){\n\t  collabels.shift();\n\t } \n}\n\nvar data = {\n  labels: collabels\n};\n\nswitch (@@charttype@@){\n case 'line':\n    data.series = da;\n   new Chartist.Line('#' + @@AUTOID@@ + '_chart', data, options);\n   break;\ncase 'bar':\n   data.series = da;\n   new Chartist.Bar('#' + @@AUTOID@@ + '_chart', data, options);\n   break;\ncase 'pie':\n   data.series = da.length>0 ? da[0] : [];\n   new Chartist.Pie('#' + @@AUTOID@@ + '_chart', data, options);\n   break;\ncase 'donut':\n    data.series = da.length>0 ? da[0] : [];\n    options.donut = true;\n   new Chartist.Pie('#' + @@AUTOID@@ + '_chart', data, options);\n   break;\n}","style":"","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.2"}