Stacked Bar Chart

perryworld · August 26, 2015

Hi

We are trying to create a stacked bar chart but we keep getting No Data Available.

We did have the example working but when we retrieved data from our database the chart doesn't display.

Here is the code

<head>

</head>

<body>

<tr>

</tr>

</table>

jQuery.noConflict();

jQuery(document).ready(function() {

CreateUserPoints();

});

jQuery("#refresh1").click(function() {

CreateUserPoints();

});

function CreateUserPoints()

{

chartuserpoints = new cfx.Chart();

chartuserpoints.setGallery(cfx.Gallery.Bar);

chartuserpoints.getAllSeries().setStackedStyle(cfx.Stacked.Normal);

var titles = chartuserpoints.getTitles();

var title = new cfx.TitleDockable();

title.setText("User Points");

titles.add(title);

chartuserpoints.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency);

var startdate = jQuery('#startdate').val();

var enddate = jQuery('#enddate').val();

jQuery.ajax({

type: "POST",

dataType: "json",

data:{startdate : startdate, enddate : enddate},

url: "/reports/StackedBarData.php",

success: function(data) {

chartuserpoints.setDataSource(data);

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

jQuery("#ChartDivUserPoints").html("");

chartuserpoints.create(divHolder);

} ,

error: function (xhr, ajaxOptions, thrownError) {

alert(xhr.status);

alert(thrownError);

}

});

}

</script>

The data from the database is as follows:

[{ "username" : "Jill", "posts" : "106", "friends" : "", "status" : "", "polls" : ""},{ "username" : "Carly", "posts" : "93", "friends" : "", "status" : "", "polls" : ""},{ "username" : "Chris", "posts" : "11", "friends" : "", "status" : "", "polls" : ""}]

Any help would really be appreciated

Thanks

Rich

JuanC · August 26, 2015

The problem is that the chart does not assume strings can be plotted as numbers, and your posts field is being returned as a string

1) Solution 1

Change the page/process that generates the JSON so that it looks like this (note that the numbers should have no quotes)

[{ "username" : "Jill", "posts" : 106, "friends" : "", "status" : "", "polls" : ""},{ "username" : "Carly", "posts" : 93, "friends" : "", "status" : "", "polls" : ""},{ "username" : "Chris", "posts" : 11, "friends" : "", "status" : "", "polls" : ""}]

2) Solution 2

Manually tell us which fields should be used as values to be plotted

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("posts");

field2.setUsage(cfx.FieldUsage.Value);

fields.add(field2);

Regards,

JuanC

perryworld · August 27, 2015

The problem is that the chart does not assume strings can be plotted as numbers, and your posts field is being returned as a string

1) Solution 1

Change the page/process that generates the JSON so that it looks like this (note that the numbers should have no quotes)

[{ "username" : "Jill", "posts" : 106, "friends" : "", "status" : "", "polls" : ""},{ "username" : "Carly", "posts" : 93, "friends" : "", "status" : "", "polls" : ""},{ "username" : "Chris", "posts" : 11, "friends" : "", "status" : "", "polls" : ""}]

2) Solution 2

Manually tell us which fields should be used as values to be plotted

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("posts");

field2.setUsage(cfx.FieldUsage.Value);

fields.add(field2);

Regards,

JuanC

Hi JuanC

That fixed the problem,

Many thanks for your help.

Cheers

Richard

Sign In

Stacked Bar Chart

Question

perryworld

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

JuanC

Link to comment

Share on other sites

perryworld

Link to comment

Share on other sites

Join the conversation

Browse

Activity