jQuery UI Widgets › Forums › Chart › Chat not rendering properly
Tagged: Chart Data
This topic contains 1 reply, has 1 voice, and was last updated by nitrags 13 years ago.
-
Author
-
Here is the data that I am using to render chart. Basically if the data has more than 13-14 lines the axis stars skipping. Any help is appreciated.
.jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-tooltip-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
{
fill: #ffffff;
color: #ffffff;
}$(document).ready(function () {
var theme = getTheme();
var parentsLength = $(“#jqxgrid”).parents().length;
var PortfolioSummarySimpleDAta =
[
{ “Region”: “NA1”, “Peril”: “WS”, “Perspective”: “Re Net”, “StdDev”: 7144852.28766816, “ExpectedLoss”: 5164902.46431122, “CV”: 4059.3833469919 },
{ “Region”: “NA2”, “Peril”: “WS”, “Perspective”: “Re Ceded”, “StdDev”: 19904.2917181813, “ExpectedLoss”: 4059.3990633445, “CV”: 95467381.903260657 },
{ “Region”: “NA3”, “Peril”: “WS”, “Perspective”: “Re 100%”, “StdDev”: 196321650.289551, “ExpectedLoss”: 95467381.52120249, “CV”: 7144852.056426469 },
{ “Region”: “NA4”, “Peril”: “WS”, “Perspective”: “Re Gross”, “StdDev”: 7158717.5120722707, “ExpectedLoss”: 5168961.86337456, “CV”: 19904.3849429927},{ “Region”: “NA5”, “Peril”: “EQ”, “Perspective”: “Re Net”, “StdDev”: 7144852.28766816, “ExpectedLoss”: 5164902.46431122, “CV”: 4059.3833469919 },
{ “Region”: “NA6”, “Peril”: “EQ”, “Perspective”: “Re Ceded”, “StdDev”: 19904.2917181813, “ExpectedLoss”: 4059.3990633445, “CV”: 95467381.903260657 },
{ “Region”: “NA7”, “Peril”: “EQ”, “Perspective”: “Re 100%”, “StdDev”: 196321650.289551, “ExpectedLoss”: 95467381.52120249, “CV”: 7144852.056426469 },
{ “Region”: “NA8”, “Peril”: “EQ”, “Perspective”: “Re Gross”, “StdDev”: 7158717.5120722707, “ExpectedLoss”: 5168961.86337456, “CV”: 19904.3849429927 },{ “Region”: “AU9”, “Peril”: “WS”, “Perspective”: “Re Net”, “StdDev”: 7144852.28766816, “ExpectedLoss”: 5164902.46431122, “CV”: 4059.3833469919 },
{ “Region”: “AU10”, “Peril”: “WS”, “Perspective”: “Re Ceded”, “StdDev”: 19904.2917181813, “ExpectedLoss”: 4059.3990633445, “CV”: 95467381.903260657 },
{ “Region”: “AU11”, “Peril”: “WS”, “Perspective”: “Re 100%”, “StdDev”: 196321650.289551, “ExpectedLoss”: 95467381.52120249, “CV”: 7144852.056426469 },
{ “Region”: “AU12”, “Peril”: “WS”, “Perspective”: “Re Gross”, “StdDev”: 7158717.5120722707, “ExpectedLoss”: 5168961.86337456, “CV”: 19904.3849429927},{ “Region”: “NA14”, “Peril”: “EQ”, “Perspective”: “Re Net”, “StdDev”: 7144852.28766816, “ExpectedLoss”: 5164902.46431122, “CV”: 4059.3833469919 },
{ “Region”: “NA15”, “Peril”: “EQ”, “Perspective”: “Re Ceded”, “StdDev”: 19904.2917181813, “ExpectedLoss”: 4059.3990633445, “CV”: 95467381.903260657 },
{ “Region”: “NA16”, “Peril”: “EQ”, “Perspective”: “Re 100%”, “StdDev”: 196321650.289551, “ExpectedLoss”: 95467381.52120249, “CV”: 7144852.056426469 },
{ “Region”: “NA17”, “Peril”: “EQ”, “Perspective”: “Re Gross”, “StdDev”: 7158717.5120722707, “ExpectedLoss”: 5168961.86337456, “CV”: 19904.3849429927 },];
var PortfolioSummarySimpleDAta2 =
[{ “Region”: “CB”, “Peril”: “EQ”, “Perspective”: “Re Net”, “StdDev”: 1644603.97272874, “ExpectedLoss”: 581778.29854372, “CV”: 2.8268568574 },
{ “Region”: “CB”, “Peril”: “EQ”, “Perspective”: “Re Ceded”, “StdDev”: 2972.1155932359, “ExpectedLoss”: 121.9865951096, “CV”: 24.3642802766 },
{ “Region”: “CB”, “Peril”: “EQ”, “Perspective”: “Re 100%”, “StdDev”: 44302101.6917414, “ExpectedLoss”: 9517849.9252033513, “CV”: 4.654633351 },
{ “Region”: “CB”, “Peril”: “EQ”, “Perspective”: “Re Gross”, “StdDev”: 1645268.14612124, “ExpectedLoss”: 581900.285138829, “CV”: 2.8274056366 }
];// prepare jqxChart settings
var settings = {
title: “TEST HEADING”,
description: “TEST DESC”,
axisSize: ‘auto’,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: PortfolioSummarySimpleDAta,
backgroundColor: ‘Gray’,enableAnimations: true,
categoryAxis:
{
dataField: ‘Region’,
showGridLines: false
},
colorScheme: ‘scheme09’,
seriesGroups:
[
{
type: ‘column’,
columnsGapPercent: 30,
seriesGapPercent: 0,
valueAxis:
{
minValue: 0,
maxValue: 10000000,
unitInterval: 1000000,
description: ‘TestDESC’
},
series: [
{ dataField: ‘StdDev’, displayText: ‘StdDev’ },
{ dataField: ‘ExpectedLoss’, displayText: ‘StdDev’ },
{ dataField: ‘CV’, displayText: ‘CV’ },]
}
,
{
type: ‘line’,
valueAxis:
{
unitInterval: 10000,
displayValueAxis: false,
description: ‘StdDev’
},
series: [
{ dataField: ‘StdDev’, displayText: ‘-StdDev-‘, opacity: 0.3 }
]
}
]
};// prepare jqxChart settings
var settings2 = {
title: “Fitness & exercise weekly scorecard”,
description: “Time spent in vigorous exercise”,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: PortfolioSummarySimpleDAta2,
enableAnimations: true,
categoryAxis:
{
dataField: ‘Region’,
showGridLines: false
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘column’,
columnsGapPercent: 30,
seriesGapPercent: 0,
valueAxis:
{
minValue: 0,
maxValue: 10000000,
unitInterval: 1000000,
description: ‘Time in minutes’
},
series: [
{ dataField: ‘StdDev’, displayText: ‘StdDev’ },
{ dataField: ‘ExpectedLoss’, displayText: ‘StdDev’ },]
}
,
{
type: ‘line’,
valueAxis:
{
unitInterval: 10000,
displayValueAxis: false,
description: ‘StdDev’
},
series: [
{ dataField: ‘StdDev’, displayText: ‘-StdDev-‘, opacity: 0.3 }
]
}
]
};// select the chartContainer DIV element and render the chart.
$(‘#chartContainer’).jqxChart(settings);
$(‘#chartContainer2’).jqxChart(settings2);
$(‘#chartContainer2’).jqxChart({ backgroundColor: ‘Gray’ });//Document ready function close
});
This has already answered in http://www.jqwidgets.com/community/topic/x-axis-labeling-for-chart-column-are-not-correctly-labeled/
Sorry for a duplicate post. This works!!! Thank you
-
AuthorPosts
You must be logged in to reply to this topic.