perryworld 1 Posted August 26, 2015 Report Share Posted 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> <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 Quote Link to post Share on other sites
0 Solution JuanC 3 Posted August 26, 2015 Solution Report Share Posted 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 Quote Link to post Share on other sites
0 perryworld 1 Posted August 27, 2015 Author Report Share Posted 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 Quote Link to post Share on other sites
Question
perryworld 1
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
Link to post
Share on other sites
2 answers to this question
Recommended Posts
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.