Date Format : Chart with range selector

[brogenParticipant]

Hello,

I want to make a chart, with range selector, as descripted at : http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_events_range_selector.htm

But, I have a different date format, and less informations…

How can I use this date format please (YYYY-m-d hh:mm) ?

exemple :

2015-09-07 00:00 3010
2015-09-07 00:05 3000
2015-09-07 00:10 3050
2015-09-07 00:15 3140
2015-09-07 00:20 3130
2015-09-07 00:25 310
2015-09-07 00:30 310

Thanks for help,

[brogenParticipant]

Hi again,

Sorry, but I can’t edit my post…

So, i have another question : I want disable the events texte area. Wich code do I need to clean ? I need the cleanest code as possible.

Thanks again for help 🙂

[VladimirParticipant]

Hello brogen,

To events area is handled by the following code:

$('#chartContainer').jqxChart(settings)
                .on('click mouseover mouseout toggle rangeSelectionChanging rangeSelectionChanged refreshBegin refreshEnd', function (event) {
                    if (event.args)
                        dumpEventInfo(event);
                });

It uses the dumpEventInfo function so if you remove the handler you can remove that function as well.
And then you can remove the textarea from the html
<textarea id="eventsTextArea" style="width:800px; height: 200px"></textarea>

Regarding your fist question.
Take a look at the formatFunction declarations. They are used to specify how the date is formatted, so you can edit them to fit your needs.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Hi Vladimir,

Thanks for your answer.

I’m still looking for changing the date format.

Any help ?

Regards

[VladimirParticipant]

Hello brogen,

As I have explained in the second part of my post, the date format is specified in the formatFunction function declarations. Edit them according to your own requirements.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Hi Vladimir,

Thanks again for your answer, and sorry for did not see your 1st answer.

I’m sorry, but… I don’t understand how can I have to use the formatFunction :s to change the date format reading… Any advice ?

Thanks for all.

[VladimirParticipant]

Hello brogen,

Here is a sample formatFunction copied from the file you have specified:

                     formatFunction: function (value) {
                                return value.getDate() + '-' + months[value.getMonth()] + '<br>' + value.getFullYear().toString();
                            }

What it does is that it returns a string with the date contained in the input variable value, where it gets the day (getDate() method) adds a slash + '-' + and then adds themonths[value.getMonth()], and then adds a new line, and the value of the year value.getFullYear().toString(), where the months array is defined in the beginning of the application:
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

So if you want to display the Month first, and the day second, you need to change their position in the string.
e.g.
return months[value.getMonth()] + '-' + value.getDate()

If you want it to display in any other way you can extract whatever information you need from the value variable and place it in the return string.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Hello Vladimir.

Thanks again for this accurate answer ! I understand better how display value I want to see !

But, I still have a problem. As I said in my first post, my date contains hours and minutes, after a space… as you can see below.
2015-09-07 00:20,3130
2015-09-07 00:25,310
…

In my chart, when I delete hh:mm values are displayed.

But, when hh:mm stays in the CSV, values are not displayed in my chart.

I don’t know how to say “1st column is a date WITH hours:minutes”

I’m looking for the solution for 3-4 days now, but I’m not really sure how to search ^^. I’m a newbie in “web language coding”, so please be indulgent with me ^^

Thanks again for you help(s)

[VladimirParticipant]

Hello brogen,

Please provide a fiddle with a sample of your code and data.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Hello again,

So, what I want doesn’t look so complicate, but I can’t reach it with my low knowledge…

I want the same chart as : this chart

But, my CSV just have 2 columns (date,value > YYYY-mm-dd hh:mm,0000)
Values always begins from “today -2” (or the day before yesterday) at 00:00 to today at 00:00. I have a value every 5 minutes. (I will have 1 chart by day > yes I will have 365 charts in one year, not a problem ;-))
[If you’re interested by that, it’s my daily electric comsumption, in Wh. I make 1 export by day, and my script format datas to be readable]

At 1st, I made something like : here But I need date and time write on xAxis, and in this example, it’s impossible to read…
To, I thought the range selector was the best way to do that. And I like the possibily to zoom on a particular time

At the moment, I don’t have custom the code so much. You can have a look too at :

Thanks again for your help and your time you are wasting for me ^^.

Index.html

<!DOCTYPE html />
<html lang=”en”>
<head>
<title id=’Description’>jqxChart Range Selector Example</title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.rangeselector.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Date’ },
{ name: ‘Open’ },
{ name: ‘High’ },
{ name: ‘Low’ },
{ name: ‘Close’ },
{ name: ‘Volume’ },
{ name: ‘AdjClose’ }
],
url: ‘wattcher.csv’
};
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’];
var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return ‘<DIV style=”text-align:left”><b>Date: ‘ +
categoryValue.getDate() + ‘-‘ + months[categoryValue.getMonth()] + ‘-‘ + categoryValue.getFullYear() +
‘</b><br />Open price: $’ + dataItem.Open +
‘</b><br />Close price: $’ + dataItem.Close +
‘</b><br />Daily volume: ‘ + dataItem.Volume +
‘</DIV>’;
};
// prepare jqxChart settings
var settings = {
title: “Tesla Motors Stock Price”,
description: “(June 2010 – March 2014)”,
enableAnimations: true,
animationDuration: 1500,
enableCrosshairs: true,
padding: { left: 5, top: 5, right: 30, bottom: 5 },
titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
dataField: ‘Date’,
minValue: new Date(2015, 08, 31),
maxValue: new Date(2015, 09, 31),
type: ‘date’,
baseUnit: ‘day’,
labels:
{
formatFunction: function (value) {
return value.getDate() + ‘-‘ + months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
}
},
rangeSelector: {
// Uncomment the line below to render the selector in a separate container
//renderTo: $(‘#selectorContainer’),
size: 80,
padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
minValue: new Date(2010, 5, 1),
backgroundColor: ‘white’,
dataField: ‘Close’,
baseUnit: ‘month’,
gridLines: { visible: false },
serieType: ‘area’,
labels: {
formatFunction: function (value) {
return months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
}
}
}
},
valueAxis:
{
title: { text: ‘Price per share [USD]<br><br>’ },
labels: { horizontalAlignment: ‘right’ }
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘line’,
toolTipFormatFunction: toolTipCustomFormatFn,
series: [
{ dataField: ‘Close’, displayText: ‘Close Price’, lineWidth: 1, lineWidthSelected: 1 }
]
}
]
};
$(‘#chartContainer’).jqxChart(settings).
on(‘rangeSelectionChanging’, function (event) {
var args = event.args;
args.instance.description = args.minValue.getFullYear() + ” – ” + args.maxValue.getFullYear();
});
});
</script>
</head>
<body class=’default’>
<div>
<div id=’chartContainer’ style=”width:800px; height:500px;”>
</div>
<!– you can optionally render the selecor in this container –>
<div id=’selectorContainer’ style=”width:500px; height:100px;”>
</div>
</div>
</body>
</html>

CSV :

2015-09-15 00:00,2910
2015-09-15 00:05,3090
2015-09-15 00:10,3080
2015-09-15 00:15,270
2015-09-15 00:20,270
2015-09-15 00:25,180
2015-09-15 00:30,180
2015-09-15 00:35,170
2015-09-15 00:40,180
2015-09-15 00:45,170
2015-09-15 00:50,180
2015-09-15 00:55,190
2015-09-15 01:00,170
2015-09-15 01:05,180
2015-09-15 01:10,200
2015-09-15 01:15,170
2015-09-15 01:20,270
2015-09-15 01:25,270
2015-09-15 01:30,270
2015-09-15 01:35,270
2015-09-15 01:40,170
2015-09-15 01:45,170
2015-09-15 01:50,160
2015-09-15 01:55,160
2015-09-15 02:00,160
2015-09-15 02:05,160
2015-09-15 02:10,160
2015-09-15 02:15,3110
2015-09-15 02:20,160
2015-09-15 02:25,160
2015-09-15 02:30,160
2015-09-15 02:35,160
2015-09-15 02:40,260
2015-09-15 02:45,260
2015-09-15 02:50,250
2015-09-15 02:55,250
2015-09-15 03:00,3160
2015-09-15 03:05,160
2015-09-15 03:10,160
2015-09-15 03:15,160
2015-09-15 03:20,160
2015-09-15 03:25,160
2015-09-15 03:30,160
2015-09-15 03:35,160
2015-09-15 03:40,160
2015-09-15 03:45,160
2015-09-15 03:50,4050
2015-09-15 03:55,1170
2015-09-15 04:00,1160
2015-09-15 04:05,1140
2015-09-15 04:10,1120
2015-09-15 04:15,1130
2015-09-15 04:20,1040
2015-09-15 04:25,1040
2015-09-15 04:30,1030
2015-09-15 04:35,1020
…
About 700 lignes

[VladimirParticipant]

Hi brogen,

Seems to me like you are actually having an issue displaying your data in the first place, and not only formatting the date.
Here is a working simple example with your data. You may need to adjust the script paths to fit your folders.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Line Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.rangeselector.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'Volume' }
                ],
                url: 'wattcher.csv'
            };

            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",
                description: "NASDAQ Composite compared to S&P 500",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 50, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'Date',
                    formatFunction: function (value) {
                        return value.toLocaleString();
//                        return value.getDate() + '-' + months[value.getMonth()] + ' ' + value.getHours() + ':' + value.getMinutes();
                    },
                    type: 'date',
                    baseUnit: 'day',
                    valuesOnTicks: true,
                    minValue: '16-09-2015',
                    maxValue: '18-09-2015',
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    unitInterval: 1,
                    gridLines: {
                        visible: true,
                        interval: 3,
                        color: '#BCBCBC'
                    },
                    labels: {
                        angle: -45,
                        rotationPoint: 'topright',
                        offset: { x: 0, y: -25 }
                    },
                    rangeSelector: {
                        // Uncomment the line below to render the selector in a separate container
                        //renderTo: $('#selectorContainer'),
                        size: 100,
                        padding: { top: 10, bottom: 0 },
                        backgroundColor: 'white',
                        dataField: 'Volume',
                        baseUnit: 'day',
                        showGridLines: false,
                        formatFunction: function (value) {
                            return value.toLocaleString();
                        }
                    }
                },
                valueAxis:
                {
                    visible: true,
                    title: { text: 'Daily Closing Price<br>' },
                    tickMarks: { color: '#BCBCBC' }
                },
                colorScheme: 'scheme04',
                seriesGroups:
                        [
                            {
                                type: 'line',
                                series: [
                                    { dataField: 'Volume', displayText: 'Volume' }
                                ]
                            }
                        ]
            };
            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
<div id='chartContainer' style="width:850px; height:500px">
</div>
</body>
</html>

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Hi Vladimir !

It’s almost working ^^.

I’m looking for some hours now, but I don’t understand and solve this problem…

I think I understand the code you gave me, and for me, my data file is correct, but the chart has problem.

As you can see there, the date is 9/9/2015, but datas (here) begin at 2015-09-17 00:00 and finish at 2015-09-18 07:55

Line seems restart and “superimpose” (not sure if it’s the right word…) itself…

Any idea ?

Thanks again for all

[VladimirParticipant]

Hi brogen,

It seems that the chart doesn’t recognise your date string as proper date.
We can fix that by converting your string into a javascript Date object when the dataAdapter loads it.

Update your source object declaration with the beforeLoadComplete function bellow:

                        var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'Volume' }
                ],
                url: 'wattcher.csv',
                beforeLoadComplete: function (records) {
                    for (var i =0; i<records.length; i++){
                        records[i].Date = new Date(records[i].Date)
                    }
                    return records;
                }

            };

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

So, there is still a problem ^^.

The dates in range selector and the chart looks correct, but… I don’t have datas anymore in chart ^^.

It looks that the datas are being read in the CSV because the valueAxis changes according the data in the CSV…

example is still on the same link.

[VladimirParticipant]

Hi brogen,

I fail to see a problem.
What data is missing? It seems to appear fine for me.
Maybe check it yourself with another browser?

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts