Data Markers

  • In conventional charts we use bars and lines to represent data points. From the 4.4 version, Vitara charts will allow users to use markers to represent the data points.
  • You can select the data markers from the set of markers listed in the markers menu or you can upload customized markers.
  • The data markers feature is available in the bar, column, line, area, sparkline, grid and micro charts.

    The following section will explain how to show a marker on the bar chart instead of bars.

    In the vitara bar chart click on ‘Edit’ button to open the properties window.
    dataMarkers1
    In the properties window open the ‘Series’ menu. Click on ‘Edit’ for the series on which you want to show the data markers.
    dataMarkers2
    Expnad the ‘Type’ drop down box, and select the option ‘Data Markers’. When we select the option ‘Data Markers’, the series window will display all the options related to data markers.
    dataMarkers3
    In the below screenshot the basic properties of the data markers like marker selection, marker color and marker size are highlighted.
    dataMarkers4

    Marker Type, Marker Size and Marker Color

    Click on the marker icon to open the marker selection window. Please refer to the below screenshot.
    dataMarkers5
    After selecting the desired marker close the marker selection window. Select the size of the marker and color.
    dataMarkers6
    Below is the screenshot of bar chart in which the bars are replaced with marker.
    dataMarkers7

    Keep aspect ratio

    When we enable data markers, one marker will be displayed for each data point . The position of the data marker will depend on the value of the data point. If we disable the Keep aspect ratio property, the data marker will be streched to fill the gap from the axis origin, i.e. 0, to the value of the data point.
    dataMarkers8

    Below is the screenshot of how the data markers looks when we disable Keep Aspect ratio property.
    dataMarkers9

    Repeat Marker

    In the normal mode, for each data point one data marker will be displayed. Using Repeat Marker property the data markers will from a bar/column shape filled with marker. Inside each bar the marker will be filled with some predefined number of rows.
    dataMarkers10

    Enable the check box Repeat Marker.

    dataMarkers11

    Select nummber of units per row. Click on apply.
    dataMarkers12
    dataMarkers121

Fill

If we choose fill mode, the data markers will be filled with a color depending on the value we set as Maximum value (while the marker size remains the same for all data points).

dataMarkers13

dataMarkers14

dataMarkers16

dataMarkers15

Data markers as scatter chart

Prior to 4.4 version we can implement the scatter chart using the options in the series tab. In the 4.4 release we removed the “Scatter” option from the “Series” tab. Now we can use “Data Markers” option to implement the scatter charts. In the 4.4 version, the series-type drop down box will look as shown below.
dataMarkers17

Below are the steps to implement the scatter chart using the Vitara charts 4.4 version.
Step 1: Use a Vitara Bar/column chart.

Step 2: In the “Appearance” tab, enable the option “Overlay Bar/Column”.
dataMarkers18

Step 3: Open the “Series” tab and for the metric which you want to show as a simple tick, click on ‘Edit’.
dataMarkers19

Step 4: Select the series type as “Data Markers”.
dataMarkers20

Step 5: When we select the option ‘Data Markers’, the series window will display all the options related to data markers.
dataMarkers21

Step 6: Click on “Apply” button.
dataMarkers22

Custom SVG Markers

From the 4.5 version of vitara charts, a new feature is added so that users can choose the data markers according to their choice. That means the user can upload a local svg file to the server and use it as a data marker in Vitara charts.
These custom svg markers can be applied from markers tab and thresholds tab.

This feature is supported in the below charts.
Area, Bar, Bubble, Bullet, Column, Dumbbell, Histogram, Line, Simple KPI, Slope, Sparkline, Tornado, Trellis, and Waffle.

Lets see how to use custom markers in the below steps. For better understanding of the process, we will consider the custom svg file as ‘car.svg’ in this example

Step 1:
Upload an svg file [car.svg in this case] into the server to this path in the plugins folder. {VitaraCharts/custom/images/}

Step 2:
Create any chart [line chart for example] that supports custom svg markers. Go to the marker tab, enable marker and click the ‘marker type’ icon, then the marker selection window will be opened. See the screenshot below.
CustomSVG

Step 3:
Go to the Custom tab. Enter the name of the file in the SVG path textbox [e.g, car.svg(name is case sensitive)] and click on ‘Apply’ and close the marked selection window. See the screenshot below
CustomSVG

Then the custom svg marker[car] gets applied on the chart. see screenshot below
CustomSVG

In this way, the custom markers can be applied from the Series tab and Thresholds tab as well.