fusioncharts / angularjs-fusioncharts Goto Github PK

After changing the dimension if we do any configuration changes through "config" attribute of "fusioncharts" directive. Then the chart is restoring to it's initial dimension.
To replicate open http://jsfiddle.net/ayanonly1/gfoogou7/. And then click on "Change Width" to change the dimension and then do click on "Change Chart's BG-Opacity". The chart will be re-rendered with it's initial dimension.

Hi,
My team is thinking to upgrade the fusioncharts to latest version i.e 3.9.0. Before we upgrade we like to make sure the angular-fusionharts.js file is compatible with the latest fusion chart version 3.9.0 or not.

Thanks
Sabin

Hi,
I get this
Uncaught TypeError: Cannot read property 'nodeType' of null

What is it?

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.

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

Grunt should not be a production dependency but a dev one.

For angularjs 1.5.8.
If create fusioncharts in template of component, how to assign events for it? As it is isolated scope.

Hi, Using this angular plugin to display country map but the state labels are displaying where they should but the map regions are down to the bottom right of the container div. How can this be resolved please?
Thanks

I have 3 objects and all 3 component have pie chart. I want to capture dataplotClick event for all of them. I've created 3 datasource object and 3 events object for each. As datasource requires few dynamic values and for that I've to wait for my service response so I fill these both objects inside .then call back function. Chart is working fine but event is not working. If I move event object outside the then callback then it's working fine but in this case the same function will be calling for both chart click. Can anyone please help.

Hi I am implementing a chart in my Angularjs Application, You can see this plunker http://jsfiddle.net/fusioncharts/73xgmacm/The thing which I want to achieve is to change the valueattribute to profit. How can I do this ? I want to display profit not values.

Regards

I have the column2d bar chart all figured up, but the graph is not rendering. I have put the html in a contentString as part of a directive. Here is the part where I added it to the contentString:

var contentString = '

' + marker[i].name + '

Here is the part where I declare the data for the graph:

if (marker[i].priceLevel) {
debugger;
$scope.dataSource = {
"chart": {
"caption": "Pricing",
"captionFontSize": "15",
"bgColor": "#00f987",
"showAxisLines": "1",
"xAxisName": "Price Level",
"toolTipColor": "#ffffff",
"axisLineAlpha": "85",
"xAxisLineColor": "#000",
"showHoverEffect": "1",
"animation": "1"
},
"data": [{
"label": "Price Level",
"value": "marker[i].priceLevel",
"showLabel": "1",
"showValue": "1"
}]
}
}

I have tried it with the <div fusionchart as well as just <fusionchart and neither works. Wondering what you suggest?

The charts work well on Chrome browser. I just discovered that the pie charts are black on Safari and Firefox. The column charts display well across other browsers.

Hi, I wrapped the in my directive, but it said "no data to display", however, if I use it in my page directly, with the same datasource configuration, it works.

How can I supply data to my chart using the .feedData() function?

I'd like to avoid running an additional server-side script to generate a single JSON file when I can easily make the API call to get data values using $http in angular.

I have a simple application where the fusion chart is inside a bootstrap tab. When I try to switch state from one (that have the bootstrap tab and chart is in the hidden tab, i.e: no selected that time) to another, there occurs a console error.

steps to reproduce

• click About then click Home you'll find the console error. The chart was inside the About states profile tab which we didn't click. so the problem is if our chart is inside a hidden div and we try to switch state, the error rises.

The demo application is attached here.
https://embed.plnkr.co/oX8tEWz3d9Er6N0A5KxB/

I've created my first chart after a day testing. It's a combi chart (2 bar series , 1 line serie)

After updating the datasource from my controller, the bar series always get drawn and updated. However the line does not.

The line chart gets updated/drawn random( 50% visible, 50% not visible)

Update:
vm.myDataSource.dataset[2].data = [{"value":"16610.88"},{"value":"16610.88"},{"value":"16610.88"},{"value":"16610.88"},{"value":"41524.72"},{"value":"1.66"},{"value":"1.66"},{"value":"1.66"},{"value":"1.66"},{"value":"1.66"},{"value":"-8302.95"},{"value":"-8302.95"}];

I print my bar data after every update : console.log(JSON.stringify(vm.myDataSource.dataset[2].data));

It shows the exact data from the dataset every time but the line not always get drawn. Any hints or clue's would be appreciated. Addionatinol info needed plz let me know.

(Not an angular expert )

The reference sample on the mainpage is invalid...
It needs to be updated to use the fc-chart / fc-chart-type / fc-data attributes.

Hi, I have a trouble with fusionchart. When I hide it using an angular ng-hide, my fusionchart stops any updating. As a result, if I show it again, my chart is outdated.

I’ve created a Codepen page with an example, you can play with it:
http://codepen.io/AlexBrel/pen/JRbPYb

Could you please suggest anything to resolve my issue?

Thank you in advance,
Alex

Why isn't this merged?

fusioncharts/angular-fusioncharts#33

I concluded that I need this exact change in my code and added it before I even looked at the issues and found this PR. It prevents memory leaks and I think it sometimes may prevent unexpected errors like 'nodeType is null' as the chart is not disposed when the DOM element is removed.

Hi , I am having an issue loading a chart from my json file.
bellow is a copy of my scripts
I can see the json file in firefox if I call on it
also standard chart with data source in the $scope works fine
only the external json file has issues

I need the data to be external since I would like the file later to be generated via a script
thank you in advance for the help
Billy

{
chart: {
caption: "Disk Space Usability",
subcaption: "sv01",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Disk Uasage : Total space : ",
theme: "fint"
},
data: [
{
label: "Free space ",
value: "214640357376"
},
{
label: "size",
value: "16613142528"
}

    ]

}

Team,

Theme parameter has no impact in chart rendering. Try the following code with bellow data object
< ... fc-chart fc-chart-type="MSLine" fc-data="sampleData" width="100%" height="100%"/ ....>
$scope.sampleData = {
"chart": {
"caption": "Store footfall - Last quarter",
"subCaption": "Top 5 stores",
"xAxisName": "Quarter",
"yAxisName": "No of visitors",
"divlineDashed": "0",
"numMinorDivLines" : "4",
"theme" : "ocean"
},
"categories": [
{
"category": [
{
"label": "Los Angeles Topanga"
},
{
"label": "Bakersfield Central"
},
{
"label": "Garden Groove harbour"
},
{
"label": "Crompton-Rancho Dom"
},
{
"label": "Daly City Serramonte"
}
]
}
],
"dataset": [
{
"seriesname": "Total footfalls",
"data": [
{
"value": "1960000"
},
{
"value": "1110000"
},
{
"value": "609000"
},
{
"value": "560000"
},
{
"value": "470000"
}
]
},
{
"seriesname": "No of Transactions",
"data": [
{
"value": "126000"
},
{
"value": "92140"
},
{
"value": "36000"
},
{
"value": "46000"
},
{
"value": "83000"
}
]
}
]
};

I have followed the steps found in your guide to get the application running. I am unable to get the chart to display. Will please provide a jsbin on how to get a very simple version of angular-fusioncharts working?

Hello,

New to using fushion charts and would like to use them with angular.

I am a bit confused as to how it is anticipated that this module is redistributed. Is the idea that the source is downloaded from www.fushioncharts.com?

Is there any chance you could add a bower.json file to enable download from Bower.io? This would enable developers to ensure that they have no dependency conflicts and would allow it to be added to their own Bower dependencies. A fork has been created which provides this but it is obviously not the official source:

https://github.com/adcuz/fc-angular-fusioncharts

In addition - is v3.1 an official release? It just appears to be a tag and yet it is linked from the official Fushion Charts GitHub IOwebsite.

http://fusioncharts.github.io/angular-fusioncharts/#/demos/ex1

But the download link on Fushion Charts website is only v3.0.

http://www.fusioncharts.com/downloads/plugins/angularjs-plugin.zip

Thanks,

Donald

Refer to http://jsfiddle.net/hyu12phg/1/ you will get too many log for the event call in the console.

Refer to http://jsfiddle.net/4c8pweh5/. The events are not working.

The main file in the package definition points to "index.js" which does not exist.

Like static.fusioncharts.com/... for the charts stuff.

ok, My english is not so good...
I have a problem I want have several charts in a one page, I'm new in this, por I want that the usser give click in a chart's piece and generate me other chart about this information.
I try to show the specific data from one state.
I append my code:
`(function () {

/**
 * subjectsModule Module
 *
 * Description
 */
angular.module('infoSubjectModule', ["ng-fusioncharts"])
    .directive('infoSubjectsDirective', function () {
        //Return the directive
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'html/subjects/info.html',
            controller: 'infoSubjectsController'
        }

    })
    .controller('infoSubjectsController', function ($scope, $mdSidenav, $routeParams, $mdSidenav, $location, $route, $rootScope, $window, $filter, $mdToast, subjectsService,usersService, themesService) {


      $scope.myDataSource = {};

usersService.getAllState()
.then(function(response){
console.log(response)
$scope.stateGraficas={};
$scope.stateGraficas = response.map(function(array){
return {
label : array.State,
value : array.Pendientes
};

            })
        

            console.log($scope.stateGraficas)

$scope.stateGraficas =JSON.stringify( $scope.stateGraficas)
console.log(JSON.parse( $scope.stateGraficas))
$scope.myDataSource = {
chart: {
caption: "States",
subcaption: "2018",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Age group : $label Total visit : $datavalue",
theme: "fint"
},
data : JSON.parse( $scope.stateGraficas)

}
})
console.log($scope.myDataSource)
//$scope.myDataSource=Object.assign($scope.stateGraficas,$scope.myDataSource)

usersService.getAllDistrit()
.then(function(response){
console.log(response)
$scope.distritGraficas={};
$scope.distritGraficas = response.map(function(array){
return {
label : array.Distrit,
value : array.Complete
};
})
console.log($scope.distritGraficas)

$scope.distritGraficas =JSON.stringify($scope.distritGraficas)
console.log(JSON.parse( $scope.distritGraficas))
$scope.myDataSource2 = {
chart: {
caption: "Distrits",
subcaption: "2018",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Age group : $label Total visit : $datavalue",
theme: "fint"
},
data : JSON.parse( $scope.distritGraficas)
}
})
console.log($scope.myDataSource2)
})()
`
Please I new

FusionCharts uses angular.element(document).ready and element.ready to render chart. Sanity of this event needs to be checked in major angular releases.
If possible more robust solution has to be found.

How do you call the ConfigureLink method to change the type for the drill-down chart?

I recently observed then when I am using :
< fc-chart fc-width="600" fc-height="400" fc-type="pie3d", fc-datasource="{{dataSource}}" > < /fc-chart >
chart is not getting rendered.
However, when I use it as an attribute it working as expected:
< div fc-chart fc-width="600" fc-height="400" fc-type="pie3d", fc-datasource="{{dataSource}}">< /div>
As per the documentation we can use either of the ways.

Not sure if I'm the only one having issue but doughnut2d is not rendering properly. the border has the correct pallet colors but the fill is transparent.

Here is my code:
html:
<div width='100%' height='500' fusioncharts type="doughnut2d" datasource="{{datasource}}" ></div>

js

$scope.datasource = { "chart": { "caption": "Split of Revenue by Product Categories", "subCaption": "Last year", "numberPrefix": "$", "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000", "bgColor": "#ffffff", "showBorder": "0", "use3DLighting": "0", "showShadow": "0", "enableSmartLabels": "0", "startingAngle": "310", "showLabels": "0", "showPercentValues": "1", "showLegend": "1", "legendShadow": "0", "legendBorderAlpha": "0", "defaultCenterLabel": "Total revenue: $64.08K", "centerLabel": "Revenue from $label: $value", "centerLabelBold": "1", "showTooltip": "0", "decimals": "0", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0" }, "data": [ { "label": "Food", "value": "28504" }, { "label": "Apparels", "value": "14633" }, { "label": "Electronics", "value": "10507" }, { "label": "Household", "value": "4910" } ] }

i have a project running 3.3.2 of FusionCharts, will this angular library work with it?

Hi,
I am using the fusion charts angular plugin and retrieving data from the server using AJAX. Are there any examples on how to do this for multiple graphs. I have used static data and it works but having some issues with the dynamic data.

I have a datasource array in my scope that stores the chart data retrieved from the server and then in the html I use ng-repeat to iterate through this array and pass the data to the fusioncharts directive.

For chrome it seems like the data is being displayed - but on firefox the x-axis labels don't show up. They show up when I use a static datasource but not when I use the data in the dataSource array. The concerning this is that it's only the x-axis labels - the dataset and attributes of the chart seem to be picked up, even the tooltip text from the categories array get picker up for the labels...just not the x-axis labels. Either firefox doesn't like something or doesn't seem to be applying the x-axis labels using data-binding. Is there a way to manually redraw the table from the controller??

Maybe my usage is not correct - I cannot directly specify the json url in the html because I have multiple graphs that are configurable in terms of the data retrieved....

Here is some of my code:
Here's the code in the HTML file:

  <div class="col-xs-12 col-sm-6" ng-repeat="ds in dataSource">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <span class="caption-subject bold graph-name">{{ds.name}}</span>
                    </div>
                </div>    
 
                <div class="portlet-body">
                    <fusioncharts width="100%"
                                  height="500"
                                  dataFormat="json"
                                  type="{{ds.type}}"
                                  dataSource="{{ ds }}">
                    </fusioncharts>
                </div>
       </div>
  </div>

....

Javascript code:

         $scope.dataSource[idx].chart = response.chart.chart;
         $scope.dataSource[idx].chart["labelDisplay"] = "rotate";
         $scope.dataSource[idx].chart["slantLabels"] = "1";
         $scope.dataSource[idx].categories =  response.chart.categories;
         $scope.dataSource[idx].dataset = response.chart.dataset;

JSON from Server:
{"chart":
{"chart":{"bgAlpha":"0,0","showBorder":"0","animation":"0","showValues":"0","rotateNames":"1","baseFont":"Verdana","baseFontSize":"9","baseFontColor":"474747","divlinecolor":"cccccc","showAlternateHGridColor":"1","alternateHGridColor":"f0f8ff","hoverCapBgColor":"ffffcc","hoverCapBorderColor":"cccccc","numVDivLines":"9","formatNumberScale":"0","vDivlinecolor":"cccccc","showAlternateVGridColor":"1","alternateVGridColor":"e0e8ff"},

"categories":[{"category":[{"label":"08 Jan","showLabel":1,"toolText":"Sun, 08 Jan 2017"},{"label":"09 Jan","showLabel":0,"toolText":"Mon, 09 Jan 2017"},{"label":"10 Jan","showLabel":0,"toolText":"Tue, 10 Jan 2017"},{"label":"11 Jan","showLabel":1,"toolText":"Wed, 11 Jan 2017"},{"label":"12 Jan","showLabel":0,"toolText":"Thu, 12 Jan 2017"},{"label":"13 Jan","showLabel":0,"toolText":"Fri, 13 Jan 2017"},{"label":"14 Jan","showLabel":1,"toolText":"Sat, 14 Jan 2017"},{"label":"15 Jan","showLabel":0,"toolText":"Sun, 15 Jan 2017"},{"label":"16 Jan","showLabel":0,"toolText":"Mon, 16 Jan 2017"},{"label":"17 Jan","showLabel":1,"toolText":"Tue, 17 Jan 2017"},{"label":"18 Jan","showLabel":0,"toolText":"Wed, 18 Jan 2017"},{"label":"19 Jan","showLabel":0,"toolText":"Thu, 19 Jan 2017"},{"label":"20 Jan","showLabel":1,"toolText":"Fri, 20 Jan 2017"},{"label":"21 Jan","showLabel":0,"toolText":"Sat, 21 Jan 2017"},{"label":"22 Jan","showLabel":0,"toolText":"Sun, 22 Jan 2017"},{"label":"23 Jan","showLabel":1,"toolText":"Mon, 23 Jan 2017"},{"label":"24 Jan","showLabel":0,"toolText":"Tue, 24 Jan 2017"},{"label":"25 Jan","showLabel":0,"toolText":"Wed, 25 Jan 2017"},{"label":"26 Jan","showLabel":1,"toolText":"Thu, 26 Jan 2017"},{"label":"27 Jan","showLabel":0,"toolText":"Fri, 27 Jan 2017"},{"label":"28 Jan","showLabel":0,"toolText":"Sat, 28 Jan 2017"},{"label":"29 Jan","showLabel":1,"toolText":"Sun, 29 Jan 2017"},{"label":"30 Jan","showLabel":0,"toolText":"Mon, 30 Jan 2017"},{"label":"31 Jan","showLabel":0,"toolText":"Tue, 31 Jan 2017"},{"label":"01 Feb","showLabel":1,"toolText":"Wed, 01 Feb 2017"},{"label":"02 Feb","showLabel":0,"toolText":"Thu, 02 Feb 2017"},{"label":"03 Feb","showLabel":0,"toolText":"Fri, 03 Feb 2017"},{"label":"04 Feb","showLabel":1,"toolText":"Sat, 04 Feb 2017"},{"label":"05 Feb","showLabel":0,"toolText":"Sun, 05 Feb 2017"},{"label":"06 Feb","showLabel":0,"toolText":"Mon, 06 Feb 2017"},{"label":"07 Feb","showLabel":1,"toolText":"Tue, 07 Feb 2017"}]}],

"dataset":[{"seriesName":"Success (Total)","color":"E8141B","data":[{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"}]},{"seriesName":"Failed (Total)","color":"006FBE","data":[{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"3"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"3"}]}]},

"chartType":"StackedColumn2D"
}

Chrome screenshot:

Firefox screenshot:

Is there any other best option for loading multiple chart with good performance (avoid browser overload, comfort user interaction)

According to analysis, rendering multiple (pie/zoomline) charts with synchronous way like using ajax call (first chart completed after then rest of charts one by one) .I dont know exactly this one is good way or not.

please suggest me which one is best way to follow this kind of usecase without major drawbacks