Jump to content
JChartFX Community
  • 0

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


Question

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! 

Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...