Custom marker shapes and images were supported for Rating Gauge, LED Gauge, Legend, and Picto Chart starting with 2.0.0. In 2.0.1 support was expanded to Chart, Diagram, NBox, and Thematic Map. Here we'll explore how they can be used in charts.

 

Charts (and other data visualizations) have several built-in marker shapes to choose from, which come with default color and selection effects. SVG path commands can now be passed into the markerShape attribute on the series to specify different shapes that can also be styled using the default styling and selection effects used for the built-in markers. This is recommended for simple and single-color shapes, since it easily integrates them into the chart's look and feel.

 

On the other hand, if the image is multi-color, it can be specified using the source attribute on series. This doesn't have the default selection effects, so if using selection, the additional attributes: sourceSelected, sourceHover and sourceHoverSelected need to be set to specify the images for the selected and hover states.

 

Custom Shape Marker Example:

 

Custom Shape Marker.png

To use custom shapes, pass in SVG path commands to the markerShape attribute for the series or series item. Legend items also accept the markerShape attribute in order to customize the legend. Here is an example of the variables defined in the JavaScript layer which are used to produce the example above:

 

function ChartModel() {
        var car = 'M -53.582954,-415.35856 c -13.726061,-0.48561 -25.554278,3.95581 -32.848561,19.90697 l -26.336555,65.94442 c -19.18907,
                   5.29042 -27.54259,19.22853 -27.98516,30.66415 l 0,86.34597 25.30617,0 0,29.05676 c -1.22633,27.69243 44.157018,28.76272
                   45.171926,-0.28851 l 0.535799,-28.52096 164.160378,0 0.535798,28.52096 c 1.014898,29.05121 46.439469,27.98094 45.213139,
                   0.28851 l 0,-29.05676 25.26495,0 0,-86.34597 c -0.44257,-11.43562 -8.79607,-25.37375 -27.98516,-30.66415 l -26.33655,
                   -65.94442 c -7.29428,-15.95113 -19.122506,-20.39255 -32.848559,-19.90697 l -131.847615,0 z';
        var bike = 'M625.001 150l-25 50 100 37.5l0 112.5l-350 0l0 -50l50 0l0 -24.998c0 -12.305 -12.696 -25 -25 -25l-125 -.001c-25 0 -25 25 -25 25l0
                    25l75 0l0 50l-53.125 106.25c-14.984 -3.6 -30.792 -6.25 -46.876 -6.25 -110.458 0 -200 89.545 -200 200s89.543 200 200 200 200
                   -89.545 200 -200c0 0 50 .001 75 .001s25 -25.001 25 -25.001c5.136 -73.53 43.018 -131.201 92.188 -168.751 33.996 -25.96 70.637
                   -41.98 107.813 -49.999l0 51.563c-86.215 22.23 -150 99.028 -150 192.188 0 110.455 89.543 200 200 200s200 -89.545 200 -200c0
                   -91.415 -61.554 -166.76 -145.313 -190.626l-54.688 -109.375l0 -125c0 -14.495 -11.626 -30.618 -25 -35.938zm-275 250.001l225
                    0c-50 25.001 -125 150.001 -125 200.002l-57.812 -.001c-12.642 -49.02 -41.498 -90.298 -82.812 -117.187zm-150 125c69.036 0 125
                    55.964 125 125s-55.964 125 -125 125 -125 -55.964 -125 -125 55.964 -125 125 -125zm550 0c69.036 0 125 55.964 125 125s-55.964 125
                   -125 125 -125 -55.964 -125 -125 55.964 -125 125 -125z';

        this.series = [
          {name: 'Germany',
            items: [
              {x: 8.61, y: 6300, categories: ['Germany', 'Vehicles'], markerShape: car},
              {x: 8.61, y: 292, categories: ['Germany', 'Bikes'], markerShape: bike}]},
          {name: 'Italy',
            items: [
              {x: 8.61, y: 7000, categories: ['Italy', 'Vehicles'], markerShape: car},
              {x: 8.61, y: 73, categories: ['Italy', 'Bikes'], markerShape: bike}]},
          {name: 'Netherlands',
            items: [
              {x: 8.89, y: 6000, categories: ['Netherlands', 'Vehicles'], markerShape: car},
              {x: 8.89, y: 1095, categories: ['Netherlands', 'Bikes'], markerShape: bike}]},
          {name: 'Norway',
            items: [
              {x: 10.08, y: 5700, categories: ['Norway', 'Vehicles'], markerShape: car},
              {x: 10.08, y: 146, categories: ['Norway', 'Bikes'], markerShape: bike}]},
        ];
        this.legend = {position: 'end', symbolWidth: 18, sections: [{title: 'Mode of transportation',
                       items: [{text: 'Vehicles', id: 'Vehicles', markerShape: car},
                               {text: 'Bikes', id: 'Bikes', markerShape: bike}]}]}
        this.groups = ['Vehicles', 'Bikes'];
    }
    

 

Custom Image Marker Example:

Custom Image Marker.png

In order to define markers with custom images, simply define the source attribute for each marker and the color attribute which will define the tooltip color to be used. Here is an example of the variables defined in the JavaScript layer which is used to produce the example above:

this.series = [{name: 'Grapes',  color: '#A75DBA', source: "css/samples/cookbook/images/dvt/grapes-icon.png",
  items: [
     {x: 2106.1, y: 1206.0}]},
  {name: 'Strawberries', color: '#ED6647', source: "css/samples/cookbook/images/dvt/strawberry-icon.png",
   items: [
     {x: 2454.3, y: 355.9}]}
]
    

 

For further information and complete demos click on one of the links below.

Custom Image Markers Demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=chart&demo=customMarkers

Custom Shape Markers Demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=chart&demo=customImages