• View
• Edit
• History
• Attach
• Print
• Backlinks

MarkupOnlyBarCharts

Questions answered by this recipe

I'd like to visualize some data in a bar chart. I'd also like to edit/amend the data from my browser later on. How can I achieve this without making any changes on my PmWiki server?

Description

This recipe helps to create simple bar charts, using only core PmWiki features (such as WikiStyles and include directives). No changes to your PmWiki server are necessary (at least in a relatively recent standard installation). The chart markup can be created either manually in your browser or in a spreadsheet template on your local computer.

Method 1: Using a Spreadsheet Template

Note: I've successfully tested the following template in LibreOffice, Apache Open Office, [(approve links) edit diff] and Google Docs. Some versions of MS Excel seem to render the .ods file unusable though (variable fields are converted to static fields).

• download MarkupOnlyBarChartTemplate.odsΔ and open it in your favourite spreadsheet software
• paste the labels (titles) and values for your chart into the blue columns labeled "Raw Data"
• find a good scale (number of pixels per unit) for your values and paste it into the field marked Scale
• copy the contents of the yellow fields (except for the superfluous lines at the bottom which don't represent any actual bars) into your wiki page and click Save
• a bar char chart should now appear in your wiki page

Customizations (optional):

• If the labels or the bars representing negative values are too long or too short, please adjust the value of the (:leftspace: :) page text variable at the beginning of the markup until everything fits (this value can also be changed directly in your spreadsheet before copying and pasting the markup)
• you can also change the color of the bars by modifying (:barcolor: :) or the corresponding field in your spreadsheet

Method 2: Manual Configuration

See an example of the finished markup at StefCTDemo.GDPBarChart?action=source.

Step by step instructions: First, copy and paste the follwing markup into the wiki page in which you'd like to include your chart:

(:comment Include your chart data here:)
(:include {$FullName}#barchart bartitle='2014' barvalue='2,4' barlength='48px' :)
(:include {$FullName}#barchart bartitle='2015' barvalue='2,6' barlength='52px' :)
(:comment End of chart data:)
(:if false:)
[[#barchart]]
(:leftspace: 10em:)
(:barcolor: navy:)
(:if2 equal "{(substr {$$barlength} 0 1)}" "-":)
(:div1 style="width:{$:leftspace};float:left;margin:0px;":)
%lframe background-color=transparent border=none height=1.2em padding=0px%{$$bartitle}%%
>>rframe width={(substr {$$barlength} 1)} background-color={$:barcolor} border=none height=0.6em margin-top=0.2em margin-bottom=0.2em<<
>><<
(:div1end:)
(:else2:)
(:div1 style="width:{$:leftspace};float:left;margin:0px;":)
%lframe background-color=transparent border=none height=1.2em padding=0px%{$$bartitle}%%
(:div1end:)
(:div1 style="float:left;margin:0px;":)
>>lframe width={$$barlength} background-color={$:barcolor} border=none height=0.6em margin-top=0.2em margin-bottom=0.2em<<
>><<
(:div1end:)
(:if2end:)
(:div1 style="float:left;margin:0px;width:5em;":)
%lframe background-color=transparent border=none height=1.2em padding=0px%&nbsp;{$$barvalue}%%
(:div1end:)
[[<<]]
[[#barchartend]]
(:ifend:) 

Now find a good scale (number of pixels per unit) for all the values you're planning to display. For each bar, create a separate include directive like the following. Those should replace the two sample include directives at the top of the code block.

After clicking "Save", your bar chart should appear in your wiki page. If the labels or the bars representing negative values seem to be too long or too short, please adjust the value of the (:leftspace: :) page text variable at the beginning of the markup until everything fits. You can also change the color of the bars by modifying (:barcolor: :).

Change log / Release notes

• 2014-02-27: Initial Release

Contributors

StefCT

Comments

See discussion at MarkupOnlyBarCharts-Talk?