jQuery UI Widgets › Forums › Chart › How to have different chart type per series in each series group
This topic contains 9 replies, has 3 voices, and was last updated by Dimitar 7 years, 11 months ago.
-
Author
-
HI ,
I want a multiple left and right y axis with different chart types for each series.I have 6 series and I want to have the series split two on the right and two on the left
I want it to be as followsLeft axis 1 series 1 : line
Left axis 1 series 2 : Area
Left axis 2 series 1 : lineright axis 1 series 1 : spline
right axis 1 series 2 : splinearea
right axis 2 series 2 : splineareaBelow is the code from your sample page. Can you show me how to do this with the code below?
I cant figure it out. I don’t think it is possible because the series structure doesn’t have a type property. If it did it would be simple.
thanks
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>jqxChart Stacked Column & Spline Area Combination Example</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare chart data as an array
var sampleData = [
{ Day: ‘Monday’, Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: ‘Tuesday’, Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: ‘Wednesday’, Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: ‘Thursday’, Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: ‘Friday’, Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: ‘Saturday’, Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: ‘Sunday’, Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
// prepare jqxChart settings
var settings = {
title: “Fitness & exercise weekly scorecard”,
description: “Time spent in vigorous exercise by activity”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
colorScheme: ‘scheme05’,
borderLineColor: ‘#888888’,
xAxis:
{
dataField: ‘Day’,
unitInterval: 1,
tickMarks:
{
visible: true,
interval: 1,
color: ‘#888888’
},
gridLines:{
visible: false,
interval: 1,
color: ‘#888888’
},
axisSize: ‘auto’
},
valueAxis:
{
visible: true,
unitInterval: 10,
minValue: 0,
maxValue: 100,
title: { text: ‘Time in minutes’ },
tickMarks: {color: ‘#888888’},
gridLines: {color: ‘#888888’},
axisSize: ‘auto’
},
seriesGroups:
[
{
type: ‘splinearea’,
series: [
{ dataField: ‘Goal’, displayText: ‘Personal Goal’, opacity: 0.7 }
]
},
{
type: ‘stackedcolumn’,
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ dataField: ‘Running’, displayText: ‘Running’ },
{ dataField: ‘Swimming’, displayText: ‘Swimming’ },
{ dataField: ‘Cycling’, displayText: ‘Cycling’ }
]
}
]
};
// setup the chart
$(‘#chartContainer’).jqxChart(settings);
});
</script>
</head>
<body class=’default’>
<div id=’chartContainer’ style=”width:850px; height:500px”>
</div>
</body>
</html>Hi gregobleshshcuk,
Please check out the following example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_axis_position.htm?arctic. We hope it is helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi ,
thanks for your link . But it’s not what I was after . If you look at the section below. You have a seriesgroup on the right (which is what I want) both using the same axis but I want tow different chart types (say area and line). This example is only giving me the same type on one axis.{
type: ‘spline’,
valueAxis:
{
title: { text: ‘Index Value’ },
position: ‘right’,
unitInterval: 20,
maxValue: 200,
gridLines: { visible: false },
labels: {
formatSettings:
{
decimalPlaces: 0
},
horizontalAlignment: ‘left’
}
},
series: [
{ dataField: ‘HPI’, displayText: ‘Real Home Price Index’ },
{ dataField: ‘BuildCost’, displayText: ‘Building Cost Index’ }
]
}My real usages is that I want to chart Total CPU % as a area chart and then application CPU % as a line both of these on one axis on the right. Then I want other performance counters like LogicalDisk queues or bytes on the left.
I don’t if this can be done without having an override type value on the series structure. If I take the above and change it to be how I think it could work it would be like this
{
type: ‘area’,
valueAxis:
{
title: { text: ‘Index Value’ },
position: ‘right’,
unitInterval: 20,
maxValue: 200,
gridLines: { visible: false },
labels: {
formatSettings:
{
decimalPlaces: 0
},
horizontalAlignment: ‘left’
}
},
series: [
{ dataField: ‘HPI’, displayText: ‘Real Home Price Index’ },
{ dataField: ‘BuildCost’, displayText: ‘Building Cost Index’, type: ‘line’ }
]
}So in my above sample I would have a seriesgroup which is defined as being on the right with a default chart type as area. In this seriesgroup I have two series which the first one is using the default type of area but the second series is overriding the type to line.
cheers
GregHi Greg,
Here is an example, based on the demo Line Series, but with two series of different types – one ‘line’ and one ‘spline’. Both share the same y-axis.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>jqxChart Line Series Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { datatype: "csv", datafields: [ { name: 'Date' }, { name: 'S&P 500' }, { name: 'NASDAQ' } ], url: '../sampledata/nasdaq_vs_sp500.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // prepare jqxChart settings var settings = { title: "U.S. Stock Market Index Performance", description: "NASDAQ Composite compared to S&P 500", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 50, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'Date', formatFunction: function (value) { return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear(); }, type: 'date', baseUnit: 'month', valuesOnTicks: true, minValue: '01-01-2014', maxValue: '01-01-2015', tickMarks: { visible: true, interval: 1, color: '#BCBCBC' }, unitInterval: 1, gridLines: { visible: true, interval: 3, color: '#BCBCBC' }, labels: { angle: -45, rotationPoint: 'topright', offset: { x: 0, y: -25 } } }, valueAxis: { visible: true, title: { text: 'Daily Closing Price<br>' }, tickMarks: { color: '#BCBCBC' } }, colorScheme: 'scheme04', seriesGroups: [ { type: 'line', series: [ { dataField: 'S&P 500', displayText: 'S&P 500' } ] }, { type: 'spline', series: [ { dataField: 'NASDAQ', displayText: 'NASDAQ' } ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); }); </script> </head> <body class='default'> <div id='chartContainer' style="width: 850px; height: 500px"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi ,
Thanks. I think I didn’t form my question correctly before, sorry .I have create a chart in JSFIDDLE. Here is the link
http://jsfiddle.net/GregGecko/y67n196m/1/If you look at the legend you will see
Left SG1, Series A
Left SG1, series C
Left SG2 , Series B
Left SG3, Series D
Right SG4 Series F
Right SG4, Series H
Right SG5, Series E
Right SG6, Series GWhat I want is
Left SG1, Series A and Left SG1, series C on one axis together on the left
Left SG2 , Series B on a separate axis on the left
Left SG3, Series D on a separate axis on the left
Right SG4 Series F and Right SG4, Series H on one axis together on the right
Right SG5, Series E on a separate axis on the right
Right SG6, Series G on a separate axis on the rightSo the chart should have 3 axis on the left and 3 axis on the right
I basically want to be able to designate a series to any axis left and any chart type together on any axis.
Sorry for the confusion before. I hope you can help .
cheers
Greg OHi Greg O,
Here is how to achieve this: http://jsfiddle.net/Dimitar_jQWidgets/mg8ehxqe/.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar ,
Thnak-you I can see how this is done now.
To summaries
You create a seperate SeriesGroup per series
You set the min and max the same for each series to be displayed on the one axis
You set the first seriesgroup visible = true and all the other seriesgroups which are displayed on the axis as falseThis does the trick . Thanks
THe problem here is clicking on the first legend (Left SG1, Series A) item in your example makes the axis disappear yet legend item Left SG1, series C is still being charted.A suggestion would be to have an override type on each series so as to define the chart type . Like below
{
valueAxis: {
position: ‘right’,
},type: ‘line’,
series: [{
type:’area’,
dataField: ‘e’,
displayText: ‘Right SG5, Series E’
}]
}thanks for your help
Greg OHi Greg O,
Yes, this is the only drawback of this approach. Unfortunately, we cannot provide you with a solution. However, you can disable series toggling by setting the series property enableSeriesToggle to false.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/February 28, 2017 at 1:53 pm How to have different chart type per series in each series group #91965Hi,
Is it possible to have multiple value axis for a stacked column chart? or suggest me a chart type which has multiple value axis and to be look like a stacked column chart.
Thanks
KalyanHi Kalyan,
Unfortunately, this cannot be achieved. Each seriesGroup can have a different value axis. However, ‘stackedcolumn’ series in a single stack are part of the same seriesGroup, thus they share a common value axis. This can be seen in the following demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_stacked_column_series.htm?light.
You may have multiple ‘stackedcolumn’ seriesGroups with different value axes, but their series cannot be stacked together, unfortunately.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.