fusioncharts / angularjs-fusioncharts

AngularJS Directive for FusionCharts JavaScript Charting Library (for Angular 1.x)
https://fusioncharts.github.io/angularjs-fusioncharts/
MIT License
111 stars 101 forks source link

Zoomline Chart does not populate if dataformat is json #3

Closed gpfleging closed 9 years ago

gpfleging commented 9 years ago

I have been unable to have a zoomline chart generate if using dataformat="json" and datasource={{dataSource}} that is populated by an angular http.get request. When attempting this method the chart displays "No data to display."

It does populate correctly if the dataformat="jsonurl" and datasource="/getdata.php?ip={{selectedIP}}"

The call used to populate method that is working is the same as the one that will not populate. This method does work to populate a cylinder so I believe I have the correct formatting and calls in place for this to work.

The JSON that is generated by the PHP is using the compact method. Here is a code snippet to show what calls I attempted. JS: $scope.dataURL = "data/getdata.php?ip=" + $scope.selectedIP;

$http.get($scope.dataURL).success(function(data) { $scope.dataSource = data; console.log($scope.dataSource); -- This does log an object that appears to be correctly formatted });

fusioncharts ng-model="a" dataformat="json" datasource="{{dataSource}}" type="zoomline" width="700" height="600"

This call does generate a chart that appears to be correct, but is not as flexible as being able to change it generated from the dataSource in the scope.

fusioncharts ng-model="a" dataformat="jsonurl" datasource="data/?ip=" + $scope.selectedIP; .php?ip={{selectedIP}}" type="zoomline" width="700" height="600"

I am also curious to know if there is an example that shows the chart using the parent div height and width parameters with the ability to have the chart/graph autoscale as the container elements are resized.

metronic angularjs ncv l3 hw dashboard - google chrome_2015-02-13_17-31-51

The generated JSON is {"chart": {"caption": "Performance graph of a machine: A ","subCaption": "By Date","showvalues" : "0","yaxisminvalue" : "0","yaxismaxvalue" : "100","forceAxisLimits" : "1","compactdatamode" : "1","xAxisName": "Sample Time","yAxisName": "","dataseparator": "|","labelHeight" : "30","theme" : "fint"},"categories": [{"category": "2014-07-17 11:08:31|2014-07-17 11:44:33|2014-07-17 12:05:40|2014-07-17 12:12:24|2014-07-17 12:18:14|2014-07-17 12:30:25|2014-07-17 12:45:26|2014-07-17 13:00:26|2014-07-17 13:15:25|2014-07-17 13:30:25|2014-07-17 13:45:24|2014-07-17 14:00:14|2014-07-17 14:15:25|2014-07-17 14:30:25|2014-07-17 14:45:13|2014-07-17 15:00:26|2014-07-17 15:15:25|2014-07-17 15:30:25|2014-07-17 15:45:24|2014-07-17 16:00:25|2014-07-17 16:15:25|2014-07-17 16:30:25|2014-07-17 16:45:14|2014-07-17 17:00:13|2014-07-17 17:15:28|2014-07-17 17:30:27|2014-07-17 17:45:26|2014-07-17 18:00:27|2014-07-17 18:15:28|2014-07-17 18:30:27|2014-07-17 18:45:26|2014-07-17 19:00:13|2014-07-17 19:15:14|2014-07-17 19:30:27|2014-07-17 19:45:26|2014-07-17 20:00:26|2014-07-17 20:15:27|2014-07-17 20:30:27|2014-07-17 20:45:26|2014-07-17 21:00:26|2014-07-17 21:15:26|2014-07-17 21:30:26|2014-07-17 21:45:28|2014-07-17 22:00:30|2014-07-17 22:15:14|2014-07-17 22:30:15|2014-07-17 22:45:26|2014-07-17 23:00:26|2014-07-17 23:15:26|2014-07-17 23:30:27|2014-07-17 23:45:26|2014-07-18 00:00:26|2014-07-18 00:15:13|2014-07-18 00:30:26|2014-07-18 00:45:25|2014-07-18 01:00:25|2014-07-18 01:15:25|2014-07-18 01:30:26|2014-07-18 01:45:26|2014-07-18 02:00:13|2014-07-18 02:15:13|2014-07-18 02:30:25|2014-07-18 02:45:25|2014-07-18 03:00:25|2014-07-18 03:15:24|2014-07-18 03:30:25|2014-07-18 03:45:26|2014-07-18 04:00:25|2014-07-18 04:15:13|2014-07-18 04:30:25|2014-07-18 04:45:13|2014-07-18 05:00:26|2014-07-18 05:15:27|2014-07-18 05:30:26|2014-07-18 05:45:13|2014-07-18 06:00:24|2014-07-18 06:15:12|2014-07-18 06:30:25|2014-07-18 06:45:14|2014-07-18 07:00:26|2014-07-18 07:15:26|2014-07-18 07:30:13|2014-07-18 07:45:25|2014-07-18 08:00:24|2014-07-18 08:15:12|2014-07-18 08:30:25|2014-07-18 08:45:24|2014-07-18 09:00:24|2014-07-18 09:15:24|2014-07-18 09:30:24|2014-07-18 09:45:25|2014-07-18 10:00:24|2014-07-18 10:15:24|2014-07-18 10:30:25|2014-07-18 10:45:24|2014-07-18 11:00:25|2014-07-18 11:15:25|2014-07-18 11:30:25|2014-07-18 11:45:16|2014-07-18 12:00:25"}],"dataset": [{"seriesname" : "Memory Usage","data" : "84.11|86.14|8.96|8.97|8.98|8.99|8.99|9.01|9.01|9.02|9.03|9.04|9.04|9.05|9.07|9.08|13.01|29.54|32.97|58.19|75.59|49.22|76.65|66.51|57.87|77|83.97|81.36|90.59|43.51|44.59|33.84|30.17|53.62|30.46|39.7|40.41|62.71|81.63|55.57|48.14|83.44|99.8|4.92|17.8|70.3|67.33|74.2|68.82|86.75|78.19|73.62|43.55|46.78|56.04|23.8|16.48|36.6|36.71|13.37|15.97|48.01|46.27|64.8|33.5|24.62|28.08|38.49|27.65|60.89|23.74|25.23|27.71|31.3|48.38|19.6|27.63|38.11|33.64|37.84|28.03|58.74|39.28|20.34|36.73|56.38|34.64|19.68|46.39|34.22|38.18|47.05|76.99|64.77|81.77|71.59|58.82|70.84|66.93|76.67"},{"seriesname" : "Average CPU","data" : "55.5|76.5|1.5|1|1.5|1.5|2.5|3|2.5|1|7|1.5|0|1.5|1.5|2.5|2.5|85.5|24.5|27.5|12|67|43.5|50.5|21.5|35|8.5|35|11.5|4.5|56|54|68|50.5|50.5|48.5|81.5|39|47.5|25.5|47|64.5|45|3.5|68.5|56|49|37|57.5|82|45.5|13|17|83|31.5|33|28|38.5|23|1|2.5|39.5|8|46.5|40|33|20|43|35|11.5|65.5|10.5|31|41|62|57|1|53|1|14|6.5|5|60|50|6|28.5|21|4.5|1|2.5|38|55|2.5|84.5|36.5|36|79.5|68|26|15.5"}],"trendlines": [{"line": [{"startvalue": "85","endValue" : "100","color": "FF0000","valueOnRight": "1","istrendzone" : "1","alpha" : "35","showontop" : "0","displayvalue": "Critical"},{"startvalue": "75","endValue" : "85","color": "FFFF00","valueOnRight": "1","istrendzone" : "1","alpha" : "35","showontop" : "0","displayvalue": "Warning"}]}]}

Any thoughts would be very appreciated.. Thanks..

ayanonly1 commented 9 years ago

Can you please try with a JSON.parse. Sample code as follows. $scope.dataSource = JSON.parse(data);

If this does not work, please share a sample.

ayanonly1 commented 9 years ago

Closing this issue. As this issue is inactive for a long time.