Dynamic Chart using rangeselector

[AlParticipant]

I am defining a simple line chart in teh following way and the adding points to it dynamically and updating the chart. The chart doesn’t display anything other than updating the axes. Please advice. thanks:

// range-selector based line chart
(function () {
pageData.dataseries = [];
// prepare jqxChart settings
var settings = {
title: “Continuos Series”,
description: “Flow Stats”,
enableAnimations: false,
animationDuration: 1000,
enableAxisTextAnimation: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: pageData.dataseries,
xAxis:
{
dataField: ‘timestamp’,
type: ‘date’,
//type: ‘default’, // unit interval >= tickMarkInterval
baseUnit: ‘millisecond’,
unitInterval: 10000,
showTickMarks: true,
tickMarksInterval: 5000,
gridLinesInterval: 20000,
axisSize: ‘auto’,
minValue: 0,
maxValue: 23,
visible: true,
formatFunction: function (value) {
return $.jqx.dataFormat.formatdate(value, “hh:mm:ss”, ‘en-us’);
},
valuesOnTicks: true,
textRotationAngle: -45,
textOffset: { x: -17, y: 0 },

rangeSelector: {
// renderTo: $(‘#selectorContainer’),
//size: 120,
padding: { /*left: 0, right: 0,*/top: 30, bottom: 0 },
//minValue: new Date(2010, 5, 1),
backgroundColor: ‘white’,
//dataField: ‘Close’,
//baseUnit: ‘month’,
showGridLines: false,
formatFunction: function (value) {
return $.jqx.dataFormat.formatdate(value, “hh:mm:ss”, ‘en-us’);
}
}
},
colorScheme: ‘scheme02’,
// http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-api.htm
seriesGroups:
[
{
type: ‘line’,
columnsGapPercent: 50,
alignEndPointsWithIntervals: true,
valueAxis:
{
minValue: 2060.25,
maxValue: 2080.25,
// unitInterval: 0.125,
formatSettings:
{
decimalPlaces: 3
},
description: ‘Index Value’
},
series: [
{ dataField: ‘value’, displayText: ‘value’, opacity: 1, lineWidth: 2, symbolType: ‘circle’, fillColorSymbolSelected: ‘white’, symbolSize: 2 }
]
}
]
};
// create the chart
pageData.chart = $(‘#chartContainer’).jqxChart(settings);

})();
// end range selector based line chart

[AlParticipant]

Please note that this chart works fine without the use of a range selector. Please advice. Thanks,

[Peter StoevKeymaster]

Hello Al,

In order to learn how to use jqxChart with Range Selector, I would suggest you to review:

1. http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_range_selector_nondate.htm?arctic
2. http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_range_selector.htm?arctic
3. http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_financial_series_candlestick.htm?arctic
4. http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_financial_series_ohlc.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts