Negative Chart Values throwing error

[shaunvdp]

Hi All...

Thanks to the creator of this brilliant piece of software... I have come across an issue that I wanted to point out, maybe someone came up with a solution for it.

This works great:
var dataChartBar = [
{
name : 'Region 1',
labels: ['May', 'June', 'July', 'August'],
values: [26, 53, 100, 75]
}
but as soon as I insert a negative value into the array an error is thrown: 'Cannot read property 'length' of undefined' ...

var dataChartBar = [
{
name : 'Region 1',
labels: ['May', 'June', 'July', 'August'],
values: [-26, 53, 100, 75]
}

has anyone come across this and found a solution to it? your help will be greatly appreciated...

many thanks...

[gitbrent]

Hi @shaunvdp ,

This issue must be somewhere else in your code. Negative numbers work fine in charts:

var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();

var dataChartBar = [{
    name : 'Region 1',
    labels: ['May', 'June', 'July', 'August'],
    values: [-26, 53, 100, 75]
}];

slide.addChart( pptx.charts.BAR, dataChartBar, {} );

pptx.save('PptxGenJS-NegChart');

[shaunvdp]

ah... thanks so much for the quick response... I stripped the code out and it seems to be working... looks like there was an error in the additional attributes being set up... more specifically, chartColors: ['2F469C'] ...

if there are negative numbers, I am assuming that two colors need to be specified, so did so by adding chartColors: ['2F469C','2F469C'], ... and that too, broke the chart...

any help in doing this will be much appreciated...

thanks

[gitbrent]

Hi @shaunvdp ,

What an awesome twist - you turned a non-error into an actual error. Thanks! :-)

Supplying chartColors without invertedColors was causing an issue. The fix is checked in now.

var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();

var dataChartBar = [{
    name : 'Region 1',
    labels: ['May', 'June', 'July', 'August'],
    values: [-26, 53, 100, 75]
}];

slide.addChart( pptx.charts.BAR, dataChartBar, {chartColors: ['2F469C','2F469C']} );
pptx.save('PptxGenJS-NegChart');

[shaunvdp]

ah ha! thanks so much... will download the newest build. :)

[shaunvdp]

Hi... Me Again... Just tested the new release and noticed that when supplying 2 colors as per your code, the two colors get alternated between the bars (for example if I supply [red,white] the bars will be red, white, red, white, red, white... instead of one being assigned to positive and one being assigned to negative.

[gitbrent]

Use the invertedColors option to pass colors for negative numbers.

Correct, passing two colors is asking the system to use two alternating colors - just use one color if you want only 1 across all bars. There's tons of examples in examples/pptxgenjs-demo.html

var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();

var dataChartBar = [{
    name : 'Region 1',
    labels: ['May', 'June', 'July', 'August'],
    values: [-26, 53, 100, 75]
}];

slide.addChart(
  pptx.charts.BAR,
  dataChartBar,
  {
    chartColors: ['2F469C'],
    invertedColors: ['CC8800']
  }
);
pptx.save('PptxGenJS-NegChart');

[shaunvdp]

Thanks so much... I didn't and still don't see invertedColors anywhere in the documentation... thanks for pointing it out. ;)

[shaunvdp]

I actually found it is this issue: #140

but you do not mention it is any of the examples or documentation for usage...

[gitbrent]

Whoops!!

Added to README now. Thanks.