Series with Only Data Points in Line Chart

Follow

Jason Sears

April 24, 2018 13:17

To change a series within a line chart to display only the markers (data points), you can use the following code within a line chart's widget script. Just manipulate the series variable to correspond with your desired series.

Tested in v7.0.2 (may not work as expected in previous versions).

widget.on('processresult', function(widget, args) {

    var series = args.result.series[1];

    

    series.lineWidth = 0.001;

    series.states = {

        hover: {

            enabled: false

        }

    };

    

    $.each(series.data, function(idx, el) {

        el.marker.enabled = true;

    });

});

 

0

• Official comment

  

  Camille Desrochers April 21, 2020 16:20

  This script does not work with 2 categories, but a data modeling workaround can be used to group 2 categories into a single category.

   

  Before - using 2 Categories fields:

  

   

  After - using a single Categories field of concatenated fields:

  

   

  Create a custom column that is a concatenation of the 2 fields that you want to use as categories:

   

  Custom column: [Condition] + '-'+[Gender] 

  

   

  Build schema changes.

  Replace the 2 category fields in the widget with this new single multi categories concatenated field.

   

  Put the following script in the widget script:

  
  widget.on('render', function(sender, se){
  
  var s = sender.queryResult.series[2];
  
  // Change series to a line, enable the marker and hide the line
  s.type = "line";
  s.lineWidth = 0.01;
  s.marker = {
  enabled: true,
  radius: 6
  };
  
  // When hovered state to disabled and lineWidth to 0
  sender.queryResult.plotOptions.series.states.hover.lineWidth = 0;
  sender.queryResult.plotOptions.series.states.hover.lineWidthPlus = 0;
  // Change the hover fillColor
  sender.queryResult.plotOptions.series.marker.states.hover.fillColor = 'white';
  
  })

  Comment actions Permalink
• 

  Crystal Patry September 18, 2018 15:15

  how do i modify this if i want all series to be affected?

  0

  Comment actions Permalink
• 

  Jason Sears September 18, 2018 15:18

  Hi Crystal,

  You would need to iterate through each series within args.result.series and perform the remaining operations for each series object within the array.

  0

  Comment actions Permalink
• 

  Jonathan Sambucci April 15, 2020 17:23

  Hey All, 

  We are trying to populate the index labels with a plot point. Any advice on how we can set that up? We are using two categories and the script is completely hiding the points.

  Thanks

   

  

  1

  Comment actions Permalink
• 

  Camille Desrochers April 21, 2020 16:22

  Jonathan Sambucci have a look at the workaround for 2 categories posted in the official comments on this post

  0

  Comment actions Permalink

Please sign in to leave a comment.