WordPress.org
Get WordPress

Plugin Directory

Changeset 703508


Ignore:
Timestamp:
04/25/2013 02:58:23 PM (13 years ago)
Author:
thmufl
Message:

Axis labels added. Docu enhanced.

Location:
ipu-chart/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • ipu-chart/trunk/css/ipu-chart.css

    r694666 r703508  
    6060.x.label {
    6161    fill: dimGray;
    62     font-weight: bold;
    63 }   
     62    stroke: dimGray;
     63    stroke-opacity: 1.0;
     64    stroke-width: 0.1;
     65}
    6466
    6567.y.axis {
    … …  
    8385.y.label {
    8486    fill: dimGray;
    85     font-weight: bold;
     87    stroke: dimGray;
     88    stroke-opacity: 1.0;
     89    stroke-width: 0.1;
    8690}
    8791

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

    r700176 r703508  
    55    Description: Creates SVG based charts out of your CSV data. Currently supports bar, pie, donut and line charts.
    66    Author: ipublia, Thomas Müller Flury
    7     Version: 0.3
     7    Version: 0.3.1
    88    Author URI: https://www.ipublia.com/author/thmufl/
    99    Text Domain: ipuchart
    … …  
    4242        'value' => 'value',
    4343        'format' => '%s,%f',
    44         'color' => 'SlateBlue',
     44        'color' => 'auto',
    4545        'style' => 'width:100%;height:300px;',
    4646        'title' => 'Set a title',

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

    r700167 r703508  
    264264        .attr("class", "x axis")
    265265        .attr("transform", "translate(0," + 0 + ")")
    266         .call(xAxis);
     266        .call(xAxis)
     267            .append("text")
     268                .attr("class", "x label")
     269                .attr("x", width)
     270                .attr("dx", "-.21em")
     271                .attr("dy", "-.21em")
     272                .style("text-anchor", "end")
     273                .text(category);
    267274
    268275    chart.append("g")
    269276        .attr("class", "y axis")
    270277        .attr("transform", "translate(" + width + ", 0)")
    271         .call(yAxis);
     278        .call(yAxis)
     279            .append("text")
     280                .attr("class", "y label")
     281                .attr("transform", "rotate(-90)")
     282                .attr("dx", "-.21em")
     283                .attr("dy", ".91em")
     284                .style("text-anchor", "end")
     285                .text(value);
    272286
    273287    chart.append("path")
    … …  
    334348        .attr("class", "x axis")
    335349        .attr("transform", "translate(0," + height + ")")
    336         .call(xAxis);
     350        .call(xAxis)
     351            .append("text")
     352                .attr("class", "x label")
     353                .attr("x", width)
     354                .attr("dx", "-.21em")
     355                .attr("y", -height)
     356                .attr("dy", "-.21em")
     357                .style("text-anchor", "end")
     358                .text(category);
    337359
    338360    chart.append("g")
    339361        .attr("class", "y axis")
    340362        .attr("transform", "translate(" + width + ", 0)")
    341         .call(yAxis);
     363        .call(yAxis)
     364            .append("text")
     365                .attr("class", "y label")
     366                .attr("transform", "rotate(-90)")
     367                .attr("dx", "-.21em")
     368                .attr("dy", ".91em")
     369                .style("text-anchor", "end")
     370                .text(value);
    342371       
    343372    chart.selectAll(".bar")
    … …  
    429458    chart.append("g")
    430459        .attr("class", "x axis")
    431         .attr("transform", "translate(0," + 0 + ")")
    432         .call(xAxis);
     460        .attr("transform", "translate(0,0)")
     461        .call(xAxis)
     462            .append("text")
     463                .attr("class", "x label")
     464                .attr("x", width)
     465                .attr("dx", "-.21em")
     466                .attr("dy", "-.21em")
     467                .style("text-anchor", "end")
     468                .text(value);
    433469
    434470    chart.append("g")
    435471        .attr("class", "y axis")
    436         .call(yAxis);
     472        .call(yAxis)
     473            .append("text")
     474                .attr("class", "y label")
     475                .attr("y", width)
     476                .attr("transform", "rotate(-90)")
     477                .attr("dx", "-.21em")
     478                .attr("dy", ".91em")
     479                .style("text-anchor", "end")
     480                .text(category);
    437481       
    438482    chart.selectAll(".bar")

  • ipu-chart/trunk/readme.txt

    r700167 r703508  
    11=== Plugin Name ===
    22Contributors: thmufl
    3 Tags: chart, diagram, svg, csv, excel, numbers, bar chart, pie chart, line chart, animation
     3Tags: chart, diagram, svg, csv, excel, numbers, bar chart, pie chart, line chart, donut chart, animation, quotes
    44Requires at least: 3.0.1
    55Tested up to: 3.5.1
    6 Stable tag: 0.3
     6Stable tag: 0.3.1
    77License: GPLv2 or later
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    2929= Usage =
    3030
    31 First, define your data. You can create it immediately in WordPress or copy and paste it from an export of your favourite spreadsheet application.
     31First, define your data. You can create it immediately in WordPress or copy and paste it from an export of your favourite spreadsheet application. Example:
    3232
    3333<pre>
    34 [csv id='popdata']Country,Population
     34[csv id='data']Country,Population
    3535China,1343.24
    3636India,1205.07
    37 United States,313.85
     37USA,313.85
    3838Indonesia,248.22
    3939Brazil,205.72[/csv]
    4040</pre>
    4141
    42 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.
     42Second, 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:
    4343
    4444<pre>
    45 [chart id='chart0'
    46        csv='#popdata'
    47        type='bar | bar.horizontal | pie | donut | line'
    48        category='Country'
    49        value='Population'
    50        format='sting,float'
    51        color='DarkOrange, DarkBlue'
    52        style='height: 350px'
    53        title='Top five most populous countries of the world...'
    54        description='The top five most populous countries of the world...'
    55        sort='Population'
    56        interpolate='cardinal'
    57        animate='medium'
    58        img='http://www.example.com/chart0.png'
    59        debug='false']
     45[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']
    6046</pre>
    6147
    62 To define a table view just reference the csv (don't forget the '#'):
     48= Usage Examples =
     49
     50Horizontal bar chart:
    6351
    6452<pre>
    65 [table id='table0'
    66        csv='#popdata'
    67        debug='false']
     53[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']
    6854</pre>
     55
     56Pie chart:
     57
     58<pre>
     59[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']
     60</pre>
     61
     62Donut chart:
     63
     64<pre>
     65[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']
     66</pre>
     67
     68Line chart:
     69
     70For a line charts you need some data with <code>integer</code>, <code>float</code> or <code>date</code> values as category:
     71
     72[csv id='aapl']Date,Open,High,Low,Close,Volume,Adj Close
     732013-04-01,441.90,443.70,426.40,429.79,16407200,429.79
     742013-03-25,464.69,469.95,441.62,442.66,14002700,442.66
     752013-03-18,441.45,462.10,441.20,461.91,15840700,461.91
     762013-03-11,429.75,444.23,425.14,443.66,16382300,443.66
     772013-03-04,427.80,435.43,419.00,431.72,18152800,431.72
     782013-02-25,453.85,455.12,429.98,430.47,16688500,430.47
     792013-02-19,461.10,462.73,442.82,450.81,15088600,450.81
     802013-02-11,476.50,484.94,459.92,460.16,16776900,460.16
     812013-02-04,453.91,478.81,442.00,474.98,21299300,474.98[/csv]
     82
     83To display the close prize as a line chart:
     84
     85<pre>
     86[chart csv='#aapl' type='line' category='Date' value='Close' format='yyyy-mm-dd, float' title='Apple close prize...' description='Apple close prize...']
     87</pre>
     88
     89You can also load the csv data remotly. Just enter the url of the csv in the 'csv' attribute:
     90
     91<pre>
     92[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"]
     93</pre>
     94
     95The same for Apple would be:
     96
     97<pre>
     98[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"]
     99</pre>
     100
     101If you want smooth lines use the <code>interplolate</code> attribute:
     102
     103<pre>
     104[chart csv='https://www.ipublia.com/wp-content/uploads/Weather-ZH.csv' type='line' category='Date' value='Temperature' format='yyyy-mm-dd, float' title='Average temperature in Zürich in degree celsius...' description='Average temperature in Zürich in degree celsius...' color="DarkOrange" interpolate="cardinal"]
     105</pre>
     106
     107To define a table view just reference the csv with a 'table' shortcode (don't forget the '#'). Example:
     108
     109<pre>
     110[table csv='#data']
     111</pre>
     112
     113The <code>chart</code> shortcode has more attributes than shown here. Please refer to our [IPU-Chart User Guide](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/ "IPU-Chart User Guide").
     114
     115Please visit our [IPU-Chart Support Forum](https://www.ipublia.com/support/forums/ "IPU-Chart Support Forum") for questions about the plugin or if you encounter a problem with it.
    69116
    70117= Further Reading =
    71118
    72 * The [IPU-Chart for WordPress User Guide](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/ "IPU-Chart User Guide") describes the plugin in details.
    73 * The product page [IPU-Chart SVG Chart Library](https://www.ipublia.com/products/ipu-chart-svg-chart-library/ "IPU-Chart Product Page") describes and shows the newest features of IPU-Chart.
     119* The [IPU-Chart for WordPress User Guide](https://www.ipublia.com/support/docs/ipu-chart-for-wordpress-user-guide/ "IPU-Chart User Guide").
     120* The [IPU-Chart Support Forum](https://www.ipublia.com/support/forums/ "IPU-Chart Support Forum").
     121* The [IPU-Chart Product Page](https://www.ipublia.com/products/ipu-chart-svg-chart-library/ "IPU-Chart Product Page").
    74122
    75123Enjoy!
    … …  
    84132For questions or issues with IPU-Chart please use this support channels:
    85133
    86 1. [Docs](https://www.ipublia.com/ipu-chart/)
     1341. [Documentation](https://www.ipublia.com/ipu-chart/)
    871351. [FAQ](https://www.ipublia.com/support/faq/)
    88 1. [Support Forum](http://wordpress.org/support/plugin/ipu-chart)
    89 
    90 [Support](https://www.ipublia.com/support/)
     1361. [Support Forum](https://www.ipublia.com/support/forums/)
    91137
    92138== Screenshots ==
    … …  
    119165* Enhanced error handling when loading csv data
    120166
     167= 0.3.1 =
     168* Labels for x- and y-axis added.
     169* Some bugs fixes.
     170
    121171== Upgrade Notice ==
    122172
    … …  
    126176= 0.3 =
    127177This version adds support for donut charts. Line chars can be interpolated. Bar charts can be animated (click or tap the bar charts to start the animation).
     178
     179= 0.3.1 =
     180This version adds labels for x- and y-axis and some bug fixes.
     181
Note: See TracChangeset for help on using the changeset viewer.