WordPress.org
Get WordPress

Plugin Directory

Changeset 708090


Ignore:
Timestamp:
05/05/2013 06:51:06 AM (13 years ago)
Author:
thmufl
Message:

Added tsv support

Location:
ipu-chart
Files:
7 edited
1 copied

Legend:

Unmodified
Added
Removed

  • ipu-chart/tags/0.4.1/ipu-chart.php

    r705521 r708090  
    33    Plugin Name: IPU-Chart
    44    Plugin URI: https://www.ipublia.com/ipu-chart
    5     Description: Creates SVG based charts out of your CSV data. Currently supports bar, pie, donut, line and scatter charts.
     5    Description: Creates SVG based charts out of your comma or tab separated data. Currently supports bar, pie, donut, line and scatter charts.
    66    Author: ipublia, Thomas Müller Flury
    7     Version: 0.4
     7    Version: 0.4.1
    88    Author URI: https://www.ipublia.com/author/thmufl/
    99    Text Domain: ipuchart
    … …  
    2929    }
    3030    $content = trim($content);
    31     $content = str_replace(";", ",", $content);
    3231    return ipu_render_csv($id, do_shortcode($content));
     32}
     33
     34// This is the tsv tag
     35function ipu_tsv_func($atts, $content = null) {
     36    extract(shortcode_atts(array(
     37        'id' => 'tsv' . rand(0, 999999),
     38    ), $atts));
     39   
     40    if(has_filter("the_content", "wpautop")) {
     41        $content = str_replace("<br />", "\r", $content);
     42    }
     43    $content = trim($content);
     44    return ipu_render_tsv($id, do_shortcode($content));
    3345}
    3446
    … …  
    3749    extract(shortcode_atts(array(
    3850        'id' => 'chart' . rand(0, 999999),
    39         'csv' => 'csv',
     51        'csv' => '',
     52        'tsv' => '',
    4053        'type' => 'bar',
    4154        'category' => 'name',
    … …  
    5366    ), $atts));
    5467   
    55     return ipu_render_chart($id, $csv, $type, $category, $value,
     68    return ipu_render_chart($id, $csv, $tsv, $type, $category, $value,
    5669                            $format, $color, $style,
    5770                            $title, $description, $sort, $interpolate, $animate,
    … …  
    5972}
    6073
    61 // This is the table tag
     74// This is the table tag (deprecated)
    6275function ipu_table_func($atts) {
    6376    extract(shortcode_atts(array(
    6477        'id' => 'table' . rand(0, 999999),
    65         'csv' => 'csv',
     78        'csv' => '',
    6679        'title' => 'Set a title',
    6780        'debug' => 'false'
    … …  
    7285
    7386add_shortcode("csv", "ipu_csv_func");
     87add_shortcode("tsv", "ipu_tsv_func");
    7488add_shortcode("chart", "ipu_chart_func");
    7589add_shortcode("table", "ipu_table_func");
    … …  
    7993}
    8094
    81 function ipu_render_chart($id, $csv, $type, $category, $value, $format, $color, $style, $title, $description, $sort, $interpolate, $animate, $img, $debug, $version) {
    82     return "<figure id='{$id}' class='chart'>
    83                 <script type='text/javascript'>
    84                 renderChart('{$id}', '{$csv}', '{$type}', '{$category}', '{$value}',
    85                             '{$format}', '{$color}', '{$style}',
    86                             '{$title}', '{$description}', '{$sort}', '{$interpolate}', '{$animate}',
    87                             '{$img}', '{$debug}', '{$version}');
    88                 </script>
    89             </figure>";
     95function ipu_render_tsv($id, $content) {
     96    return "<div id='{$id}' class='tsv' style='display:none;white-space:pre;'>{$content}</div>";
     97}
     98
     99function ipu_render_chart($id, $csv, $tsv, $type, $category, $value, $format, $color, $style, $title, $description, $sort, $interpolate, $animate, $img, $debug, $version) {
     100    if($type === 'table') {
     101        return "<table id='{$id}' class='chart table'>
     102                    <script type='text/javascript'>                 
     103                    renderChart('{$id}', '{$csv}', '{$tsv}', '{$type}', '{$category}', '{$value}',
     104                                '{$format}', '{$color}', '{$style}',
     105                                '{$title}', '{$description}', '{$sort}', '{$interpolate}', '{$animate}',
     106                                '{$img}', '{$debug}', '{$version}');
     107                    </script>
     108                </table>";
     109    } else {   
     110        return "<figure id='{$id}' class='chart'>
     111                    <script type='text/javascript'>
     112                    renderChart('{$id}', '{$csv}', '{$tsv}', '{$type}', '{$category}', '{$value}',
     113                                '{$format}', '{$color}', '{$style}',
     114                                '{$title}', '{$description}', '{$sort}', '{$interpolate}', '{$animate}',
     115                                '{$img}', '{$debug}', '{$version}');
     116                    </script>
     117                </figure>";
     118    }
    90119}
    91120
    … …  
    93122    return "<table id='{$id}' class='chart-data'>
    94123                <script type='text/javascript'>                 
    95                 renderTable('{$id}', '{$csv}', '{$title}', '{$debug}');
     124                renderTableDeprecated('{$id}', '{$csv}', '{$title}', '{$debug}');
    96125                </script>
    97126            </table>";

  • ipu-chart/tags/0.4.1/js/ipu-chart.js

    r705521 r708090  
    9090}
    9191
    92 function createFigureElement(id, title, description, style) {
     92function createFigureElement(id, title, description, style, version) {
    9393    var figure = d3.select('#' + id);   
    9494    figure.attr("style", style);
    … …  
    128128}
    129129
    130 function renderChart(id, csv, type, category, value, format, color, style, title, description, sort, interpolate, animate, img, debug, version) {
     130function renderChart(id, csv, tsv, type, category, value, format, color, style, title, description, sort, interpolate, animate, img, debug, version) {
    131131   
    132132    debug = (debug.toLowerCase() == "true");
    … …  
    145145                   
    146146        console.log("CALL RENDER CHART: "
    147                     + "\n\tid: " + id 
     147                    + "\n\tid: " + id
    148148                    + "\n\tcsv: " + csv
     149                    + "\n\ttsv: " + tsv
    149150                    + "\n\ttype: " + type
    150151                    + "\n\tcategory: " + category
    … …  
    162163    }
    163164   
    164     var figure = createFigureElement(id, title, description, style);
    165 
    166     if(!svgSupport) return renderNoSvgSupport(figure, img);
    167        
    168     createTooltip();
     165    var figure = null;
     166   
     167    if(type === 'table') {
     168        figure = d3.select("#" + id);
     169        figure.append("caption").text(title);
     170    } else {
     171        figure = createFigureElement(id, title, description, style, version);
     172        if(!svgSupport) return renderNoSvgSupport(figure, img);
     173        createTooltip();
     174    }
    169175   
    170176    category = toArray(category);
    … …  
    178184    else if(animate[0] == "fast") animate = ["1000", "linear"];
    179185   
    180     if((/^#/).test(csv)) {
    181         if(d3.select(csv).empty()) {
    182             return renderError(figure, "The csv '" + csv + "' does not exist in this document.");
    183         }   
    184         data = d3.csv.parse(d3.select(csv).text());
    185         if(debug) { console.log("Loaded data (sync): "); console.log(data) };
    186        
    187         render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
    188        
     186    if(csv.length > 0) {
     187        if((/^#/).test(csv)) {
     188            if(d3.select(csv).empty()) {
     189                return renderError(figure, "The csv '" + csv + "' does not exist in this document.");
     190            }   
     191            data = d3.csv.parse(d3.select(csv).text());
     192            if(debug) { console.log("Loaded data (sync): "); console.log(data) };
     193       
     194            render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
     195       
     196        } else {
     197            d3.csv(csv, function(error, data) {
     198                if(error) {
     199                    console.warn("There was an error loading the data: " + error);
     200                    return renderError(figure, "There was an error loading the data: " + csv);
     201                }
     202                if(debug) { console.log("Loaded data (async): "); console.log(data) };
     203                render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
     204            });             
     205        }
     206    } else if(tsv.length > 0) {
     207        if((/^#/).test(tsv)) {
     208            if(d3.select(tsv).empty()) {
     209                return renderError(figure, "The tsv '" + tsv + "' does not exist in this document.");
     210            }   
     211            data = d3.tsv.parse(d3.select(tsv).text());
     212            if(debug) { console.log("Loaded data (sync): "); console.log(data) };
     213       
     214            render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
     215       
     216        } else {
     217            d3.tsv(tsv, function(error, data) {
     218                if(error) {
     219                    console.warn("There was an error loading the data: " + error);
     220                    return renderError(figure, "There was an error loading the data: " + tsv);
     221                }
     222                if(debug) { console.log("Loaded data (async): "); console.log(data) };
     223                render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
     224            });             
     225        }
    189226    } else {
    190         d3.csv(csv, function(error, data) {
    191             if(error) {
    192                 console.warn("There was an error loading the data: " + error);
    193                 return renderError(figure, "There was an error loading the data: " + csv);
    194             }
    195             if(debug) { console.log("Loaded data (async): "); console.log(data) };
    196             render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
    197         });             
     227        console.warn("There is no data to display (set a csv or tsv that point to the data)");
     228        return renderError(figure, "There is no data to display.");
    198229    }
    199230}   
    … …  
    220251    else if(type.toLowerCase().trim() == "scatter")
    221252        renderScatter(figure, data, category, value, format, color, sort, interpolate, animate, debug);
     253       
     254    else if(type.toLowerCase().trim() == "table")
     255        renderTable(figure, data, category, value, debug);
    222256       
    223257    else if(type.toLowerCase().trim() == "line.multi")
    … …  
    738772}
    739773
    740 function renderTable(id, csv, title, debug) {
     774function renderTable(figure, data, category, value, debug) {
     775    if(debug) { console.log("START RENDER TABLE") };
     776
     777    var columns = category.concat(value);
     778
     779    thead = figure.append("thead"),
     780    tbody = figure.append("tbody");
     781   
     782    // append the header row
     783    thead.append("tr")
     784        .selectAll("th")
     785        .data(columns)
     786        .enter()
     787        .append("th")
     788            .text(function(column) { return column; });
     789
     790    // create a row for each object in the data
     791    var rows = tbody.selectAll("tr")
     792        .data(data)
     793        .enter()
     794        .append("tr");
     795
     796    // create a cell in each row for each column
     797    var cells = rows.selectAll("td")
     798        .data(function(row) {
     799            return columns.map(function(column) {
     800                return {column: column, value: row[column]};
     801            });
     802        })
     803        .enter()
     804        .append("td")
     805            .text(function(d) { return d.value; });
     806
     807    if(debug) { console.log("END RENDER TABLE"); } 
     808}
     809
     810function renderTableDeprecated(id, csv, title, debug) {
    741811    var debug = (debug.toLowerCase() == "true");
    742     if(debug) { console.log("START RENDER TABLE"
     812    if(debug) { console.log("START RENDER TABLE (deprecated)"
    743813                                + "\n\tid: " + id
    744814                                + "\n\tcsv: " + csv
    … …  
    785855            .text(function(d) { return d.value; });
    786856           
    787     if(debug) { console.log("END RENDER TABLE"); }
     857    if(debug) { console.log("END RENDER TABLE (deprecated)"); }
    788858}
    789859   

  • ipu-chart/tags/0.4.1/readme.txt

    r705521 r708090  
    44Requires at least: 3.0.1
    55Tested up to: 3.5.1
    6 Stable tag: 0.4
     6Stable tag: 0.4.1
    77License: GPLv2 or later
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html
    99
    10 Creates SVG based, animated bar, pie, donut, line and scatter charts out of your CSV data. A powerful, easy to use shortcode.
     10Creates SVG based, animated bar, pie, donut, line and scatter charts out of your data. A powerful, easy to use shortcode.
    1111
    1212== Description ==
    1313
    14 IPU-Chart is an easy to use shortcode that creates SVG based bar, pie, donut, line and scatter charts out of your CSV data.
     14IPU-Chart is an easy to use shortcode that creates SVG based bar, pie, donut, line and scatter charts out of your csv (comma separated) or tsv (tab separated) data.
    1515
    16 The plugin takes a csv file (Texteditor, Excel, Numbers etc.) and displays it as a chart. IPU-Chart is based on [SVG](http://www.w3.org/TR/SVG/) and [D3](http://d3js.org/). It works perfectly on large computer screens as well as on tablets and smaller mobile screens. For browsers that do not support SVG an alternative image can be set.
     16The plugin allows you to load the data to display as a chart from a remote service that delivers csv or tsv formatted data. You can also export you data from favorite spreadsheet application (Excel, Numbers, Open Office) and display it as a chart in your blog or page.
     17
     18IPU-Chart is based on [SVG](http://www.w3.org/TR/SVG/) and [D3](http://d3js.org/). It works perfectly on large computer screens as well as on tablets and smaller mobile screens. For browsers that do not support SVG an alternative image can be set.
     19
     20The styling of all chart types can be done precisely and easily with css.
    1721
    1822= Features =
    1923
    2024* Create bar, pie, donut, line and scatter charts
    21 * Enter the csv data directy in you blog or page
    22 * Or load the csv data from a remote location
    23 * Create multiple views of the csv data
    24 * Load csv data from a remote location
     25* Enter the csv/tsv data directy in you blog or page
     26* Load the csv/tsv data from a remote location
     27* Create multiple views of the data
     28* Style the charts with css
    2529* Tooltip for chart details (see screenshots)
    2630* Animated bar charts
    2731* Define colors and number formats of the chart
    28 * Create an additional table view of the csv data
     32* Create an additional table view of the data
    2933
    3034= Usage =
    … …  
    4145</pre>
    4246
    43 Second, define the chart. Reference the csv (don't forget the '#'). Set the chart type and the category and value column. Define the format (string, integer, float or date) of the category and value columns:
     47Second, define the chart. Reference the csv (or tsv). Set the chart type and the category and value column. Define the format (string, integer, float or date) of the category and value columns. Enter a title and a description for the chart:
    4448
    4549<pre>
    … …  
    5458</pre>
    5559
    56 = Usage Examples =
    57 
    58 Some examples for the different chart types (that you can copy and paste as is in your own example pages).
    59 
    60 <b>Bar Chart</b>
     60But the data can of course also be requested by url:
    6161
    6262<pre>
    63 [chart csv='#data' type='bar' category='Country' value='Population' format='string, float' title='Top five most populous countries of the world...' description='The top five most populous countries of the world...' animate='medium']
     63[chart tsv='https://www.ipublia.com/downloads/sales.txt'
     64       type='line'
     65       category='Date'
     66       value='Sales ($)'
     67       format='dd.mm.yy, float'
     68       color='green'
     69       title='Sales of the week']
    6470</pre>
    6571
    66 <b>Horizontal Bar Chart</b>
     72This allows you to load the data from a remote data service and display it easily as a chart.
    6773
    68 <pre>
    69 [chart csv='#data' type='bar.horizontal' category='Country' value='Population' format='string, float' title='Top five most populous countries of the world...' description='The top five most populous countries of the world...' animate='medium']
    70 </pre>
     74Have a look at the [User Guide](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/ "IPU-Chart User Guide") of the plugin. It contains a [Quick Start](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/#quickstart "IPU-Chart Quick Start") section, [code examples](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/#usage "IPU-Chart Code Examples") for every chart type and a detailed description of the attributes and css-styles of the plugin.
    7175
    72 <b>Pie Chart</b>
    73 
    74 <pre>
    75 [chart csv='#data' type='pie' category='Country' value='Population' format='string, float' title='Top five most populous countries of the world...' description='The top five most populous countries of the world...' animate='medium']
    76 </pre>
    77 
    78 <b>Donut Chart</b>
    79 
    80 <pre>
    81 [chart csv='#data' type='donut' category='Country' value='Population' format='string, float' title='Top five most populous countries of the world...' description='The top five most populous countries of the world...' animate='medium' debug='true']
    82 </pre>
    83 
    84 <b>Line Chart</b>
    85 
    86 For a line charts you need some data with <code>integer</code>, <code>float</code> or <code>date</code> values as category:
    87 
    88 <pre>
    89 [csv id='aapl']Date,Open,High,Low,Close,Volume,Adj Close
    90 2013-04-01,441.90,443.70,426.40,429.79,16407200,429.79
    91 2013-03-25,464.69,469.95,441.62,442.66,14002700,442.66
    92 2013-03-18,441.45,462.10,441.20,461.91,15840700,461.91
    93 2013-03-11,429.75,444.23,425.14,443.66,16382300,443.66
    94 2013-03-04,427.80,435.43,419.00,431.72,18152800,431.72
    95 2013-02-25,453.85,455.12,429.98,430.47,16688500,430.47
    96 2013-02-19,461.10,462.73,442.82,450.81,15088600,450.81
    97 2013-02-11,476.50,484.94,459.92,460.16,16776900,460.16
    98 2013-02-04,453.91,478.81,442.00,474.98,21299300,474.98[/csv]
    99 </pre>
    100 
    101 To display the close prize as a line chart:
    102 
    103 <pre>
    104 [chart csv='#aapl' type='line' category='Date' value='Close' format='yyyy-mm-dd, float' title='Apple close prize...' description='Apple close prize...']
    105 </pre>
    106 
    107 You can also load the csv data remotly. Just enter the url of the csv in the 'csv' attribute:
    108 
    109 <pre>
    110 [chart csv='https://www.ipublia.com/wp-content/uploads/GOOG.csv' type='line' category='Date' value='Close' format='yyyy-mm-dd, float' title='Google close prize...' description='Google close prize...' color="Crimson"]
    111 </pre>
    112 
    113 The same for Apple would be:
    114 
    115 <pre>
    116 [chart csv='https://www.ipublia.com/wp-content/uploads/AAPL.csv' type='line' category='Date' value='Close' format='yyyy-mm-dd, float' title='Apple close prize...' description='Apple close prize...' color="SlateBlue"]
    117 </pre>
    118 
    119 <b>Scatter Chart</b>
    120 
    121 A scatter chart (or 'plot') displays the correlation between two data sets (if there exists one). Below an example of a scatter chart that shows the correlation between <em>temperature and ice cream sales</em>:
    122 
    123 <pre>
    124 [csv id='icecreamsales']Period,Temperature (Celsius),Sales ($)
    125 Day 1-12,14.2,215
    126 Day 1-12,16.4,325
    127 Day 1-12,11.9,185
    128 Day 1-12,15.2,332
    129 Day 1-12,18.5,406
    130 Day 1-12,22.1,522
    131 Day 1-12,19.4,412
    132 Day 1-12,25.1,614
    133 Day 1-12,23.4,544
    134 Day 1-12,18.1,421
    135 Day 1-12,22.6,445
    136 Day 1-12,17.2,408[/csv]
    137 </pre>
    138 
    139 Out of this raw data we can create a scatter chart that shows the correlation between the two data sets:
    140 
    141 <pre>
    142 [chart csv='#icecreamsales' type='scatter' category='Period' value='Temperature (Celsius), Sales ($)' format='string, float, integer' color="Crimson" title='Ice Cream Sales vs Temperature. Source: www.mathsisfun.com' description='Scatter Chart displaying the relationship between Ice Cream Sales and Temperature. Source: www.mathsisfun.com']
    143 </pre>
    144 
    145 <b>Table View</b>
    146 
    147 To define a table view just reference the csv with a 'table' shortcode (don't forget the '#'). Example:
    148 
    149 <pre>
    150 [table csv='#icecreamsales' title='Ice Cream Sales vs Temperature. Source: www.mathsisfun.com']
    151 </pre>
    152 
    153 The <code>chart</code> shortcode has many more attributes than shown here. Please refer to our [User Guide](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/ "IPU-Chart User Guide").
    154 
    155 Visit our [Support Forum](https://www.ipublia.com/support/forums/ "IPU-Chart Support Forum") for questions or suggestions.
     76Please visit our [Support Forum](https://www.ipublia.com/support/forums/ "IPU-Chart Support Forum") for questions or suggestions.
    15677
    15778= Further Reading =
    15879
     80* Our [Blogs](https://www.ipublia.com/category/wordpress/ipu-chart/ "Blogs about IPU-Chart") about IPU-Chart
    15981* The IPU-Chart for WordPress [User Guide](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/ "IPU-Chart User Guide").
    16082* The IPU-Chart [Support Forum](https://www.ipublia.com/support/forums/ "IPU-Chart Support Forum").
    … …  
    1801021. Bar chart (with a tooltip)
    1811032. Horizontal bar chart
    182 3. Pie Chart
    183 4. Donut Chart
     1043. Pie chart
     1054. Donut chart
    1841065. Line chart
    1851076. Interpolated line chart
    1861087. Scatter chart (simple)
    1871098. Scatter chart (more complex)
     1109. Line chart with an alternative layout
    188111
    189112== Changelog ==
    … …  
    219142* Minor bug fixes
    220143
     144= 0.4.1 =
     145* Support for tab separated (tsv) data added
     146* [tsv] shortcode added
     147
    221148== Upgrade Notice ==
    222149
    … …  
    237164Shortcodes inside [csv][/csv] are processed now.
    238165Minor bug fixes.
     166
     167= 0.4.1 =
     168* [tsv] shortcode added for better Excel compability (use it like the [csv] but with tab separated data)
     169* Tables can now be defined with [chart type="table" ...]. The columns to display can now be choosen with the 'category' and 'value' attributes.
     170* The [table] shortcode is still supported but deprecated.

  • ipu-chart/trunk/ipu-chart.php

    r705521 r708090  
    33    Plugin Name: IPU-Chart
    44    Plugin URI: https://www.ipublia.com/ipu-chart
    5     Description: Creates SVG based charts out of your CSV data. Currently supports bar, pie, donut, line and scatter charts.
     5    Description: Creates SVG based charts out of your comma or tab separated data. Currently supports bar, pie, donut, line and scatter charts.
    66    Author: ipublia, Thomas Müller Flury
    7     Version: 0.4
     7    Version: 0.4.1
    88    Author URI: https://www.ipublia.com/author/thmufl/
    99    Text Domain: ipuchart
    … …  
    2929    }
    3030    $content = trim($content);
    31     $content = str_replace(";", ",", $content);
    3231    return ipu_render_csv($id, do_shortcode($content));
     32}
     33
     34// This is the tsv tag
     35function ipu_tsv_func($atts, $content = null) {
     36    extract(shortcode_atts(array(
     37        'id' => 'tsv' . rand(0, 999999),
     38    ), $atts));
     39   
     40    if(has_filter("the_content", "wpautop")) {
     41        $content = str_replace("<br />", "\r", $content);
     42    }
     43    $content = trim($content);
     44    return ipu_render_tsv($id, do_shortcode($content));
    3345}
    3446
    … …  
    3749    extract(shortcode_atts(array(
    3850        'id' => 'chart' . rand(0, 999999),
    39         'csv' => 'csv',
     51        'csv' => '',
     52        'tsv' => '',
    4053        'type' => 'bar',
    4154        'category' => 'name',
    … …  
    5366    ), $atts));
    5467   
    55     return ipu_render_chart($id, $csv, $type, $category, $value,
     68    return ipu_render_chart($id, $csv, $tsv, $type, $category, $value,
    5669                            $format, $color, $style,
    5770                            $title, $description, $sort, $interpolate, $animate,
    … …  
    5972}
    6073
    61 // This is the table tag
     74// This is the table tag (deprecated)
    6275function ipu_table_func($atts) {
    6376    extract(shortcode_atts(array(
    6477        'id' => 'table' . rand(0, 999999),
    65         'csv' => 'csv',
     78        'csv' => '',
    6679        'title' => 'Set a title',
    6780        'debug' => 'false'
    … …  
    7285
    7386add_shortcode("csv", "ipu_csv_func");
     87add_shortcode("tsv", "ipu_tsv_func");
    7488add_shortcode("chart", "ipu_chart_func");
    7589add_shortcode("table", "ipu_table_func");
    … …  
    7993}
    8094
    81 function ipu_render_chart($id, $csv, $type, $category, $value, $format, $color, $style, $title, $description, $sort, $interpolate, $animate, $img, $debug, $version) {
    82     return "<figure id='{$id}' class='chart'>
    83                 <script type='text/javascript'>
    84                 renderChart('{$id}', '{$csv}', '{$type}', '{$category}', '{$value}',
    85                             '{$format}', '{$color}', '{$style}',
    86                             '{$title}', '{$description}', '{$sort}', '{$interpolate}', '{$animate}',
    87                             '{$img}', '{$debug}', '{$version}');
    88                 </script>
    89             </figure>";
     95function ipu_render_tsv($id, $content) {
     96    return "<div id='{$id}' class='tsv' style='display:none;white-space:pre;'>{$content}</div>";
     97}
     98
     99function ipu_render_chart($id, $csv, $tsv, $type, $category, $value, $format, $color, $style, $title, $description, $sort, $interpolate, $animate, $img, $debug, $version) {
     100    if($type === 'table') {
     101        return "<table id='{$id}' class='chart table'>
     102                    <script type='text/javascript'>                 
     103                    renderChart('{$id}', '{$csv}', '{$tsv}', '{$type}', '{$category}', '{$value}',
     104                                '{$format}', '{$color}', '{$style}',
     105                                '{$title}', '{$description}', '{$sort}', '{$interpolate}', '{$animate}',
     106                                '{$img}', '{$debug}', '{$version}');
     107                    </script>
     108                </table>";
     109    } else {   
     110        return "<figure id='{$id}' class='chart'>
     111                    <script type='text/javascript'>
     112                    renderChart('{$id}', '{$csv}', '{$tsv}', '{$type}', '{$category}', '{$value}',
     113                                '{$format}', '{$color}', '{$style}',
     114                                '{$title}', '{$description}', '{$sort}', '{$interpolate}', '{$animate}',
     115                                '{$img}', '{$debug}', '{$version}');
     116                    </script>
     117                </figure>";
     118    }
    90119}
    91120
    … …  
    93122    return "<table id='{$id}' class='chart-data'>
    94123                <script type='text/javascript'>                 
    95                 renderTable('{$id}', '{$csv}', '{$title}', '{$debug}');
     124                renderTableDeprecated('{$id}', '{$csv}', '{$title}', '{$debug}');
    96125                </script>
    97126            </table>";

  • ipu-chart/trunk/js/ipu-chart.js

    r705521 r708090  
    9090}
    9191
    92 function createFigureElement(id, title, description, style) {
     92function createFigureElement(id, title, description, style, version) {
    9393    var figure = d3.select('#' + id);   
    9494    figure.attr("style", style);
    … …  
    128128}
    129129
    130 function renderChart(id, csv, type, category, value, format, color, style, title, description, sort, interpolate, animate, img, debug, version) {
     130function renderChart(id, csv, tsv, type, category, value, format, color, style, title, description, sort, interpolate, animate, img, debug, version) {
    131131   
    132132    debug = (debug.toLowerCase() == "true");
    … …  
    145145                   
    146146        console.log("CALL RENDER CHART: "
    147                     + "\n\tid: " + id 
     147                    + "\n\tid: " + id
    148148                    + "\n\tcsv: " + csv
     149                    + "\n\ttsv: " + tsv
    149150                    + "\n\ttype: " + type
    150151                    + "\n\tcategory: " + category
    … …  
    162163    }
    163164   
    164     var figure = createFigureElement(id, title, description, style);
    165 
    166     if(!svgSupport) return renderNoSvgSupport(figure, img);
    167        
    168     createTooltip();
     165    var figure = null;
     166   
     167    if(type === 'table') {
     168        figure = d3.select("#" + id);
     169        figure.append("caption").text(title);
     170    } else {
     171        figure = createFigureElement(id, title, description, style, version);
     172        if(!svgSupport) return renderNoSvgSupport(figure, img);
     173        createTooltip();
     174    }
    169175   
    170176    category = toArray(category);
    … …  
    178184    else if(animate[0] == "fast") animate = ["1000", "linear"];
    179185   
    180     if((/^#/).test(csv)) {
    181         if(d3.select(csv).empty()) {
    182             return renderError(figure, "The csv '" + csv + "' does not exist in this document.");
    183         }   
    184         data = d3.csv.parse(d3.select(csv).text());
    185         if(debug) { console.log("Loaded data (sync): "); console.log(data) };
    186        
    187         render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
    188        
     186    if(csv.length > 0) {
     187        if((/^#/).test(csv)) {
     188            if(d3.select(csv).empty()) {
     189                return renderError(figure, "The csv '" + csv + "' does not exist in this document.");
     190            }   
     191            data = d3.csv.parse(d3.select(csv).text());
     192            if(debug) { console.log("Loaded data (sync): "); console.log(data) };
     193       
     194            render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
     195       
     196        } else {
     197            d3.csv(csv, function(error, data) {
     198                if(error) {
     199                    console.warn("There was an error loading the data: " + error);
     200                    return renderError(figure, "There was an error loading the data: " + csv);
     201                }
     202                if(debug) { console.log("Loaded data (async): "); console.log(data) };
     203                render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
     204            });             
     205        }
     206    } else if(tsv.length > 0) {
     207        if((/^#/).test(tsv)) {
     208            if(d3.select(tsv).empty()) {
     209                return renderError(figure, "The tsv '" + tsv + "' does not exist in this document.");
     210            }   
     211            data = d3.tsv.parse(d3.select(tsv).text());
     212            if(debug) { console.log("Loaded data (sync): "); console.log(data) };
     213       
     214            render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
     215       
     216        } else {
     217            d3.tsv(tsv, function(error, data) {
     218                if(error) {
     219                    console.warn("There was an error loading the data: " + error);
     220                    return renderError(figure, "There was an error loading the data: " + tsv);
     221                }
     222                if(debug) { console.log("Loaded data (async): "); console.log(data) };
     223                render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
     224            });             
     225        }
    189226    } else {
    190         d3.csv(csv, function(error, data) {
    191             if(error) {
    192                 console.warn("There was an error loading the data: " + error);
    193                 return renderError(figure, "There was an error loading the data: " + csv);
    194             }
    195             if(debug) { console.log("Loaded data (async): "); console.log(data) };
    196             render(figure, data, type, category, value, format, color, sort, interpolate, animate, debug);
    197         });             
     227        console.warn("There is no data to display (set a csv or tsv that point to the data)");
     228        return renderError(figure, "There is no data to display.");
    198229    }
    199230}   
    … …  
    220251    else if(type.toLowerCase().trim() == "scatter")
    221252        renderScatter(figure, data, category, value, format, color, sort, interpolate, animate, debug);
     253       
     254    else if(type.toLowerCase().trim() == "table")
     255        renderTable(figure, data, category, value, debug);
    222256       
    223257    else if(type.toLowerCase().trim() == "line.multi")
    … …  
    738772}
    739773
    740 function renderTable(id, csv, title, debug) {
     774function renderTable(figure, data, category, value, debug) {
     775    if(debug) { console.log("START RENDER TABLE") };
     776
     777    var columns = category.concat(value);
     778
     779    thead = figure.append("thead"),
     780    tbody = figure.append("tbody");
     781   
     782    // append the header row
     783    thead.append("tr")
     784        .selectAll("th")
     785        .data(columns)
     786        .enter()
     787        .append("th")
     788            .text(function(column) { return column; });
     789
     790    // create a row for each object in the data
     791    var rows = tbody.selectAll("tr")
     792        .data(data)
     793        .enter()
     794        .append("tr");
     795
     796    // create a cell in each row for each column
     797    var cells = rows.selectAll("td")
     798        .data(function(row) {
     799            return columns.map(function(column) {
     800                return {column: column, value: row[column]};
     801            });
     802        })
     803        .enter()
     804        .append("td")
     805            .text(function(d) { return d.value; });
     806
     807    if(debug) { console.log("END RENDER TABLE"); } 
     808}
     809
     810function renderTableDeprecated(id, csv, title, debug) {
    741811    var debug = (debug.toLowerCase() == "true");
    742     if(debug) { console.log("START RENDER TABLE"
     812    if(debug) { console.log("START RENDER TABLE (deprecated)"
    743813                                + "\n\tid: " + id
    744814                                + "\n\tcsv: " + csv
    … …  
    785855            .text(function(d) { return d.value; });
    786856           
    787     if(debug) { console.log("END RENDER TABLE"); }
     857    if(debug) { console.log("END RENDER TABLE (deprecated)"); }
    788858}
    789859   

  • ipu-chart/trunk/readme.txt

    r705521 r708090  
    44Requires at least: 3.0.1
    55Tested up to: 3.5.1
    6 Stable tag: 0.4
     6Stable tag: 0.4.1
    77License: GPLv2 or later
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html
    99
    10 Creates SVG based, animated bar, pie, donut, line and scatter charts out of your CSV data. A powerful, easy to use shortcode.
     10Creates SVG based, animated bar, pie, donut, line and scatter charts out of your data. A powerful, easy to use shortcode.
    1111
    1212== Description ==
    1313
    14 IPU-Chart is an easy to use shortcode that creates SVG based bar, pie, donut, line and scatter charts out of your CSV data.
     14IPU-Chart is an easy to use shortcode that creates SVG based bar, pie, donut, line and scatter charts out of your csv (comma separated) or tsv (tab separated) data.
    1515
    16 The plugin takes a csv file (Texteditor, Excel, Numbers etc.) and displays it as a chart. IPU-Chart is based on [SVG](http://www.w3.org/TR/SVG/) and [D3](http://d3js.org/). It works perfectly on large computer screens as well as on tablets and smaller mobile screens. For browsers that do not support SVG an alternative image can be set.
     16The plugin allows you to load the data to display as a chart from a remote service that delivers csv or tsv formatted data. You can also export you data from favorite spreadsheet application (Excel, Numbers, Open Office) and display it as a chart in your blog or page.
     17
     18IPU-Chart is based on [SVG](http://www.w3.org/TR/SVG/) and [D3](http://d3js.org/). It works perfectly on large computer screens as well as on tablets and smaller mobile screens. For browsers that do not support SVG an alternative image can be set.
     19
     20The styling of all chart types can be done precisely and easily with css.
    1721
    1822= Features =
    1923
    2024* Create bar, pie, donut, line and scatter charts
    21 * Enter the csv data directy in you blog or page
    22 * Or load the csv data from a remote location
    23 * Create multiple views of the csv data
    24 * Load csv data from a remote location
     25* Enter the csv/tsv data directy in you blog or page
     26* Load the csv/tsv data from a remote location
     27* Create multiple views of the data
     28* Style the charts with css
    2529* Tooltip for chart details (see screenshots)
    2630* Animated bar charts
    2731* Define colors and number formats of the chart
    28 * Create an additional table view of the csv data
     32* Create an additional table view of the data
    2933
    3034= Usage =
    … …  
    4145</pre>
    4246
    43 Second, define the chart. Reference the csv (don't forget the '#'). Set the chart type and the category and value column. Define the format (string, integer, float or date) of the category and value columns:
     47Second, define the chart. Reference the csv (or tsv). Set the chart type and the category and value column. Define the format (string, integer, float or date) of the category and value columns. Enter a title and a description for the chart:
    4448
    4549<pre>
    … …  
    5458</pre>
    5559
    56 = Usage Examples =
    57 
    58 Some examples for the different chart types (that you can copy and paste as is in your own example pages).
    59 
    60 <b>Bar Chart</b>
     60But the data can of course also be requested by url:
    6161
    6262<pre>
    63 [chart csv='#data' type='bar' category='Country' value='Population' format='string, float' title='Top five most populous countries of the world...' description='The top five most populous countries of the world...' animate='medium']
     63[chart tsv='https://www.ipublia.com/downloads/sales.txt'
     64       type='line'
     65       category='Date'
     66       value='Sales ($)'
     67       format='dd.mm.yy, float'
     68       color='green'
     69       title='Sales of the week']
    6470</pre>
    6571
    66 <b>Horizontal Bar Chart</b>
     72This allows you to load the data from a remote data service and display it easily as a chart.
    6773
    68 <pre>
    69 [chart csv='#data' type='bar.horizontal' category='Country' value='Population' format='string, float' title='Top five most populous countries of the world...' description='The top five most populous countries of the world...' animate='medium']
    70 </pre>
     74Have a look at the [User Guide](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/ "IPU-Chart User Guide") of the plugin. It contains a [Quick Start](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/#quickstart "IPU-Chart Quick Start") section, [code examples](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/#usage "IPU-Chart Code Examples") for every chart type and a detailed description of the attributes and css-styles of the plugin.
    7175
    72 <b>Pie Chart</b>
    73 
    74 <pre>
    75 [chart csv='#data' type='pie' category='Country' value='Population' format='string, float' title='Top five most populous countries of the world...' description='The top five most populous countries of the world...' animate='medium']
    76 </pre>
    77 
    78 <b>Donut Chart</b>
    79 
    80 <pre>
    81 [chart csv='#data' type='donut' category='Country' value='Population' format='string, float' title='Top five most populous countries of the world...' description='The top five most populous countries of the world...' animate='medium' debug='true']
    82 </pre>
    83 
    84 <b>Line Chart</b>
    85 
    86 For a line charts you need some data with <code>integer</code>, <code>float</code> or <code>date</code> values as category:
    87 
    88 <pre>
    89 [csv id='aapl']Date,Open,High,Low,Close,Volume,Adj Close
    90 2013-04-01,441.90,443.70,426.40,429.79,16407200,429.79
    91 2013-03-25,464.69,469.95,441.62,442.66,14002700,442.66
    92 2013-03-18,441.45,462.10,441.20,461.91,15840700,461.91
    93 2013-03-11,429.75,444.23,425.14,443.66,16382300,443.66
    94 2013-03-04,427.80,435.43,419.00,431.72,18152800,431.72
    95 2013-02-25,453.85,455.12,429.98,430.47,16688500,430.47
    96 2013-02-19,461.10,462.73,442.82,450.81,15088600,450.81
    97 2013-02-11,476.50,484.94,459.92,460.16,16776900,460.16
    98 2013-02-04,453.91,478.81,442.00,474.98,21299300,474.98[/csv]
    99 </pre>
    100 
    101 To display the close prize as a line chart:
    102 
    103 <pre>
    104 [chart csv='#aapl' type='line' category='Date' value='Close' format='yyyy-mm-dd, float' title='Apple close prize...' description='Apple close prize...']
    105 </pre>
    106 
    107 You can also load the csv data remotly. Just enter the url of the csv in the 'csv' attribute:
    108 
    109 <pre>
    110 [chart csv='https://www.ipublia.com/wp-content/uploads/GOOG.csv' type='line' category='Date' value='Close' format='yyyy-mm-dd, float' title='Google close prize...' description='Google close prize...' color="Crimson"]
    111 </pre>
    112 
    113 The same for Apple would be:
    114 
    115 <pre>
    116 [chart csv='https://www.ipublia.com/wp-content/uploads/AAPL.csv' type='line' category='Date' value='Close' format='yyyy-mm-dd, float' title='Apple close prize...' description='Apple close prize...' color="SlateBlue"]
    117 </pre>
    118 
    119 <b>Scatter Chart</b>
    120 
    121 A scatter chart (or 'plot') displays the correlation between two data sets (if there exists one). Below an example of a scatter chart that shows the correlation between <em>temperature and ice cream sales</em>:
    122 
    123 <pre>
    124 [csv id='icecreamsales']Period,Temperature (Celsius),Sales ($)
    125 Day 1-12,14.2,215
    126 Day 1-12,16.4,325
    127 Day 1-12,11.9,185
    128 Day 1-12,15.2,332
    129 Day 1-12,18.5,406
    130 Day 1-12,22.1,522
    131 Day 1-12,19.4,412
    132 Day 1-12,25.1,614
    133 Day 1-12,23.4,544
    134 Day 1-12,18.1,421
    135 Day 1-12,22.6,445
    136 Day 1-12,17.2,408[/csv]
    137 </pre>
    138 
    139 Out of this raw data we can create a scatter chart that shows the correlation between the two data sets:
    140 
    141 <pre>
    142 [chart csv='#icecreamsales' type='scatter' category='Period' value='Temperature (Celsius), Sales ($)' format='string, float, integer' color="Crimson" title='Ice Cream Sales vs Temperature. Source: www.mathsisfun.com' description='Scatter Chart displaying the relationship between Ice Cream Sales and Temperature. Source: www.mathsisfun.com']
    143 </pre>
    144 
    145 <b>Table View</b>
    146 
    147 To define a table view just reference the csv with a 'table' shortcode (don't forget the '#'). Example:
    148 
    149 <pre>
    150 [table csv='#icecreamsales' title='Ice Cream Sales vs Temperature. Source: www.mathsisfun.com']
    151 </pre>
    152 
    153 The <code>chart</code> shortcode has many more attributes than shown here. Please refer to our [User Guide](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/ "IPU-Chart User Guide").
    154 
    155 Visit our [Support Forum](https://www.ipublia.com/support/forums/ "IPU-Chart Support Forum") for questions or suggestions.
     76Please visit our [Support Forum](https://www.ipublia.com/support/forums/ "IPU-Chart Support Forum") for questions or suggestions.
    15677
    15778= Further Reading =
    15879
     80* Our [Blogs](https://www.ipublia.com/category/wordpress/ipu-chart/ "Blogs about IPU-Chart") about IPU-Chart
    15981* The IPU-Chart for WordPress [User Guide](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/ "IPU-Chart User Guide").
    16082* The IPU-Chart [Support Forum](https://www.ipublia.com/support/forums/ "IPU-Chart Support Forum").
    … …  
    1801021. Bar chart (with a tooltip)
    1811032. Horizontal bar chart
    182 3. Pie Chart
    183 4. Donut Chart
     1043. Pie chart
     1054. Donut chart
    1841065. Line chart
    1851076. Interpolated line chart
    1861087. Scatter chart (simple)
    1871098. Scatter chart (more complex)
     1109. Line chart with an alternative layout
    188111
    189112== Changelog ==
    … …  
    219142* Minor bug fixes
    220143
     144= 0.4.1 =
     145* Support for tab separated (tsv) data added
     146* [tsv] shortcode added
     147
    221148== Upgrade Notice ==
    222149
    … …  
    237164Shortcodes inside [csv][/csv] are processed now.
    238165Minor bug fixes.
     166
     167= 0.4.1 =
     168* [tsv] shortcode added for better Excel compability (use it like the [csv] but with tab separated data)
     169* Tables can now be defined with [chart type="table" ...]. The columns to display can now be choosen with the 'category' and 'value' attributes.
     170* The [table] shortcode is still supported but deprecated.
Note: See TracChangeset for help on using the changeset viewer.