High/Low chart - TypeError: b.bG is not a constructor ??

[Groover]

Hi,

Dont know why this error is happening when creating a High/Low chart combined with a barchart.

TypeError: b.bG is not a constructor

 

JSON

[

{

"DATE": "2013-10-30",

"HIGH": 523,

"LOW": 110,

"COMPLETED": 8

}

,{

"DATE": "2013-10-31",

"HIGH": 429,

"LOW": 143,

"COMPLETED": 16392

}

] 

 

HIGH/LOW should go into the HIGH/LOW chart and the COMPLETED into the bar chart below.

 

Parts of the code:

var chart1 = new cfx.Chart();

chart1.setGallery(cfx.Gallery.HighLowClose);

chart1.getAnimations().getLoad().setEnabled(true);

chart1.getLegendBox().setVisible(true);

chart1.getAxisX().setLabelAngle(45);

    var panes = chart1.getPanes();

    var pane1 = new cfx.Pane();

    var pane0 = panes.getItem(0);

    panes.add(pane1);

    pane0.setProportion(3);

pane0.getTitle().setText("Elapsed");

chart1.getAxisY().getTitle().setText("(ms)");

    pane1.setProportion(1);

    pane1.setSeparation(20);

    pane1.getTitle().setText("Volume");

chart1.setDataSource(items);

var seriesList = chart1.getSeries();

var i =0;

while (seriesList.getItem(i)!==undefined&&i<50) { // &&i<50 just to prevent indefinite loop

        i++;

}

    var series = seriesList.getItem(i-1);

    series.setPane(pane1);

    series.setGallery(cfx.Gallery.Bar);

doTitle(chart1, title,process_,shortprocess); 

var chartDiv = document.createElement("div");

var width = $( window ).width() -20;

chartDiv.style.cssText = 'width:'+width+'px;height:600px;display:inline-block;overflow: visible;';

$(chartDiv).appendTo(divHolder);

document.body.appendChild(divHolder)

chart1.create(chartDiv);

$(divHolder).dialog({

height:'600', 

width: width,

dialogClass:'transparent',

draggable: false,

close: function() {

$( divHolder ).remove();

},

open: function(){

$(divHolder).parent().find( 'span.ui-dialog-title' ).remove();

$(divHolder).parent().addClass('chartDialogZIndex');

}

}).parent().draggable(); 

 

This will trigger the error and no chart is created:

chart1.setGallery(cfx.Gallery.HighLowClose);

 

This will create a bar chart instead of a High/Low chart, why?

chart1.setGallery(cfx.Gallery.HighLow); 

 

Thanks for any help in solving this issue! 

[JuanC]

Certain galleries such as Bar, Line, Area, Curve, Pie, Step, Doughnut are built-in into our core script, as such they are declared as an enumeration that you set using the Gallery property and do not require any additional scripts (other than coreVector or coreBasic), e.g.

chart1.setGallery(cfx.Gallery.Area);

Other galleries are also built-in from an API point of view but were separated to keep our scripts as small as possible including Pyramid, Radar, Pareto, HighLowClose, OpenHighLowClose and surface. You still use the enumeration to use these galleries but you have to make sure you include the script for the specific gallery, e.g.

<script type="text/javascript" src="jchartfx.pyramid.js"></script>

chart1.setGallery(cfx.Gallery.Pyramid);

Finally, other galleries are built as extensions, these are Bullet, Density, Equalizer, Funnel, HeatMap, HighLow, Rose and TreeMap. To use any of these galleries you have to include an extra script,  create a new object and assign using the GalleryAttributes property, e.g. In a chart with 2 series  

<script type="text/javascript" src="jchartfx.highlow.js"></script>

var highlow = new cfx.highlow.HighLow();

chart1.setGalleryAttributes(highlow);

To create the chart you are looking for that combines Bar and HighLow (note that this HighLow gallery is not related to the financial HighLowClose) you will need code like this.

var items = [{"DATE": "2013-10-30", "HIGH": 523, "LOW": 110, "COMPLETED": 8},{"DATE": "2013-10-31","HIGH": 429,"LOW": 143, "COMPLETED": 16}, {"DATE": "2013-11-01", "HIGH": 520, "LOW": 114, "COMPLETED": 13}];

chart1.setDataSource(items);

var highlow = new cfx.highlow.HighLow();

chart1.setGalleryAttributes(highlow);

var panes = chart1.getPanes();

var pane1 = new cfx.Pane();

panes.add(pane1);

var lastSeries = chart1.getSeries().getItem(2);

lastSeries.setGallery(cfx.Gallery.Bar);

lastSeries.setPane(pane1);

 

Hope this helps.

JuanC