Date formatting - Charts

[miss786]

I am having a little issue, with getting dates to show up in desired (dd-mm-yyyy) format, however they are displayed as 'NaN Nan' on the line chart x-axis. I have added in a 'parseInt' date format but I am not sure if this is a correct approach. Please advice. Many thanks for your help and time.

function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
    if (dataValues.length < 1)
        return;

    var data = new google.visualization.DataTable();
    data.addColumn('string', columnNames.split(',')\[0\]);
    data.addColumn('number', columnNames.split(',')\[1\]);
    data.addColumn('string', columnNames.split(',')\[2\]);
    data.addColumn('datetime', columnNames.split(',')\[3\]);

    for (var i = 0; i < dataValues.length; i++) {

        var date = new Date(parseInt(dataValues\[i\].Date.substr(6), 10));

        data.addRow(\[dataValues\[i\].ColumnName, dataValues\[i\].Value, dataValues\[i\].Type, date\]);
    }

    var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });
    var line = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'PieChartContainer',
        'options': {
            'width': 950,
            'height': 450,
            'legend': 'right',
            'hAxis': {
                'format': "dd-MM-yyyy",
                'hAxis.maxValue': 'viewWindow.max',
                'maxValue': new Date(2014, 05, 30), 'minValue': new Date(2014, 04, 05),
                'viewWindow': { 'max': new Date(2014, 05, 30) },
            },
            'title': chartTitle,
            'chartArea': { 'left': 100, 'top': 100, 'right': 0, 'bottom': 100 },
            'tooltip': { isHtml: true }
        },
        'view': {
            'columns': \[{

                type: 'string',
                label: data.getColumnLabel(3),
                calc: function (dt, row) {
                    var date = new Date(parseInt(dt.getValue(row, 3)));
                    return dateFormatter.formatValue(date);
                }
            }, 1, {
                type: 'string',
                role: 'tooltip',
                calc: function (dt, row) {
                    return 'Name: ' + dt.getValue(row, 0) + ', Decimal Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row, 3);

[thatraja]

miss786 wrote:

however they are displayed as 'NaN Nan' on the line chart x-axis.

The reason is the value is not a numeric.

miss786 wrote:

I have added in a 'parseInt' date format but I am not sure if this is a correct approach.

I think you're getting NAN because you're getting an empty string or null & parsing directly. Just check the result of parseInt("") or parseInt(null) So check the value before sending to Date function. Debug there.

thatraja

Code converters | Education Needed | Improve EverythingNew

[miss786]

Apology for the late response. Thank you very much for your feedback. I manage to get the date value pass the parseInt but however, now I am getting a blank screen on the client-end, with the following warning in the console debug of my chrome browser: event.returnValue is deprecated. Please use the standard event.preventDefault() instead. --> warning

    function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
        if (dataValues.length < 1)
            return;

        var data = new google.visualization.DataTable();
        data.addColumn('string', columnNames.split(',')\[0\]);
        data.addColumn('number', columnNames.split(',')\[1\]);
        data.addColumn('string', columnNames.split(',')\[2\]);
        data.addColumn('datetime', columnNames.split(',')\[3\]);

        for (var i = 0; i < dataValues.length; i++) {

            //var date = new Date(parseInt(dataValues\[i\].Date.substr(6), 10));
            var date = new Date(parseInt(dt.getValue(row, 3)));

            data.addRow(\[dataValues\[i\].ColumnName, dataValues\[i\].Value, dataValues\[i\].Type, date\]);
        }

        // Define a category picker control for the Gender column
        var categoryPicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'CategoryPickerContainer',
            'options': {
                'filterColumnLabel': columnNames.split(',')\[2\],
                'filterColumnIndex': '2',

                'ui': {
                    'labelStacking': 'horizontal',
                    'allowTyping': false,
                    'allowMultiple': false,
                    'caption': categoryCaption,
                    'label': 'Price Type',
                }
            }
        });

        var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });
        var line = new google.visualization.ChartWrapper({
            'chartType': 'LineChart',
            'containerId': 'PieChartContainer',
            'options': {
                'width': 950,
                'height': 450,
                'legend': 'right',
                'hAxis': {
                    'format': "dd-MM-yyyy",
                    'hAxis.maxValue': 'viewWindow.max',
                    'maxV</x-turndown>

[thatraja]

miss786 wrote:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. --> warning

That's warning, possibly you're using new jQuery version. Try previous(your project's) version.

thatraja

Code converters | Education Needed | Improve EverythingNew

[Sunasara Imdadhusen]

for date formatting you may use Date and Time formatting in JavaScript like .Net C# or VB.Net[^]