[corat@plettMember]

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

[corat@plettMember]

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

[corat@plettMember]

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

[corat@plettMember]

Hi Peter

Is this functionality available yet.
Regards

[corat@plettMember]

Hi Peter
Thank you for your prompt reply. That is exactly what I needed. It works perfectly.
Kind Regards

[corat@plettMember]

Dear Peter
We do not use sample data as per your demo. Here is an example of our code:

How would we implement your example based on our current source

Kind Regards

$(function () {
var lineSource =
{
datatype: “json”,
datafields: [
{ name: ‘UserGrouping’, type: ‘string’ },
{ name: ‘Risks’ },
{ name: ‘RisksPerUser’ }
],
url: ‘/Risk/GetRiskDistributionContent?deptOrUserGroup=’ + @Model.DeptOrUserGroup + ‘&riskLevels=’ + @Model.RiskLevels + ‘&valueType=’ + @Model.ValueType + ”
};
var lineDataAdapter = new $.jqx.dataAdapter(lineSource, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
var Settings = {
title: ‘@Model.ChartCaption’,
description: “”,
backgroundColor: ‘#4d4d4e’,
enableAnimations: true,
showBorderLine: false,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: lineDataAdapter,
categoryAxis:
{
dataField: ‘UserGrouping’,
formatFunction: function (value) {
return value;
},
toolTipFormatFunction: function (value) {
return value;
},
textRotationAngle: 45,
type: ‘default’,
baseUnit: ‘month’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#3891a7’,
unitInterval: 1,
showGridLines: false,
valuesOnTicks: false,
orientation: ‘vertical’
},
seriesGroups:
[
{
type: ‘column’,
showLabels: true,
symbolType: ‘circle’,
formatSettings:
{
decimalPlaces: 0,
},
click: click_bar_event_Level1,
valueAxis:
{
displayValueAxis: true,
description: ”,
gridLinesColor: ‘#bebebe’,
axisSize: ‘auto’,
tickMarksColor: ‘#feb80a’,
formatSettings:
{
decimalPlaces: 0,
}
},
series: [
{ dataField: ‘Risks’, displayText: ‘User Actual Risks’, color: ‘#feb80a’ },
{ dataField: ‘RisksPerUser’, displayText: ‘User Potential Risks’, color: ‘#4882e3’ }
]
}
]
};
$(‘#jqxChart’).jqxChart(Settings);
});

[corat@plettMember]

Hi Peter
Thank you for your reply. I am sorry Peter I explained the issue wrong. It is not that there is anything wrong with what the on click event is doing as per your example. What I would like to achieve when I click on any of the bars as per your example is it to return the value of the Category Axis ie Monday, Tuesday or Wednesday etc. Is this possible?

Kind Regards

[corat@plettMember]

….must add that moving over the bar e.serie.dataField returns the correct result… it is only with the click event that it returns undefined. Thanks

[corat@plettMember]

Hi Peter
Herewith the complete partial code. Hope this makes sense. The click event argument e.serie.dataField returns the series data field name. and not the data value.
Kind Regards

@model Soterion.Dto.Views.Risk.Distribution.RiskDistributionGraphFilterDto

$(function () {
var lineSource =
{
datatype: “json”,
datafields: [
{ name: ‘UserName’, type: ‘string’ },
{ name: ‘Risks’ }
],
url: ‘/Risk/GetRiskDistributionContentLevel2?elementName=77’
//url: ‘/Risk/GetRiskDistributionContentLevel2?elementName=’ + @Model.SelectedItem
};

var lineDataAdapter = new $.jqx.dataAdapter(lineSource, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });

var lineSettings = {
title: ‘@Model.ChartCaption’,
description: “”,
backgroundColor: ‘#4d4d4e’,
enableAnimations: true,
showBorderLine: false,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: lineDataAdapter,
categoryAxis:
{
dataField: ‘UserName’,
formatFunction: function (value) {
return value;
},
toolTipFormatFunction: function (value) {
return value;
},
textRotationAngle: 90,
type: ‘default’,
baseUnit: ‘month’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#3891a7’,
unitInterval: 1,
showGridLines: false,
valuesOnTicks: false,
orientation: ‘vertical’
},
seriesGroups:
[
{
type: ‘column’,
orientation: ‘horizontal’,
showLabels: true,
symbolType: ‘circle’,
formatSettings:
{
decimalPlaces: 0,
},
click: click_bar_event,
valueAxis:
{
flip: true,
displayValueAxis: true,
description: ”,
gridLinesColor: ‘#bebebe’,
axisSize: ‘auto’,
tickMarksColor: ‘#feb80a’,
formatSettings:
{
decimalPlaces: 0,
}
},

series: [
{ dataField: ‘Risks’, displayText: ‘User Actual Risks’, color: ‘#4882e3’ }
]
}
]
};
$(‘#jqxChart’).jqxChart(lineSettings);
function click_bar_event(e) {
bindNewGraphContent(e.serie.dataField);
};
function bindNewGraphContent(seriesIndex) {
$.post(“/Risk/RenderRiskDistributionGrid”, { seriesIndex: seriesIndex }, function (data) {
$(‘#riskTrendGraph’).html(data);
});
}
});

[Author]

Posts