Icons Legend

Shows how you can show images in place of the legend item markers.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />

JavaScript

// Browser icons from the collection:
// https://www.iconfinder.com/iconsets/logotypes
// by Zlatko Najdenovski
// License: Creative Commons (Attribution 3.0 Unported)

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    var baseUrl =
        "https://cdn1.iconfinder.com/data/icons/logotypes/32/";

    var iconUrlByCity = {
      "London": baseUrl + "internet-explorer-16.png",
      "Paris":  baseUrl + "chrome-16.png",
      "Lisbon": baseUrl + "firefox-16.png"
    };

    new pvc.BarChart({
        canvas: "cccExample",
        width:  500,
        height: 400,
        crosstabMode: false,
        selectable: true,
        hoverable:  false,

        legend: true,
        legendPosition:    "top",
        legendItemPadding: 10,

        // Hides the marker
        legendDot_visible: false,

        //legendLabel_visible: false,

        // If you hide the label,
        // adding the Image to the legendPanel
        // might be better.
        //legendPanel_call

        // Add an image centered in where the 
        // marker and ruler(for lines) usually are.
        legendMarkerPanel_call: function() {
        		console.log(this);
            this.add(pv.Image)
              .url(function(itemScene) {
                  return iconUrlByCity[itemScene.getValue()]; 
              })
              .width(16)
              .height(16)
              .events("all")
              .cursor("hand");
        }

        // You may also color the legend labels with the bar colors
        // (there's a fiddle showing how)
    })
    .setData(relational_04)
    .render();
});