Gagan Sikri

Moderators
 View Profile  See their activity

  • Content count

    115

  • Joined

  • Last visited

Everything posted by Gagan Sikri

  1. Creating Charts in AngularJS

    Gagan Sikri posted a topic in Introduction

    I have divided the complete process into the following four easy-to-understand steps: Include the required JavaScript files Create the AngularJS app Define the chart controller Render the chart Step 1: Include the required JavaScript files We need the following three JavaScript dependencies to render our chart: AngularJS Library FusionCharts core package JS files FusionCharts Angular charts plugin We will include all the above files using the <script> tag, as shown in the code below: <html> <head> <!-- including AngularJS library --> <script type="text/javascript" src="path/to/angular.min.js"></script> <!-- including FusionCharts core package files --> <script type="text/javascript" src="path/to/fusioncharts.js"></script> <script type="text/javascript" src="path/to/fusioncharts.charts.js"></script> <!-- including FusionChart Angular charts plugin --> <script type="text/javascript" src="path/to/angular-fusioncharts.min.js"></script> </head> </html> Step 2: Create the AngularJS app Next, we need to create the Angular app and inject the ng-fusioncharts module, which is provided by the plugin that we have included in the previous step. This is how we do it: var app = angular.module('myChartApp', ['ng-fusioncharts']); Step 3: Define Chart Controller In this step, we will define a controller for our app. To achieve this, we will augment the controller scope with the dataSource and the chart configurations: app.controller('chartController', function($scope) { // chart datasource $scope.dataSource = { "chart": { // caption configuration "caption": "Highest Paid Actors", "captionFontBold": "0", "captionFontSize": "20", // more chart properties - explained later }, "data": [{ "label": "Leonardo", "value": "1" }, //more chart data ] }; }); Step 4: Render the Chart We are almost done now. To render the chart, we will add the fusioncharts directive inside the <div> tag where chart will be rendered. This is how we will do it: <div ng-controller="chartController"> <fusioncharts width= "100%" height= "400" type= "bar2d" dataFormat= "json" dataSource= "{{dataSource}}"> </fusioncharts> </div> When you’ve executed the above code, you should be seeing a live bar 2D chart. If your chart didn’t render, or you want to see the source code, check out this JSFiddle example. If you’d like to know know more about creating charts with AngularJS, you can refer to this developer documentation page.

  2. Drill-down with JavaScript function as link

    Gagan Sikri replied to Boomerific's topic in General usage

    Hi Boomerific, This issue has been fixed in latest version of FusionCharts i.e. 3.13.0. You can download the same using this link: https://www.fusioncharts.com/download/fusioncharts-suite

  3. B.register is not a function.

    Gagan Sikri replied to chilly's topic in Bug Reports

    Hey @chilly FusionCharts is not completely ES6 compatible as of now so you have to use webpack bundler to render the charts. We have created a sample for you reference. Please follow the below steps to run the same: - Extract zip file and navigate to fc-demo folder via terminal/command line. - use below command to install all the dependencies. npm install - use command to bundle the package (webpack is used for bundling - you can check bundle config in package.json) npm run bundle - Run index.html file. We have reported this issue internally and team is working on ES6 compatibility. fc-demo.zip

  4. B.register is not a function.

    Gagan Sikri replied to chilly's topic in Bug Reports

    Hey @chilly, Apologies for inconvenience. Since, files installed from NPM are minified version of FusionCharts and it will be very difficult for us to debug the issue that you are facing. It will be great if you could provide us with exact steps or scaled down sample so that we can replicate the issue and debug it further using source map.
  5. Hey Yadanar, Please share a scaled down sample along with list of errors that you are getting at PHP side as well as in browser console, so that we can assist you further.

  6. Dashed Line Chart?

    Gagan Sikri replied to CarlCouture's topic in XML Issue

    HI Aman, FusionCharts do not interpret with data passed to the chart and chart is rendered dynamically at front-end. To achieve your requirement you have to use chart attribute `connectNullData` and its value as `1` to connect line for data plots which are null. If you want null connection lines to be dashed, then you have to pass chart attribute `dashed` and its value as `1` for data plot which has some value before null data point. Please check this JSFiddle sample for the same: http://jsfiddle.net/sikrigagan/xb9TG/1020/

  7. Custom PDF containing chart from json data at server side

    Gagan Sikri replied to anurag.porwal's topic in General usage

    Hi You can make use of PhantomJS to export the chart and other elements of web page to PDF without rendering the chart on client side. You can refer to this link to know more. If you want to trigger export from client side (after chart is being rendered on browser), then you can make use of FusionCharts API method `getSVGString` and get SVG string for the chart and embed it to PDF export according to your requirement. Please check this JSFiddle sample for the same: http://jsfiddle.net/sikrigagan/2ovov3nL/ To know more about this method, please check out this developer documentation page. Hope this helps.

  8. Fusion_angular with RESTApi

    Gagan Sikri replied to subratdash8's topic in Javascript Problems

    Hi You have to form chart data beforehand and then pass it to chart object. If $scope.data1 is not populated after render method is called then chart will show `No Data to Display` error as chart should have dataSource before chart is being rendered.

  9. Creating Fusion Map - Beginner - Help Needed

    Gagan Sikri replied to Startdust's topic in Using FusionMaps XT

    Hi SWF files were used in flash charts and flash charts are deprecated now. FusionCharts now renders charts using pure JavaScript. I would recommend you to upgrade to latest version. If you are a licensed customer you can visit PUC portal and download latest package associated with your license else you can refer to this link to download evaluation version. For Europe map, you can check this JSFiddle and cross check your implementation: http://jsfiddle.net/sikrigagan/d69fdce2/1/ For more details about customizing Europe map you can visit below links: - Specification Sheet - Attributes Hope this helps.

  10. Multi-Series chart using SQL query

    Gagan Sikri replied to JerryCRH's topic in FusionCharts and ASP.NET

    Hi You can check out this example for the same: https://github.com/fusioncharts/vb-net-wrapper/blob/master/Samples/DBExample/index.aspx.vb Please make sure you are creating XML or JSON data according to FusionCharts format. You can use below JSFiddle samples for reference: - JSON: http://jsfiddle.net/fusioncharts/X9xPM/ - XML: http://jsfiddle.net/sikrigagan/X9xPM/161/ Also, according to code you sent earlier. It seems that you are using flash version of FusionCharts, and flash charts are deprecated now. I would suggest you to upgrade to latest version of FusionCharts and FusionCharts VB wrapper.

  11. Cross Site Scripting Issue

    Gagan Sikri replied to Ambica's topic in Bug Reports

    Hi This issue is already logged internally and passed on to respective team. It will be taken up soon. We will notify you about the same.

  12. .swf?DataURL= No longer working?

    Gagan Sikri replied to Martin C's topic in XML Issue

    Hi SWF files were used in flash charts and flash charts are deprecated now since FusionCharts version 3.4. Now, FusionCharts renders charts using pure JavaScript only. You can download latest version using this link: http://www.fusioncharts.com/download/ You can also check this developer documentation for latest version: http://www.fusioncharts.com/dev/

  13. link and labelLink data attributes conflict

    Gagan Sikri replied to Carl_Sevron's topic in Javascript Problems

    Hi Thanks for reporting the issue, we have logged it internally and will keep you posted about the same.
  14. Hi Please share a scaled down sample for the scenario so that we can check the issue and provide solution or workaround for this. Also, you should use `display:block` as in this case element is loaded on web page while in case of `display:none` element is not loaded at all.

  15. Fusionchart export functionality

    Gagan Sikri replied to venkatc's topic in FusionCharts and JSP

    Hi Flash charts are deprecated since FusionCharts version 3.4. I would recommend you to upgrade to latest version of FusionCharts i.e. 3.11 and use latest version of Java Exporter. You can download evaluation version using this link: http://www.fusioncharts.com/download/ To know more about using Java exporter, you can refer to this developer documentation: http://www.fusioncharts.com/dev/exporting-charts/server-side-export/setup-private-export-server-java.html You can also download this sample project for reference: https://www.dropbox.com/s/pbg1z7gl6gvj8py/fc-exporter-demo.zip?dl=0(Please do note that to run this project you have to make changes according to your system)

  16. Map Container Max height, width

    Gagan Sikri replied to RationalRabbit's topic in Using FusionMaps XT

    Hi Please replicate the issue in this JSFiddle sample: http://jsfiddle.net/fusioncharts/e57mb/so that I can assist you accordingly.

  17. Incompatible with Shadow DOM?

    Gagan Sikri replied to skrivanos's topic in Bug Reports

    Hi Please share a scaled down sample for the issue you are facing so that I can assist you.

  18. How to convert the rrd file to the fusionchart's xml file?

    Gagan Sikri replied to parisspring's topic in General usage

    Hi You can parse the data from database/data source and then pass time date values as strings to the chart object to render the charts with those values. Date and time values cannot be used directly as direct manipulation is not allowed in charts as of now. You can make use of real-time charts to showcase real-time data. Here's example for the same: http://fc.gagansikri.in/workspace/realtimechartsdemo/realtimedemo.html(Source: https://github.com/sikrigagan/FusionCharts-Samples/tree/master/JS/Real-Time-Chart-with-Data-Stream)
  19. Hi This issue has been fixed in latest version of FusionCharts. Please upgrade to latest version and check for the issue. You can refer to this JSFiddle sample in reference to the issue with latest files: http://jsfiddle.net/pkX4k/4/

  20. How to add new layer in the multiple pie last element

    Gagan Sikri replied to prasadraja07's topic in Bug Reports

    Hi It is not possible to add smart labels to multi-level pie chart outer-ring as of now. We have added this feature to our wishlist and will check its feasibility for upcoming releases. As of now you can use line and text annotations as workaround to add smart labels to pie chart. You can check out this developer documentation to know more about annotations: http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/introduction.html Please do note that annotations are static in nature and have to be placed manually in the chart.

  21. Mouseover tooltip is not showing in modal box

    Gagan Sikri replied to surik_babu's topic in Bug Reports

    Hi, Thanks for reporting the issue, I have logged an improvement request internally for this issue and will update about the same soon.

  22. Bubble Chart With Colored Quadrant Backgrounds

    Gagan Sikri replied to sfhaney's topic in General usage

    Hi, Macros in annotations only support manipulation via addition and subtraction as of now. Manipulation via multiplication and division is not possible. You can check out this developer documentation to know more about using macros to place annotations: http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/positioning-annotations-using-macros.html

  23. Export All Charts

    Gagan Sikri replied to hlukes's topic in FusionCharts and ASP.NET

    Hi You can create a JavaScript function at your end and bind it using event listener to all the charts and call FusionCharts export method to export all the charts separately. To know more about this method, please refer to this developer documentation: http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#exportChart

  24. Visual focus of chart when tabbed to

    Gagan Sikri replied to mocaiv's topic in General usage

    Hi You can use browser API methods to provide keyboard navigation to charts on a web page.
  25. Hi You can hide plot border for particular data set by specifying alpha attribute `plotBorderAlpha` for that data set. Please refer to this JSFiddle sample for the same: http://jsfiddle.net/sikrigagan/Tu57h/339/