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

Can you create a single ChartWebControl that renders multiple chart regions?

Thread ID:

Created:

Updated:

Platform:

Replies:

82534 Jun 15,2009 08:17 AM UTC Jul 10,2015 01:57 AM UTC ASP.NET Web Forms (Classic) 11
loading
Tags: Chart
Stephen McCulloch
Asked On June 15, 2009 08:17 AM UTC

We would like to build a WebChartControl that displays a chart with bars and lines, but then be able to display the up to three of these bar and line charts.

Can this be done in a single instance of a WebChartControl? Or will we have to generate multiple WebChartControls?

Thanks
Stephen

Manimala S [Syncfusion]
Replied On June 17, 2009 12:09 PM UTC

Hi Stephen,

Thanks for using Essential Chart.

I suppose that you need to plot graph with some points initially in form load and then you want to remove some of the points and show the rest, we can do this with single chart control instance. I have created a simple sample to demonstrate this. Kindly, get the sample from the following location.

Sample File

Thanks,
Manimala.


Stephen McCulloch
Replied On June 18, 2009 07:20 AM UTC

That's not what I mean.

Lets say I want to format a SINGLE WebChartControl that has 2 Y-axis' with different ranges and I plot ChartSeries on the first axis with columns, and the second axis with lines.

But lets says its possible to make multiple "ChartWebArea"'s within a single ChartWebControl. This way both ChartWebControls could potentially use the same configurations mentioned above, I just need to specify which ChartWebArea a particular ChartSeries should be added to.

Currently we need to create 2 ChartWebControls to do this and manage both separately.

Perhaps its not even possible? I'm just curious if this is something I can do.

Stephen

Manimala S [Syncfusion]
Replied On June 18, 2009 01:08 PM UTC

Hi Stephen,

Sorry for the misunderstanding.

I have got your requirement clearly. We have support for multiple axis in chart. I have created a simple sample to demonstrate this and here is the sample link.

http://files.syncfusion.com/support/Chart.Web/v7.3.0.1/F82534_sample/main.htm

Kindly, let me know if it satisfies your requirement.

Thanks,
Manimala.


Stephen McCulloch
Replied On June 19, 2009 09:38 AM UTC

I'm afraid that's still not what I mean.

Please see the attached image. This is what I'm trying to achieve. I can already generate multiple axis, that's not the problem. I want MULTIPLE charts in one control. If it is possible.

Stephen



multiple_charts_5821a14c.jpg

Manimala S [Syncfusion]
Replied On June 23, 2009 01:19 PM UTC

Hi Stephen,

We regret for the delay in responding.

I have created a sample to satisfy your requirement. Kindly, get the sample from the following Link.

Sample File

Kindly, let me know if your requirement is met.

Thanks,
Manimala.

Paul Wheeler
Replied On July 6, 2015 07:04 PM UTC

I'm afraid that's still not what I mean.

Please see the attached image. This is what I'm trying to achieve. I can already generate multiple axis, that's not the problem. I want MULTIPLE charts in one control. If it is possible.

Stephen



multiple_charts_5821a14c.jpg

The screenshot Stephen uploaded is exactly what I am trying to do.
http://www.syncfusion.com/uploads/user/uploads/multiple_charts_5821a14c.jpg

However, the sample file Manimala uploaded doesn't seem to work anymore. Is this possible with the JavaScript chart control?
http://js.syncfusion.com/demos/web/#!/azure/chart/column

Thanks!
-paul


Praveen [Syncfusion]
Replied On July 7, 2015 01:26 PM UTC

Hi Stephen,

We have analyzed your reported query.

We are not clear with your requirement weather to display multiple charts in a single page or multiple axes in a single chart. Also share some details regarding this query. This will help us to provide the exact sample based on your requirement.


And also we have provide the solution for both the approached and attached it below


Solution-1:

If you want to display multiple charts graphs in single page, you have to specify two div elements separately in sample, because chart controls are rendered in separate div elements. The code snippet is given below,

Code Snippet:

[JS]

<div id="container"></div>


$("#container").ejChart(

{

……………………………….

series:

[

{

points: [{ x: 1, y: 10 }, { x: 3, y: 25 }, { x: 5, y: 15 },

{ x: 7, y: 30 }, { x: 9, y: 28 }],

type:"line",


}

],

……………………………………

})



<div id="container1"></div>


$("#container1").ejChart(

{

……………………………………..

series:

[

{

points: [{ x: 1, y: 100 }, { x: 3, y: 300 }, { x: 5, y: 55 },

{ x: 7, y: 200 }, { x: 9, y: 320 }

],

type: "column"


}

],

…………………………………………….


});


Solution-2:


Here the chart is rendered with multiple axes using rowIndex property in axes.

The code snippet is given below;

Code Snippet:

[JS]

$("#container").ejChart(

{

………………………..

rowDefinitions:

[


{

rowHeight: 50,

lineColor: "#A8A8A8",

lineWidth: 1,

unit: 'percentage'

}

],

axes:

[

{


rowIndex: "1",

}

],

…………………………….


});


We have prepared a sample based on your query and you can find the sample in below location


Sample-1: http://www.syncfusion.com/downloads/support/forum/82534/Multiple_Div-1449112072.zip



Sample-2: http://www.syncfusion.com/downloads/support/forum/82534/multipleAxesarea-1516961264.zip



Please let us know if you have any concern.

Thanks,

Praveenkumar


Paul Wheeler
Replied On July 7, 2015 03:22 PM UTC

For anyone else looking, I was able to combine columns and lines by configuring my series as seen below. However, I am using the ejChart, not Asp.net Classic.

$("#container").ejChart({
  series: [{
    type: "column",
    marker: {visible:true}
  },{
    type: "column",
    marker: {visible:true}
  },{
    type: "line",
    marker: {visible:true}
  }]
});


Vinothkumar Arumugam [Syncfusion]
Replied On July 9, 2015 07:31 AM UTC

Hi Paul,

Your requirements have been achieved. Syncfusion ejChart easily customized by multiple series in single chart. Multiple series configuration depends on Axis. Multiple series can be created by following ways:
1. PrimaryX/PrimaryY Axis.
2. Secondary Axes collections.
3. ColumnDefinition/RowDefinition.
Based on your reported query we found that you are using first scenario. We have prepared a sample based on that.
Screenshot of the attached sample:


In the above figure three series types like column, column, line depends on PrimaryX/PrimarY Axis.
Limitations:

·          Other types of series cannot be combined into “bar” series. It always single or combine same type itself.

·          Accumulation series types cannot be combined [Pie, Pyramid, Funnel, and Doughnut] into other type of series. Because these type of series not depends on Axes collections.

Please find the below sample. It can be downloading from the following sample link.

 MultipleSeries

Kindly refer the online documentation links for more details of Chart series types.

http://helpjs.syncfusion.com/js/chart/chart-types

http://helpjs.syncfusion.com/js/chart/axis


Please let us know if you have any queries.

Thanks,

Vinothkumar Arumugam.



Paul Wheeler
Replied On July 9, 2015 12:04 PM UTC

Perfect, the ejChart is working beautifully, thanks!

Vinothkumar Arumugam [Syncfusion]
Replied On July 10, 2015 01:57 AM UTC

Hi Paul,
Thanks for the update.
Please let us know if you have any further query on this.
Thanks,
Vinothkumar Arumugam.

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.

Warning Icon 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.Close Icon

;