Custom Charts

[Neeraj]

Hi 

I am using Syncfusion Dashboard Trial version. I have worked on Chart Control, there is no option to customize the charts (like : axes-color, background-color). Is there any option to customize the charts, if any then please share it. My requirement is to customize the chart from user end.

Please share your valuable suggestions.

Thanks.

Neeraj Purohit

[Akbar Basha K M]

Hi Neeraj,
Thanks for using syncfusion product. We have analyzed your requirement and we have prepares a simple user customization sample based on your requirements,

Please find the attached sample.

Please refer the UG Document for following location

http://help.syncfusion.com/web

And please select chart it will be more helpful to create a chart and chart functionalities.

We have Customization sample in online please find the following location

http://asp.syncfusion.com/demos/web/

Please let us know if it’s helpful.

Thanks,

Akbar Basha K M

Attachment: WebApplication5_56b9789.zip

[Neeraj]

Hi

Thanks for your quick response. I will check this sample and will come to you in the case of any query. 

Thanks

Neeraj Purohit

[Neeraj]

Hello

Sample you have given is quite customized but I want to save customization I mean whenever I refresh the page chart again set as his default properties. Is there any option to save the changes and make chart as per our requirements.

Thanks.

[Akbar Basha K M]

Hi Neeraj,

Thanks for update. we have analyzed your requirements and we like to inform you that you can achieve your requirement using asp server control instead of html controls.

 

Code snipper[c#]

 protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

        {

            var type = DropDownList1.SelectedItem.Text;

            switch(type)

            {

                case "Column":

                    this.Chart1.SeriesType = Syncfusion.JavaScript.DataVisualization.SeriesType.Column;

                    break;

                case "Spline":

                    this.Chart1.SeriesType = Syncfusion.JavaScript.DataVisualization.SeriesType.Spline;

                    break;

                case "Area":

                    this.Chart1.SeriesType = Syncfusion.JavaScript.DataVisualization.SeriesType.Area;

                    break;

                default:

                    this.Chart1.SeriesType = Syncfusion.JavaScript.DataVisualization.SeriesType.Line;

                    break;

            }

        }

We have prepared a sample based on this. please find the sample in attached location.

Please let us know if it's helpful.

Thanks,

Akbar Basha.KM 

Attachment: WebApplication2_32f54b7f.zip

[Neeraj]

Hi Akbar Basha K M

Your attached sample is not working its just showing the blank page when I change the properties. I have attached a screen shot of it, and also there are some more requirements related to the customization of charts actually I want to show my all the reports dynamically and fully customized so below are some requirements for the controls I am currently using : 

 Line Chart : 

Reuqirements : 

1. Customization of styles of the chart like BackGround Clor, Axis Color, etc.
   

Query : 

1. As per my requirements in the chart both axis are dynamic, so can we handle it.
2. There can be multiple lines showing multiple data in one chart, then in this case how we are able to customize them.
3. In the chart can we change the colour of the line as per the data limit like for 0-10 line will be RED and for 10-20 line will be Green.

Circular Gauge:

Reuqirements : 

1. Customization option to customize all the properties of Circular Gauge like scale, scale-colour etc.

Query:

1. Scales and Values will be dynamic so how can we handle it.

Tree Map:

Reuqirements : 

1. Fully customized Tree Map

Query : 

1. How can we able to bind data to tree map from database.
2. Can we show multiple colours in one tree map like First Block should be in other colour and Second Block should be in other.

NOTE : CUSTOMIZATION OPTION SHOULD BE FOR ALL CHART CONTROLS.

Please take a look to my requirements and provide me a working sample as per my requirements ASAP.

Thanks.

Neeraj Purohit

Attachment: syncfusion_sample_d5923f11.rar

[Velmurugan S]

Hi Neeraj,

 

Thanks for your update.

 

We would like to inform you that, we do not have default data binding support to our gauge controls. Hence, we have prepared a workaround sample to meet your requirement.  In the sample, we have created “.mdf” local database file and used; then read the data in the code behind page and assigned to the gauge properties. Please find the following code snippet, which is used in the code behind page.

 

     SqlConnection myconnection = new SqlConnection("Data Source=(LocalDB)\\v11.0;AttachDbFilename=|DataDirectory|\\Sample.mdf;Integrated
Security=True");

           
myconnection.Open();

           
string cmd2 = "Select
PointerLength,Radius,Height,Width,PointerValue From Gauge";

           
SqlDataReader dRdr;

 

           
SqlCommand
cmd = new SqlCommand(cmd2,
myconnection);

 

           
dRdr = cmd.ExecuteReader();

 

           
if (dRdr.Read())

           
{

               
this.CircularGauge1.Radius
= Convert.ToDouble(dRdr.GetValue(1));

 

               
this.CircularGauge1.Height
= Convert.ToInt32(dRdr.GetValue(2));

 

               
this.CircularGauge1.Width
= Convert.ToInt32(dRdr.GetValue(3));

 

               
this.CircularGauge1.Scales[0].Pointers[0].Length
= Convert.ToDouble(dRdr.GetValue(1)); 
// Assign the pointerlength value to the
CircularGauge control

 

      
         this.CircularGauge1.Scales[0].Pointers[0].Value
= Convert.ToDouble(dRdr.GetValue(4));  
// Assign the pointer value to the
CircularGauge control

           
}

 

       
}

 

 

And we need to define the gauge control in design page as mentioned below to take the effect of the above code snippet.

 

<ej:CircularGauge ID="CircularGauge1" runat="server">

       
<Scales>

           
<ej:CircularScales>

               
<PointerCollection>

                   
<ej:Pointers>

                   
ej:Pointers>

               
PointerCollection>

           
ej:CircularScales>

       
Scales>

   
ej:CircularGauge>

 

We have also attached the sample prepared with above code snippet, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/directtrac/general/EJWEBGaugeDataBindingSample-369555369.zip

Please let us know if it helps and any further assistance on this.

Regards,

Velmurugan

[Neeraj]

Hi Velmurugan S

Thanks for your sample, however I have already managed to bind the Circular Gauge from Database but your sample will help us to efficient our code. I have mentioned my requirements above  regarding the SyncFusion tools but not getting the sample from your side.

Can you please provide me the sample according to my requirements so that I implement the further functioning, Your quick response will be appreciated.

Thanks

Neeraj Purohit

[Nitish Subramania Reddiar]

Hi Neeraj,

 

Thanks for the update.

 

Query #1: Your attached sample is not working it’s just showing blank page when I change the properties.

 

We have added cdn link for “ej.web.all.min.js” script file in our previous sample to view chart. The sample can be downloaded from the following location.

 

Sample Location: http://www.syncfusion.com/downloads/support/directtrac/130595/WebApplication5348038569.zip

 

Query #2: Customization of styles of chart like background color, axis color, etc.,

 

Background color, axis color, etc., styles of chart can be customized dynamically, please refer the following code snippet to achieve this.

 

[CS]

        //Event to customize axes color

        void TextBox4_Load(object sender, EventArgs e)

        {

            this.Chart1.PrimaryXAxis.AxisLine.Color = TextBox4.Text;

            this.Chart1.PrimaryYAxis.AxisLine.Color = TextBox4.Text;

            foreach(Axis axis in this.Chart1.Axes)

                axis.AxisLine.Color = TextBox4.Text;

        }

 

        //Event to customize chart type

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

        {

            var type = DropDownList1.SelectedItem.Text;

            switch (type)

            {

                case "Column":

                    this.Chart1.SeriesType = Syncfusion.JavaScript.DataVisualization.SeriesType.Column;

                    break;

                case "Spline":

                    this.Chart1.SeriesType = Syncfusion.JavaScript.DataVisualization.SeriesType.Spline;

                    break;

                case "Area":

                    this.Chart1.SeriesType = Syncfusion.JavaScript.DataVisualization.SeriesType.Area;

                    break;

                default:

                    this.Chart1.SeriesType = Syncfusion.JavaScript.DataVisualization.SeriesType.Line;

                    break;

            }

        }

 

        //Event to customize chart title

        protected void text(object sender, EventArgs e)

        {

            this.Chart1.Title.Text = TextBox1.Text;

        }

 

        //Event to customize chart background

        protected void text2(object sender, EventArgs e)

        {

            this.Chart1.ChartArea.Background = TextBox2.Text;

        }

 

        //Event to customize series color

        protected void text3(object sender, EventArgs e)        {

            this.Chart1.Series[0].Fill = TextBox3.Text;

        }

 

Query #3:  As per my requirements in the chart both axis are dynamic, so can we handle it.

 

Essential ASP.Net Chart supports customizing axis dynamically. We have created a sample to update chart data and axis dynamically and it can be downloaded from the following link.

Sample Location: http://www.syncfusion.com/downloads/support/directtrac/130595/Website1530741217.zip

 

Query #4: There can be multiple lines showing multiple data in one chart, then in this case how we are able to customize them.

 

All the line series representing multiple data can be customized individually.

 

Please refer the following code snippet to achieve your requirement.

[CS]

            //Multiple series to represent multiple data in a single chart

            Series series2 = new Series() {  Fill = "Green", Marker = new Marker() { Shape= ChartShape.Circle, Visible=true } };

            Series series3 = new Series() {  Fill = "Blue", Marker = new Marker() { Shape = ChartShape.Diamond, Visible = true } };

            Series series4 = new Series() {  Fill = "Orange", Marker = new Marker() { Shape = ChartShape.Star, Visible = true } };

 

            for (int i = 0; i < 10; i++)

            {

                series2.Points.Add(new Points(i.ToString(), r.Next(10,20)));

                series3.Points.Add(new Points(i.ToString(), r.Next(30, 45)));

                series4.Points.Add(new Points(i.ToString(), r.Next(55, 60)));

            }

 

            this.Chart1.Series.Add(series2);

            this.Chart1.Series.Add(series3);

            this.Chart1.Series.Add(series4);

 

Query #5: In the chart can we change the color of the line as per the data limit like for 0-10 line will be RED and for 10-20 line will be Green

 

Currently, support for using different colors as data limit is not available in line type series because entire segment draw as single path so we cannot add the color in each segment.

Please find below the update for your queries under TreeMap control.

Query #1:

How can we able to bind data to tree map from database?

The database data can be bounded to TreeMap control. We have prepared a working sample for the same. Please find the same from the below link:

Sample location : http://www.syncfusion.com/downloads/support/directtrac/general/TreeMapSample1948330294.zip

Query #2:

Can we show multiple colours in one tree map like First Block should be in other color and Second Block should be in other?

We have analyzed your requirement for "Different Colors for different blocks in the TreeMap". Since this feature isn’t available in our product, we consider this to be a feature request and we will implement in our upcoming releases.

Please let us know if you have any concerns.

Thanks and Regards,

Nitish S

[Neeraj]

Hi Nitish Subramania Reddiar

Attached sample in Query# and Query#  are again not working, I have attached the screen shot of the error.

For Query #1 you have attached the sample is working, I have one query regarding that sample

1.  In the given sample Line Chart containing multiple lines but there is no option to customize the each line separately,  when I customize the chart it reflects on only one line, so how can we achieve to customize the all line separately.

Thanks.

Neeraj Purohit

Attachment: error_13e9fbf3.rar

[Akbar Basha K M]

Hi Neeraj,

Thanks for your update. We have analyzed your requirement,

Query #1:Attached sample was not working

Response: we have analyzed your attached image, the syncfusion.shared.web dll was not referred in your page that was the lack.

We have added shared.web in your previous attached sample.

The sample can be downloaded from the following link,

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/130459/WebApplication5-1826036803.zip

Query #2: how to customize the each line separately

Response: You can achieve this requirement using as follows,

Code snippet[C#]:

             var index = DropDownList2.SelectedIndex;

            this.Chart1.Series[index].Fill = TextBox3.Text;

We have modified the sample based on this. Please find the sample in following location,

Sample location: http://www.syncfusion.com/downloads/support/directtrac/130459/WebApplication5-797765505.zip

Please let us know if you have any concern.

Thanks,

Akbar Basha KM.