Gagan Sikri

Moderators
 View Profile  See their activity

  • Content count

    115

  • Joined

  • Last visited

Posts posted by Gagan Sikri

  2. Posted · Report reply

    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

  3. Posted · Report reply

    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. Posted · Report reply

    I have divided the complete process into the following four easy-to-understand steps:

    1. Include the required JavaScript files
    2. Create the AngularJS app
    3. Define the chart controller
    4. Render the chart

    Step 1: Include the required JavaScript files

    We need the following three JavaScript dependencies to render our chart:

    1. AngularJS Library
    2. FusionCharts core package JS files
    3. 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.  

  6. Posted · Report reply

    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. Posted · Report reply

    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.

  9. Posted · Report reply

    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. Posted · Report reply

    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.

  15. Posted · Report reply

    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)

  18. Posted · Report reply

    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)

  20. Posted · Report reply

    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.

  22. Posted · Edited by Gagan Sikri · Report reply

    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