Jump to content
JChartFX Community
  • 0

Newbie question about Pie Chart


perryworld
 Share

Question

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 

 

 

 

 

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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 

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...
 Share

×
×
  • Create New...