I have a line chart for messages sent x day/month and I also have two datepickers on top of it. I want to be able to select a start date, an ending date and the chart reads those dates and display this exactly range of points.
I already have zoom and pan configured on my chart.js file and I can do it manually, but I was wondering how can I do that through what I just described.
On this picture I have 3 months of data already. It always begins displaying 1 month.
I did it!
I created a function to be called after every date change on my datepicker that is like that:
function filterDate(initialDate, finalDate){
//first I cloned my dataset [labels (x) and data (y)] like this:
labelsData2 = [...labelsData];
sentData2 = [...sentData];
//then I used the datepicker's values to pinpoint the index of both dates (initial and final) on my labelsData2 array, sliced the array so it now contains only the range of dates that I want and stored the value on labelsData2 again
labelsData2 = labelsData2.slice(labelsData2.indexOf(initialDate), mesesData2.indexOf(finalDate) + 1); //<- +1 to prevent the index 0 to mess my result.
//I used the same indexOf to slice my sentData2 array as well, since they have the same length.
sentData2 = sentData2.slice(labelsData2.indexOf(initialDate), mesesData2.indexOf(finalDate) + 1);
//then I updated my chart!
myChart.data.datasets[0].data = sentData2;
myChart.data.labels = labelsData2;
myChart.update();
}
I've just encountered a problem with highcharts autoscaling within multiple series. Pictorial explanation:
Range 12h
-> Here, my time range is 12hours, max value is 5 (yellow).
Range 16h
-> Here, when I switch to 16h time period, max value of THE SAME SERIES changes to approx. 2.5 (yellow).
How to retain the same Yaxis max value across all time ranges?
Historical data, form the moment when the chart is initialized back to 16h before, is provided by REST API endpoint, whereas current data is fetched from HTML.
EDIT:
Additionally, when I narrow down the time range, max value apperas to be way bigger, than it is in the normal time range.
Zoomed
I have 2 timeseries that I would like to 'share' tooltip across. However, I have a problem where only the first point of each series is aligned and shares the tooltip. The rest of the points are slightly misaligned and therefore fail to show in the tooltip at the same time.
This fiddle will help demonstrate the problem. Fiddle
If you hover over the very first point, the tooltip appears with an entry for both series. But the very next datapoint only displays a single entry in the tooltip.
May I ask for your advice please? What have I missed for 'aligning' both series in order to share the tooltip? Clearly it's not enough to just add
tooltip: {
shared: true,
}
Thank you.
Assuming that the end goal is to compare two different dates based on the time of day, and assuming that the data points are at regular intervals, or are close enough and can be fudged (ie 1 point per hour, or every 10 minutes, etc), I would approach this differently:
1) use a single date. it can be today's date, or any other date, it doesn't matter, as the time of day is the important segment of the date string.
2) use the pointStart and pointInterval properties to set the proper timing (based on the artificial date, but the correct time interval)
3) Set the actual date of each data series as the series name, which will show in the legend and the shared tooltip to properly display the date of each data set.
4) use the formatting options on the x axis labels to show only the time portion of the label and not the date
In this way you remove the need for a 2nd x axis, remove any complications in tooltip formatting, remove the need to use more complex data structures like in your comment ( "{"y":0.87,"realDateTime":'25/12/2015 03:00'}" ), and only ever have to pass the appropriate date to the name property of each series.
//use the current date as the base - the date doesn't matter, just the time
var d = new Date();
var date = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0,0,0);
var pointStart = date.getTime();
var pointInterval = 3600 * 1000 // 1 hour
.
series: [{
name : 'Apr 17, 2015',
data : [2,5,8,9,8,7,4,5,6,9,8,7,8,9,8,7,8,5,3,2,1,4,4,5]
},{
name : 'Jun 12, 2015',
data : [3,6,9,5,4,7,8,5,2,1,4,5,9,8,7,5,6,9,8,7,4,5,6,3]
}]
Example:
http://jsfiddle.net/jlbriggs/b3t7ueam/
[[and, of course, you can do this with as many different dates as desired (though this many obviously doesn't make sense):
http://jsfiddle.net/jlbriggs/v76u9w2L/
]]
I know that this is an old question, but an alternative approach which I've found to work is to reformat the data into a CSV format and add an import for the data module.
There's a demo on the Highcharts site which does pretty much what you're asking for (albeit nested inside an ajax request) over here. The two key parts from there are:
<script src="https://code.highcharts.com/modules/data.js"></script>
and
data: {
csv: csvData
}
The example reads in an actual csv file, but it'll accept any string which is formatted similarly. Also, if you set up headers in that csv string, you don't need to declare their names in your series options.
I have a data array which consists of timestamp - value pairs.
Basically there are two sets of data; 2014 and 2015 values.
For;
2014.12 : There are 4 values
2015.1 : There are 4 values.
2015.2 : There are 4 values.
2015.3 : There are 4 values.
I want to show them in order, 2014 values first , and so on.
However I end up showing values without time order starting from 1 to 12 on x axis.
Is there any way of setting the x axis in order based on my array data?
Fiddle;
http://jsfiddle.net/shamaleyte/6gL1wzsL/4/
Use the time plugin & mode to show date/time & values pairs.
xaxis: {
mode: 'time'
},
See this updated fiddle and the chapter in the documentation.
I have been playing with Cubism for a few days now. After successfully visualizing real time data, now I'm trying to visualize historical data.
Here is my scenario:
I want to make a history page for each user with each horizon bar showing for each day of the week. Since I have data for every 10 mins the .size would be 144. So the axis should also show 12 AM to 11:59 PM. This would show data for the last week, a day at a time.
Some problems I faced:
I couldn't get the axis to show only time, it shows day and date as well. Even if it is some other day it won't matter much since I can change the start and stop within the metric definition. How can I change the axis to only show time of day in 144px?
Is it possible to do this using Cubism?
Change cubism_axisFormatDays on line 1061 on cubism.js like this and tell me if it works:
cubism_axisFormatDays = d3.time.format("%I:%M %p");
Changing the .step should actually help you to author the axis, you can also play with the .serverDelay which will also author the axis itself:
var context = cubism.context() // set the cubism context
//.serverDelay(0) // No server delay
//.clientDelay(0) // No client delay
.step((1 * (1000*60*60))) // step once ever second
.size(1440) // and make the horizon div 1440 px wide.
.stop(); //to stop the cubism from flowing like a real time cubism
//1e3 or 1 seconds
//1e4 or 10 seconds
//6e4 or 1 minute
//3e5 or 5 minutes
//36e5 or 1 hour
//864e5 or 1 day
You can also check out this post for more detail regarding .serverDelay().
Change scale default in cubism.js