Newbie question about Pie Chart

[perryworld]

Hi,

We are new to using jChartFX so any help would really be appreciated.

We have followed the example for the Bar Chart and have that working fine but when we have tried the Pie Chart we get the correct legends but the Pie chart only plots one item. We have retrieved the data from our database and compared that to how the data looks in the example and it looks to be in the correct format.

This is our code :

<div id="ChartDiv" style="width:600px;height:400px"></div>

<script type="text/javascript" language="javascript">

jQuery.noConflict();

jQuery(document).ready(function() {

jQuery.ajax({  

type: "POST",  

dataType: "json",

url: "/Aircraft/DashboardDataPie.php",  

success: function(chartdata) 

{ 

chart1 = new cfx.Chart();

chart1.setDataSource(chartdata);

chart1.setGallery(cfx.Gallery.Pie);

//PopulateBrowserUsage(chart1);

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

var field1 = new cfx.FieldMap();

field1.setName("username");

field1.setUsage(cfx.FieldUsage.RowHeading);

fields.add(field1);

var field2 = new cfx.FieldMap();

field2.setName("userid");

field2.setUsage(cfx.FieldUsage.ColumnHeading);

fields.add(field2);

var fieldVal = new cfx.FieldMap();

fieldVal.setName("sightings");

fieldVal.setUsage(cfx.FieldUsage.Value);

fields.add(fieldVal);

var crosstab = new cfx.data.CrosstabDataProvider();

crosstab.setDataSource(chart1.getDataSource());

chart1.setDataSource(crosstab);

var data = chart1.getData();

data.setSeries(1);

var title = new cfx.TitleDockable();

title.visible = true;

title.setText("My chart Title");

chart1.getTitles().add(title);

var divHolder = document.getElementById('ChartDiv');

chart1.create(divHolder);

}  

});

});

And this is the data being returned from our database.

[{ "username" : "Tony15", "userid" : "Tony15", "sightings" : 1506},{ "username" : "richard", "userid" : "richard", "sightings" : 551},{ "username" : "carly", "userid" : "carly", "sightings" : 235},{ "username" : "John", "userid" : "John", "sightings" : 138},{ "username" : "flyhellas", "userid" : "flyhellas", "sightings" : 94},{ "username" : "efc123", "userid" : "efc123", "sightings" : 85}]

Any help would be great, Thanks 

Rich 

 

 

 

 

[JuanC]

You do not need to use crosstab to create this chart (I suspect you do not need crosstab for your bar chart either), the way we process your json data, we will use the first string field for the labels and each numeric field as a series in your chart, so just passing the data should be enough, e.g.

    var data = [{ "username" : "Tony15", "userid" : "Tony15", "sightings" : 1506},{ "username" : "richard", "userid" : "richard", "sightings" : 551},{ "username" : "carly", "userid" : "carly", "sightings" : 235},{ "username" : "John", "userid" : "John", "sightings" : 138},{ "username" : "flyhellas", "userid" : "flyhellas", "sightings" : 94},{ "username" : "efc123", "userid" : "efc123", "sightings" : 85}];

    chart1.setDataSource(data); 

If you want to be extra explicit (or you want to use userid instead of username as the label, or you have multiple numeric fields and want to decide which one to use) you could do this.

    var data = [{ "username" : "Tony15", "userid" : "Tony15", "sightings" : 1506},{ "username" : "richard", "userid" : "richard", "sightings" : 551},{ "username" : "carly", "userid" : "carly", "sightings" : 235},{ "username" : "John", "userid" : "John", "sightings" : 138},{ "username" : "flyhellas", "userid" : "flyhellas", "sightings" : 94},{ "username" : "efc123", "userid" : "efc123", "sightings" : 85}];

    

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

    var field1 = new cfx.FieldMap();

    field1.setName("username");

    field1.setUsage(cfx.FieldUsage.Label);

    fields.add(field1);

    var field2 = new cfx.FieldMap();

    field2.setName("sightings");

    field2.setUsage(cfx.FieldUsage.Value);

    fields.add(field2);

    

    chart1.setDataSource(data);

 

JuanC 

[perryworld]

Hi JuanC

Thanks for the reply, that works great now.

Cheers

Rich