We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to create a chart drilldown in javascript dinamically

Thread ID:

Created:

Updated:

Platform:

Replies:

117382 Oct 8,2014 06:07 PM Oct 15,2014 09:49 AM ASP.NET Web Forms 5
loading
Tags: Chart
Roimer Machacón Otero
Asked On October 8, 2014 06:07 PM

Hi we migrated of asp net classic to asp net following this link:

http://www.syncfusion.com/kb/2504/how-to-migrate-from-asp-net-classic-to-asp-net

Now we want create a chart with the option drilldown in javascript dinamically.

In the documentation and demos the examples have the information to show in the chart statically

Now trying of create the chart the javascript generate an error that show in the attached image.

Attachment: error_chart_d000627d.rar

Akbar Basha K M [Syncfusion]
Replied On October 9, 2014 08:08 AM

Hi Nestor,

Thanks for using syncfusion product.

We have analyzed your requirement with attached image.

The error was appeared might be the given datasource value set as 0 or null.

We have prepared a sample based on your requirement.

Please find the attached sample.

Please let us know if you have any concern.

Thanks,

Akbar Basha KM.


Attachment: Website_35098bdc.zip

Roimer Machacón Otero
Replied On October 10, 2014 11:36 AM

Hi Akbar Basha K M

The example sent for you this work. Now we are need generate this chart depending of parameters write for a user in the page.

The example is load when the page load now, how can I call the chart form a button 


This is the function to load the chart
function load(sender) {
            var grafico = graficoInicial();                       
            sender.model.series[0].dataSource = grafico;
            sender.model.series[0].xName = "Product";
            sender.model.series[0].yName = "Value";
        }

In this button call the function
                        onclick="load()" />

Now the following error is generated
Uncaught TypeError: Cannot read property 'model' of undefined 

The method is modified to this, but the error remains
function load() {
            var grafico = graficoInicial();
            var sender = document.getElementById('<%= Chart1.ClientID%>');
            sender.model.series[0].dataSource = grafico;
            sender.model.series[0].xName = "Product";
            sender.model.series[0].yName = "Value";
        }

What is sender? How can obtain sender for generate the chart on press a button?

Akbar Basha K M [Syncfusion]
Replied On October 13, 2014 12:31 AM

Hi Nestor,

Thanks for your update. We have analyzed your requirement with your code.

Query #1: What is sender?

Response: sender is the instance of Chart Container. You can customize the any property through sender.

Query #2: How can obtain sender for generate the chart on press a button?

Response: if you want to create a chart instance in button click event, you can use as follows,

var instance = $("#Chart1").ejChart("instance");

We have prepared a sample based on this. Please find the attached sample.

Please let us know if you have any concern.

Thanks,

Akbar Basha KM.


Attachment: F117382_220a5371.zip

Roimer Machacón Otero
Replied On October 14, 2014 06:41 PM

Hi Akbar, The example sent by you work correctly.

Now we've other questions

1)
We've this in the tag of the chart for the tooltip in drilldown
<CommonSeriesOptions Type="Pie" EnableAnimation="true"
Tooltip-Format= "#point.x# : #point.y# %"
Tooltip-Visible="true"
Tooltip-Fill="#72bc49"
Tooltip-Border-Width="1" 
Tooltip-Border-Color="#FFFFFF"
Tooltip-Font-Color="#FFFFFF">
</CommonSeriesOptions>

In the events for execute the drilldown we've this code in javascript depending of event OnClientPointRegionClick

tooltip: { visible: true, format: "Lot #point.x# : #point.y# %", Fill:"#72bc49"},
or
tooltip: { visible: true, format: " #point.x# : #point.y# %", Fill:"#72bc49"}, (This efect is when the user press back button)

Now this code in javascript not work independing of the defined in the chart tag, always appear the tooltip defined in commonseriesoptions.
If the commonseriesoptions is removed, not appear the tooltip

Exist a form for that this customize tooltip appear

Other question

2)
In the datasource for the chart have this
sender.model.series[0].dataSource = grafico;
sender.model.series[0].xName = "Lot";
sender.model.series[0].yName = "Percentage";

This work perfect but the Percentage value from the database for example 13.45% in the chart appear 13.45 without the percent sign

How to make for show this value exactly as it comes from the database.

Attached image for this question

3) In the legend exist a form for show a title? Or example
The values for xName are 85, 86, 87

Exist a form for editing this in the presentation for show Lot 85, Lot 86, Lot 87

Attached image for this question

4) Exist a form of create a loading presentation while that the chart is generated for show to the users?


Attachment: Questions_9b441763.rar

Akbar Basha K M [Syncfusion]
Replied On October 15, 2014 09:49 AM

Hi Nestor,

Thanks for your update. We have analyzed your requirement,

Query 1: in javascript the code was not working?

Response: We have analyzed the code snippet provided by you and found that tooltip for chart is customized in common series options. In point region click event, the properties “Fill”, “Format” and “Visible” of tooltip are set and properties to customize border width, border color and font color of tooltip are not modified. So, Chart will take the border color, border width and font color values which was set to tooltip through common series options for displaying tool tip after drill down.

Query 2: This work perfect but the Percentage value from the database for example 13.45% in the chart appear 13.45 without the percent sign

Response: The Y values cannot accept string format. If you want to show % in datalable you can use prerender event as follows,

Code Snippet[JS]

preRender: 'render',

function render(sender)

            {

                var i = 0;

                var length = sender.model.series[0].points.length;

                for (i = 0; i < length; i++)

                {

                    sender.model.series[0].points[i].text = sender.model.series[0].points[i].y + "%";

                }

               

            }

Query 3: show legend title? Or Exist a form for editing this in the presentation for show Lot 85, Lot 86, Lot 87

Response: Legend Title feature can been implemented and it will be available in upcoming release which is expected to rolled out on mid of October 2014.

For adding a text in legend text can be achieve using legendItemRendering event as follows,

Code Snippet[C]:

OnClientLegendItemRendering="legend"

function legend(sender)        {

            var length = sender.model.legendCollection.length;

            for (i = 0; i < length; i++)

            {                if (sender.model.series[0].points[i].x == sender.model.legendCollection[i].Text)

                sender.model.legendCollection[i].Text = "Lat " + sender.model.legendCollection[i].Text;

            }           

        }

Query 4: Exist a form of create a loading presentation while that the chart is generated for show to the users?

Response: you can achieve this requirement by using ej.waithingpopup as follows,

$("#container").ejWaitingPopup()

$("#container").ejWaitingPopup("show");

 

We have prepared a sample based on your requirements.

Please find the attached sample.

Please let us know if you have any concern.

Regards,

Akbar Basha.KM


Attachment: F117382_(2)_57db0b96.zip

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;