Jump to content
JChartFX Community
  • 0

Curved area chart between high/low values


Groover

Question

1 answer to this question

Recommended Posts

  • 0

If you only had 2 series in your chart, the easiest way would be to use the CurveArea or Area gallery making sure you pass one of the series as the FromValue as follows   

    var items = [{"Low":40, "High":60},{"Low":44, "High":58},{"Low":35, "High":54}];

    var fields = chart1.getDataSourceSettings().getFields();

    var field1 = new cfx.FieldMap();

    field1.setName("Low");

    field1.setUsage(cfx.FieldUsage.FromValue);

    fields.add(field1);

    var field2 = new cfx.FieldMap();

    field2.setName("High");

    field2.setUsage(cfx.FieldUsage.Value);

    fields.add(field2);

    chart1.setDataSource(items);

    chart1.setGallery(cfx.Gallery.Area);

 

Unfortunately this approach might not work when combining with other galleries so you might have to use a separate gallery type (script) called HighLow, the main difference between Area and HighLow is that HighLow is designed to allow "crossing" of the 2 values and the area will be painted with the "winner" color. A drawback of this approach is that currently highlow will not smooth out the values but instead connect the values with straight lines.

    var items = [{"Low":40, "High":60, "Middle":50},{"Low":44, "High":58, "Middle":45},{"Low":35, "High":54, "Middle":40}];

    chart1.setGallery(cfx.Gallery.Lines);

    var fields = chart1.getDataSourceSettings().getFields();

    var field1 = new cfx.FieldMap();

    field1.setName("Middle");

    field1.setUsage(cfx.FieldUsage.Value);

    fields.add(field1);

    var field2 = new cfx.FieldMap();

    field2.setName("Low");

    field2.setUsage(cfx.FieldUsage.Value);

    fields.add(field2);

    var field3 = new cfx.FieldMap();

    field3.setName("High");

    field3.setUsage(cfx.FieldUsage.Value);

    fields.add(field3);    

    chart1.setDataSource(items);

    

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

    chart1.getSeries().getItem(1).setGalleryAttributes(highLow);

    chart1.getSeries().getItem(2).setGalleryAttributes(highLow);

 

JuanC 

 

 

Link to comment
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...