Friday, November 24, 2017

Chart background graphics: SVG

We are excited to announce SVG background support. This means that chart authors now can use vector or raster graphics for chart backgrounds. The following example shows gender symbols and generation names behind the population pyramid chart:



This chart uses data from this spreadsheet. Import settings are as follows:






After the data is imported, I used the following SVG content as background:


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" preserveAspectRatio="none" viewBox="0 0 760 590">
 <g id="female" transform="scale(0.4,0.4) translate(1700,0)" opacity="0.7">
  <path fill="#ff007f" d="m97.633598,79.828003c17.902405,0 32.415413,-14.511002 32.415413,-32.414001c0,-17.900002 -14.513008,-32.414001 -32.415413,-32.414001c-17.899002,0 -32.413002,14.514 -32.413002,32.414001c0,17.903 14.514,32.414001 32.413002,32.414001z" id="path1591"/>
  <path d="m93.042,263.497833l0.012428,108.849213c0,19.583954 -29.227676,19.583954 -29.227676,0l-0.012432,-108.849213l-38.731819,0l41.442776,-144.328766l-6.513958,0l-24.406277,82.445465c-5.809202,17.982651 -30.401011,10.59549 -24.774462,-8.660126l27.098139,-89.570564c2.905071,-10.214363 15.772331,-28.322784 38.045235,-28.322784l20.537308,0l0,0l22.104027,0c22.074013,0 34.999596,18.261055 38.33976,28.322784l27.109604,89.483208c5.421921,19.245041 -18.976715,27.215912 -24.785934,8.456619l-24.397659,-82.154602l-7.053291,0l41.887444,144.328766l-38.901062,0l0,108.993225c0,19.439941 -29.105675,19.342957 -29.105675,0l0,-108.993225l-8.666473,0z" id="path1595" fill="#ff007f"/>
 </g>
 <g id="male" transform="scale(0.4,0.4) translate(-200,0)" opacity="0.7">
   <path d="m254.400421,75.940079c-20.842255,0 -37.604355,17.87822 -37.604355,40.177902l0,95.043503c0,18.478043 25.711075,18.478043 25.711075,0l0,-86.907471l6.086899,0l0,240.808762c0,24.705597 34.238785,23.97879 34.238785,0l0,-140.978989l5.896851,0l0,140.978989c0,23.97879 34.426086,24.705597 34.426086,0l0,-240.808762l5.944336,0l0,86.907471c0,18.621124 25.577667,18.620178 25.531067,0l0,-94.474945c0,-20.562752 -15.182098,-40.703819 -38.065826,-40.703819l-62.164917,-0.042641z" id="path1599" fill="#0000ff"/>
   <path fill="#0000ff" d="m284.134003,80.828003c17.901001,0 32.414001,-14.511002 32.414001,-32.414001c0,-17.900002 -14.513,-32.414001 -32.414001,-32.414001c-17.899994,0 -32.414001,14.514 -32.414001,32.414001c0,17.903 14.514008,32.414001 32.414001,32.414001z" id="path1603"/>
  </g>
  <g fill="#c0c0c0" font-family="Verdana" font-size="42px" text-anchor="middle">
    <text x="380" y="80" >G.I. Generation</text>
    <text x="380" y="180" >Silent Generation</text>
    <text x="380" y="280" >Baby Boomers</text>
    <text x="380" y="350" >Generation X</text>
    <text x="380" y="480" >Millenials</text>
  </g>
</svg>

I simply pasted it into the "Background SVG content" field:


One thing worth mentioning here is the viewBox attribute: viewBox="0 0 760 590". Why 760x590, you may ask?

As you can guess from the screenshot above, I picked the "Grid area only" option for the background, which tells about my intent to draw the background for the grid area only, leaving alone other areas like chart title/subtitle and category radio buttons. Before I started working on the background SVG, I have made a screenshot of the chart and measured the grid area - from the top of the "100+" bars to the bottom axis. It turned out to be (approximately) 760x590, so I used these dimensions for my SVG content.

If I wanted to create a background for the whole chart, I would create SVG content of size 800x800, which is the size of the chart.

One of the best things about this SVG background feature is the ability to tweak the background in the "Background SVG content" field and see the changes right away, like in a graphics editor.

Everybody is welcome to use this new feature, but please keep in mind it requires some basic knowledge of SVG format. Even if just want to use a PNG or JPG image as a background, you have to wrap it in an SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" preserveAspectRatio="none" viewBox="0 0 PUT_IMAGE_WIDTH_HERE PUT_IMAGE_HEIGHT_HERE">
  <image xlink:href="PUT_IMAGE_URL_HERE"/>
</svg> 

Now just imagine what you can do with your chart's background! Photos, other charts, watermark images, animations, icons... Enjoy.

2 comments:

  1. South Korea has been one of those of|a type of} nations the place gamblers have not had a simple experience. For occasion, no gambling home was allowed to function in the nation until 1967, when the federal government legalized on line casino gambling to boost tourism. BANGKOK, Thailand 토토사이트 – An INTERPOL-coordinated operation concentrating on illegal online gambling and financial fraud in Asia led to the arrest of some forty eight people and the seizure of computers and different electronic proof.

    ReplyDelete
  2. Internet playing and sports activities betting second are|are actually} on the peak ... Bar Games a hundred and one is an internet site|a web site} dedicated to helping you find out about the most effective video games to play with your friends. We review the video 메리트카지노 games, analysis the rules, and uncover useful ideas and methods. If the dealer has a complete of seven then they need to|they have to} stand and never draw a 3rd card. BANKER always draws on 0,1,2 until Player has a natural eight or 9.

    ReplyDelete