jQuery UI Widgets Forums Chart changing values from months to years…

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • mishovic
    Member

    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 Stoev
    Keymaster

    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/


    mishovic
    Member

    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 Stoev
    Keymaster

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.