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

[Stephen McCulloch]

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]

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]

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]

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]

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]

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]

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]

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

---

PW Paul Wheeler 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}

  }]

});

---

VA Vinothkumar Arumugam Syncfusion Team 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.

---

PW Paul Wheeler July 9, 2015 12:04 PM UTC

Perfect, the ejChart is working beautifully, thanks!

---

VA Vinothkumar Arumugam Syncfusion Team 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.

[Paul Wheeler]

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]

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]

Perfect, the ejChart is working beautifully, thanks!

[Vinothkumar Arumugam]

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