jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts

  • eragon
    Participant

    Hi Dimitar

    Thank’s for your response, but i tried it’s doesn’t work properly, something wrong with my code??

    <script type=”text/javascript”>
    $(document).ready(function () {
    var initGrid = function () {
    var source =
    {
    datatype: “csv”,
    datafields: [
    { name: ‘Date’ },
    { name: ‘S&P 500’ },
    { name: ‘NASDAQ’ }
    ],
    url: ‘../sampledata/nasdaq_vs_sp500.txt’
    };

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

    $(“#jqxGrid”).jqxGrid(
    {
    width: ‘100%’,
    height: ‘84%’,
    source: dataAdapter,
    columns: [
    { text: ‘Date’, datafield: ‘Date’, cellsformat: ‘d’, width: 250 },
    { text: ‘S&P 500’, datafield: ‘S&P 500’, width: 150 },
    { text: ‘NASDAQ’, datafield: ‘NASDAQ’ }
    ]
    });

    $(“#bexp”).click(function () {
    $(“#jqxGrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
    });

    }

    var initChart = function () {
    // prepare the data
    var source =
    {
    datatype: “csv”,
    datafields: [
    { name: ‘Date’ },
    { name: ‘S&P 500’ },
    { name: ‘NASDAQ’ }
    ],
    url: ‘../sampledata/nasdaq_vs_sp500.txt’
    };

    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
    var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];

    // prepare jqxChart settings
    var settings = {
    title: “U.S. Stock Market Index Performance (2011)”,
    description: “NASDAQ Composite compared to S&P 500”,
    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: 1,
    tickMarksColor: ‘#888888’,
    unitInterval: 1,
    showGridLines: true,
    gridLinesInterval: 3,
    gridLinesColor: ‘#888888’,
    valuesOnTicks: false
    },
    colorScheme: ‘scheme04’,
    seriesGroups:
    [
    {
    type: ‘line’,
    valueAxis:
    {
    unitInterval: 500,
    minValue: 0,
    maxValue: 3000,
    displayValueAxis: true,
    description: ‘Daily Closing Price’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’
    },
    series: [
    { dataField: ‘S&P 500’, displayText: ‘S&P 500’ },
    { dataField: ‘NASDAQ’, displayText: ‘NASDAQ’ }
    ]
    }
    ]
    };

    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);
    }

    // init widgets.
    var initWidgets = function (tab) {
    switch (tab) {
    case 0:
    initGrid();
    break;
    case 1:
    initChart();
    break;
    }
    }

    $(‘#jqxTabs’).jqxTabs({ width: 600, height: 560, initTabContent: initWidgets });

    });
    </script>


    eragon
    Participant

    Hi Dimitar

    I don’t have error when running this code, and the grid populate is correctly, thank’s

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