Pentaho

 View Only

 How do I extend the lines on a bar line chart to the full width?

  • Pentaho
  • Ctools
  • Pentaho
Andy Rathbone's profile image
Andy Rathbone posted 02-28-2020 09:13

Hi,

 

I have a bar chart with target lines on it but I would like the target lines to extend to the edge of the chart window.

 

Has anyone done anything like this before? or could they point me in the right direction.

 


#Ctools
#Pentaho
Duarte Cunha Leao's profile image
Duarte Cunha Leao posted 04-01-2020 18:41

Hi,

The bar/line chart is a categorical chart. The space of the horizontal axis is divided into as many parts as there are distinct categories, i.e. values of the "category" visual-role/dimension. Both bars and lines/dots are then placed horizontally centered in the corresponding categorical area/band.

 

How exactly would you want lines to extend?

  • Should all points/lines be placed at the left position of each categorical band, thus leaving the last band without data (or would need to extend to the end, in the last band)?
  • Should these be aligned to the left (in which case, for the first band, the line would need to be extended to the beginning?
  • Should dots/lines continue centered in the categorical bands and the first and last bands extend the line to the beginning and end, respectively?

 

In a time-series/continuous-category Line chart, dots and lines do show up like you describe.

 

Btw, do you know https://community.hitachivantara.com/s/article/ccc-community-chart-components-faq?

 

Cheers

Marvin Horst's profile image
Marvin Horst posted 04-15-2020 18:59

Not exactly sure what you're attempting but for what it's worth ...

 

I added horizontal lines to metric dot chart. Added this code into the pre-execution function. The line position was taken from a dashboard parameter value.

var cd = this.chartDefinition; var eps=Utils.propertiesArrayToObject(cd.extensionPoints); eps.plot_add = function() { var y0 = dashboard.getParameterValue('miscVar')[0]; var y1 = dashboard.getParameterValue('miscVar')[1]; var panel = new pv.Panel() .zOrder(-1) .def('l0', function() { var ccc = this.getContext(); var scale = ccc.chart.axes.ortho.scale; var li = ccc.panel._layoutInfo; return li.paddings.bottom + scale(y0); }); panel .def('l1', function() { var ccc = this.getContext(); var scale = ccc.chart.axes.ortho.scale; var li = ccc.panel._layoutInfo; return li.paddings.bottom + scale(y1); }); // Vertical rule panel .add(pv.Rule) .strokeStyle('#F5CFB2') .lineWidth(2) .strokeDasharray('dash') .left(0) .bottom(function() { return this.parent.l1(); }) .width (function() { return this.parent.width(); }) .height(null); panel .add(pv.Rule) .strokeStyle('#D9E3AF') .lineWidth(2) .strokeDasharray('dash') .left(0) .bottom(function() { return this.parent.l0(); }) .width (function() { return this.parent.width(); }) .height(null); return panel; }; cd.extensionPoints = Utils.objectToPropertiesArray(eps);

 

Related Content