well , i don't know much about javascript
i have some data that i want to plot using Highcharts , right now i'm following this tuto :
http://blueflame-software.com/blog/using-highcharts-with-php-and-mysql/
i managed to do that example , but i have different data like this :
date : temp
2013-05-08 20:17:26 : -22
2013-05-08 20:18:26 : -21
2013-05-08 20:24:26 : -22
2013-05-08 20:37:26 : -20
2013-05-08 20:40:26 : -22
2013-05-08 20:47:26 : -21
2013-05-08 20:52:26 : -20
2013-05-08 20:53:26 : -19
how to plot this with date in x axis and temp in y axis
To plot dates/times on the xaxis, use the xaxis type to specify datetime.
xAxis: {
type: 'datetime'
}
Next you'll need to format your xvalues in the time format Highcharts understands; the number of milliseconds from midnight of January 1, 1970. You have two options:
Parse the date string as in your example link:
line = line.split(/\t/);
date = Date.parse(line[0] +' UTC'); // change timezone accordingly
Have PHP/MySQL return milliseconds instead of a string from the database:
$result = mysql_query("SELECT UNIX_TIMESTAMP(timespan) * 1000, visits FROM highcharts_php");
Related
I have a column chart created using highcharts , where in I am showing list of student names in a class on x axis and average marks obtained on all the quiz he has taken on the y axis. For example student "abc" had scored 50 and 100 on two tests hence his average is 75. I want 75 to be displayed as value on column chart and on the tool tip i want to display "test 1 - 50","test 2 - 100".So inside series object i am passing in an array of average. Same will be done for other students in class.Help appreciated
You can put the test values as custom properties and refer to them in tooltip's formatter function:
series: [{
type: 'column',
data: [{
y: 75,
tests: [50, 100]
}, {
y: 50,
tests: [50, 50]
}]
}],
tooltip: {
formatter: function() {
var str = '';
this.point.tests.forEach(function(test, i) {
str += '<br>test' + (i + 1) + ' ' + test;
});
return str;
}
}
Live demo: http://jsfiddle.net/BlackLabel/t5f43zwn/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
I have spline chart, with dateTime xAxis and more than 3k points in each of 2 categories: http://jsfiddle.net/jk171505/dmmhL5ha/7/
Is there a way, other than tickInterval, to prevent overlapping labels on xAxis?
I tried to use tickInterval but this isn't the option, as data points are irregular and amount varies (sometimes it's data for period of 2 weeks, sometimes 2 years):
xAxis: {
type: 'datetime',
categories: ["test1", "test"],
tickInterval: 24 * 3600 * 1000 * 31,
Set tickPixelInterval - bigger than label width, to make sure there is enough space between items JSFiddle.
I am using highcharts to graph some datas. I can select two dates and the graph will show the datas between those 2 dates.
I have the following code:
options.xAxis[0] = {
type: 'datetime',
tickInterval: 3600 * 1000, // one hour
tickWidth: 5,
gridLineWidth: '1',
gridLineColor: gridLineColor,
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return '<b style=\"font-size:120%\">' + Highcharts.dateFormat('%d-%m', this.value) + '<b>' + '<br>' + Highcharts.dateFormat('%l%p', this.value);
}
},
opposite: false
}
My problem is that if I have 1 day, I see all the hours and if I have selected 5 days for example, I see the 5 days on the axis but if I select 3 months, I see all the days within those 3 months. And this is unreadable.
Is it possible to say that you don't want to have more than 10 intervals shown on the axis?
Many thanks,
John.
You have a couple of options:
Set your tickInterval dynamically. Set the interval depending on time frame of your data
use the tickPixlInterval option. This decides on logical tick intervals that fall somewhere close to the pixel value you specify.
http://api.highcharts.com/highcharts#xAxis.tickPixelInterval
I have a date format that is a one digit month (no leading zero), followed by a two digit day and 2 digit year.
January 1st, 2013 = 10113
I'm trying to attach a datepicker with the correct format to it but it doesn't format correctly.
http://jsfiddle.net/S3KyX/1/
<input type="text" id="date" value="10113">
$("#date").datepicker({ dateFormat: 'mddy'});
When the date picker pops up it has the date Oct 11, 2003.
Unfortunately, your format won't work. if you look at the implementation of datepicker formatDate, you can see that for m it will try to match 1 or 2 digits, because it can't tell that you mean January and not October ahead of time,
This method is being called like this, getNumber('m'):
var getNumber = function(match) {
var isDoubled = lookAhead(match);
var size = (match == '#' ? 14 : (match == '!' ? 20 :
(match == 'y' && isDoubled ? 4 : (match == 'o' ? 3 : 2))));
var digits = new RegExp('^\\d{1,' + size + '}');
var num = value.substring(iValue).match(digits);
if (!num)
throw 'Missing number at position ' + iValue;
iValue += num[0].length;
return parseInt(num[0], 10);
};
as you can see size will be 2 for 'm', therefore it will match 2 digits! When in doubt put break points in the code and see what happens (that's what I just did, using chrome developer tools)
Can anybody give an example of drilldown chart that has min and max for the Y axis labels? Here is the jsfiddle of the example from the Highcharts website.
I have been trying to figure out how to set a min and max for the Y axis labels. So for example instead of starting at 0 i would like to start at 88.
To get the desired result - for example, start yAxis values at 88, you should use this settings:
new Highcharts.Chart({
....
yAxis: {
min: 88,
startOnTick: false // To prevent rounding of this value.
},
....
});
Hope this helps.