changing values from months to years…

[mishovicMember]

Hi I am using the line chart series (the one showing US Stock Market Index Peformance 2011) and am trying to change the x-axis values from months to years for my data…I want to run values from 2001 to 2014 and have the tickmarks and vertical grid lines line up directly above the year values…I have tried just substituing the months for numerical years but it messes up the sequence: it starts with 2001 (the previous JAN value) then runs the years backwards from 2013 etc etc …..the data I want to run is 4 values per year i.e. each financial quarter in teh format 2001/1/1,1126,1127,942 then 2001/4/1,1126,1127,942 then 2001/7/1,1126,1127,942 and finally 2001/10/1,1126,1127,942

here is my amended script code:

$(document).ready(function () {
// prepare the data
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Date’ },
{ name: ‘CIM TOTAL RETURN (DRIP)’ },
{ name: ‘CIM TOTAL RETURN’ },
{ name: ‘MCSI AC’ }
],
url: ‘chartdata/dividendincome/divincgrowth100feb13.txt’
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
var months = [‘2001’, ‘2011’, ‘2010’, ‘2009’, ‘2008’, ‘2007’, ‘2006’, ‘2005’, ‘2004’, ‘2003’, ‘2002’];
// prepare jqxChart settings
var settings = {
title: “chart title”,
description: “”,
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
dataField: ‘Date’,
formatFunction: function (value) {
return months[value.getMonth()];
},
toolTipFormatFunction: function (value) {
return value.getDate() + ‘-‘ + months[value.getMonth()];
},
type: ‘date’,
baseUnit: ‘month’,
showTickMarks: true,
tickMarksInterval: 11,
tickMarksColor: ‘#888888’,
unitInterval: 5.5,
showGridLines: true,
gridLinesInterval: 11,
gridLinesColor: ‘#888888’,
valuesOnTicks: true
},
colorScheme: ‘scheme08’,
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
unitInterval: 500,
minValue: 0,
maxValue: 7000,
displayValueAxis: true,
description: ‘$USD Value (net of all fees/expenses)’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘CIM TOTAL RETURN (DRIP)’, displayText: ‘CIM TOTAL RETURN (DRIP)’ },
{ dataField: ‘CIM TOTAL RETURN’, displayText: ‘CIM TOTAL RETURN’ },
{ dataField: ‘MCSI AC’, displayText: ‘MCSI AC’ }
]
}
]
};
// setup the chart
$(‘#jqxChart3’).jqxChart(settings);
});

PLEASE HELP!!!

[Peter StoevKeymaster]

Hi,

Here’s a sample of a Chart with Years: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_spline_series.htm?web. I suppose it will be better to start from it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[mishovicMember]

Hi Peter yes thx I am now using that chart BUT I need y-axis values from 1000-7000 in 1000 increments and need to ditch the Index Value altogether…can’t figure how to do that…have figured the x axis values ok…could you help…here is my amended code:

$(document).ready(function () {
// prepare the data
var source =
{
datatype: “tab”,
datafields: [
{ name: ‘Year’ },
{ name: ‘HPI’ },
{ name: ‘BuildCost’ },
{ name: ‘Population’ },
{ name: ‘Rate’ }
],
url: ‘chartdata/homeprices.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: “”,
description: “”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 25, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
text: ‘Category Axis’,
textRotationAngle: 0,
dataField: ‘Year’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 1,
showGridLines: true,
gridLinesInterval: 1,
gridLinesColor: ‘#888888’,
//axisSize: ‘auto’,
minValue: 2001,
maxValue: 2014
},
colorScheme: ‘scheme04’,
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
unitInterval: 1000,
description: ‘U.S. Population (millions)’,
showGridLines: false
},
series: [
{ dataField: ‘Population’, displayText: ‘Population’ }
]
},
{
type: ‘spline’,
valueAxis:
{
unitInterval: 100,
displayValueAxis: false,
displayGridLines: false
},
series: [
{ dataField: ‘Rate’, displayText: ‘Interest Rate’ }
]
},
{
type: ‘spline’,
valueAxis:
{
unitInterval: 100,
description: ‘Index Value’
},
series: [
{ dataField: ‘HPI’, displayText: ‘Real Home Price Index’ },
{ dataField: ‘BuildCost’, displayText: ‘Building Cost Index’ }
]
}
]
};
// setup the chart
$(‘#jqxChart3’).jqxChart(settings);
});

[Peter StoevKeymaster]

Hi valueAxis,

I think that you should specify the minValue, maxValue and unitInterval parameters for the valueAxis is you want to restrict it in some ranges.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts