jQWidgets Forums
Forum Replies Created
-
Author
-
September 17, 2015 at 10:16 am in reply to: Date Format : Chart with range selector Date Format : Chart with range selector #75937
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 timeAt 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 lignesSeptember 17, 2015 at 8:40 am in reply to: Date Format : Chart with range selector Date Format : Chart with range selector #75935Hello 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)
September 16, 2015 at 6:07 am in reply to: Date Format : Chart with range selector Date Format : Chart with range selector #75880Hi 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.
September 14, 2015 at 11:23 am in reply to: Date Format : Chart with range selector Date Format : Chart with range selector #75813Hi Vladimir,
Thanks for your answer.
I’m still looking for changing the date format.
Any help ?
Regards
September 11, 2015 at 8:55 am in reply to: Date Format : Chart with range selector Date Format : Chart with range selector #75762Hi 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
Hi Peter !
A big thanks !!! I’m trying to generate a simple line chart from CSV, for arround 1 week now, and I Finally got it now !!
I’ll continue to customize my chart
Thanks for all !
-
AuthorPosts