jQWidgets Forums
jQuery UI Widgets › Forums › Chart › Line Chart Combined with Stacked Column
This topic contains 7 replies, has 4 voices, and was last updated by Peter Stoev 12 years, 1 month ago.
-
Author
-
I am looking at your example for a Column Series Chart . http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm?(classic)#demos/jqxchart/javascript_chart_column_series.htm The example uses SeriesGroups of type column and type line. I have tried using the same method to create a chart with Seriesgroups of type stackedcolumn and type line. the line series is stacked on top of my column series ie column with value 79 and line value 29 will plot the line at 108. Is this a known behaviour.
Kind Regards
Hello corat@plett,
Please provide us with a code sample, so that we may test for the reported behaviour.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar
Here the code:
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Creditors’ },
{ name: ‘RealEstate’ },
{ name: ‘Average’ }
],
url: ‘/GetChartContent?deptOrUserGroup=’ + @Model.DeptOrUserGroup + ‘&valueType=’ + @Model.ValueType + ”
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error);} });
// prepare jqxChart settings
var settings = {
title: “Economic comparison”,
description: “GDP and Debt in 2010”,
showLegend: true,
enableAnimations: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
dataField: ‘Country’,
showGridLines: true
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘stackedcolumn’,
columnsGapPercent: 50,
valueAxis:
{
unitInterval: 5000,
displayValueAxis: true,
description: ‘Department Figures’
},
series: [
{ dataField: ‘Creditors’ , displayText: ‘Creditors’},
{ dataField: ‘RealEstate’, displayText: ‘Real Estate’ }
]
},
{
type: ‘line’,
valueAxis:
{
unitInterval: 10,
displayValueAxis: false,
description: ‘Average’
},
series: [
{ dataField: ‘Average’, displayText: ‘Average’, opacity:0.3 }
]
}
]
};
// setup the chart
$(‘#jqxChart’).jqxChart(settings);
});Kind Regards
Hi corat@plett,
Here is the aforementioned demo, but with stacked columns:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head> <title id='Description'>jqxChart Column Series Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data as an array var source = { datatype: "csv", datafields: [ { name: 'Country' }, { name: 'GDP' }, { name: 'DebtPercent' }, { name: 'Debt' } ], url: '../sampledata/gdp_dept_2010.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); // prepare jqxChart settings var settings = { title: "Economic comparison", description: "GDP and Debt in 2010", showLegend: true, enableAnimations: true, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { dataField: 'Country', showGridLines: true }, colorScheme: 'scheme01', seriesGroups: [ { type: 'stackedcolumn', columnsGapPercent: 50, valueAxis: { unitInterval: 5000, displayValueAxis: true, description: 'GDP & Debt per Capita($)' }, series: [ { dataField: 'GDP', displayText: 'GDP per Capita' }, { dataField: 'Debt', displayText: 'Debt per Capita' } ] }, { type: 'line', valueAxis: { unitInterval: 10, displayValueAxis: false, description: 'Debt (% of GDP)' }, series: [ { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)', opacity: 0.3 } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }); </script></head><body class='default'> <div style='height: 600px; width: 682px;'> <div id='host' style="margin: 0 auto; width: 680px; height: 400px;"> <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px; top: 0px;"> </div> </div> </div></body></html>
It works fine on our side. Please make sure you use the latest version of jQWidgets – 2.8.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar
We finally got the line chart to display. However now we have one problem, the line is behind the stacked columns. Any idea if there is a property setting for this in order for the line to display in front of the columns.Kind Regards
Hi Dimitar
Just to add to my previous post. I found this piece of code $(“.jqx-tooltip”).css(“z-index”, 99999); to set the z-index of the tooltip. Is there anything like this to set the z-index of the line.Kind Regards
$query = “SELECT * FROM `Invoices` ORDER BY OrderDate LIMIT 0 , 100”;
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());// get data and store in a json array
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$orders[] = array(
‘OrderDate’ => $row[‘OrderDate’],
‘ProductName’ => $row[‘ProductName’],
‘Quantity’ => $row[‘Quantity’]
);
}echo json_encode($orders);
how do i make it work for a stacked bar chart
Hi,
For using jqxChart with MySQL, see: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/chart.htm?web
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.