Jump to content
JChartFX Community
  • 0

Stacked Bar Chart

perryworld

Asked by perryworld,

 Share
[[Template core/front/global/follow is throwing an error. This theme may be out of date. Run the support tool in the AdminCP to restore the default theme.]]

Question

perryworld Newbie

perryworld

Posted
Posted

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>
<link rel="stylesheet" type="text/css" href="/jChartFX/styles/jchartfx.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript" src="/jChartFX/js/jchartfx.system.js"></script>
<script type="text/javascript" src="/jChartFX/js/jchartfx.coreVector.js"></script> 
<script type="text/javascript" src="/jChartFX/js/jchartfx.advanced.js"></script>
</head>
 
<body>
<input type="text" id="startdate" readonly><input type="text" id="enddate">
<input type="button" id="refresh1" value="Refresh">
 
<table width="100%">
<tr>
<td><div id="ChartDivUserPoints" style="width:600px;height:300px"></div></td>
</tr>
</table>
 
<script type="text/javascript" language="javascript">
 
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
 
 
 
 

 

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
JuanC Newbie

JuanC

Posted
Posted

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
Link to comment
Share on other sites
  • 0
perryworld Newbie

perryworld

Posted
  • Author
Posted

 

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

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
[[Template core/front/global/follow is throwing an error. This theme may be out of date. Run the support tool in the AdminCP to restore the default theme.]]
Go to question listing
×
×
  • Create New...