In my app users record their weight and the date that weight belongs to. I want that data displayed in a HighStock line graph. Should be very simple, but I've been working on this (partially) over the past 2 months. I've looked at a bunch of different things and I can't get this to work.
The exact data I'd like displayed is the actual line in the line graph to be their weight, y-axis will be their weight, x-axis will be the date that the user entered for that weight.
i.e. user enters their weight in the form for yesterday as 135 and the date they put in with the form is 12/3/2012.
Don't know if it matters but a User has_many weights, a weight belongs_to a user.
Here is what I have and I'm getting a bunch of different errors. I'm definitely missing/not understanding something here:
Weight Model:
class Weight < ActiveRecord::Base
def user_weight_series(user, weight)
weights_by_weight_date = Weights.select("date(weight_date) as dater, content as weights")
weights_by_weight_date.map do |record|
parts = %w[%Y %m %d].map{ |s| record.dater.send(s) }
"[Date.UTC(#{parts.join(',')}), #{record.weights}]"
end
end
application.html.erb
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'weight_chart',
type: 'line',
marginRight: 20,
marginBottom: 25
},
title: {
text: 'Your Weight Over Time',
x: -20 //center
},
yAxis: {
title: {
text: 'Weight'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'bottom',
x: -10,
y: 100,
borderWidth: 0
},
scrollbar: {
enabled: true
},
rangeSelector : {
selected : 1
},
credits: {
enabled: false
},
series: [{
tickInterval: <%= 1.day * 1000 %>,
pointStart: <%= 3.weeks.ago.at_midnight.to_i * 1000 %>,
name: 'Weight',
data: [ <%= current_user.user_weight_series(user, weight).join(", ") %> ],
}]
},
function(chart){
// apply the date pickers
setTimeout(function(){
$('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
.datepicker()
},0)
});
});
});
What's the best way to do this? Thank you in advance!
Here is the process I use, along with some tips to get you started:
Work backwards from the desired display you want to create, using dummy json data to populate the chart.
Figure out how to create a ruby hash of your real database data that matches the dummy json data series. For the timestamps, convert them to a highcharts-readable format like this:
SOME_DATE.to_time.to_i * 1000
Have one of your controllers render the resulting ruby hash as json.
def some_controller_method
#chart_data_series = [] // your desired series here
respond_to do |format|
format.json { render :json => #chart_data_series }
end
end
Read this json from its appropriate page and pass it into your chart series. One way is to use d3:
function buildChart(){
d3.json("/path/to/your/data.json", function(error, json_data) {
$('#chart_container').highcharts({
chart: {type: 'column'},
// options, options, etc
series: json_data,
// options, options, etc
});
});
});
Related
$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 0.5
},
title: {
text: 'Number'
},
xAxis: {
categories: [ .......... ]
},
yAxis: {
categories: [ .......... ],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function() {
return '' +
this.series.xAxis.categories[this.point.x] +
'<br>' +
this.series.yAxis.categories[this.point.y] +
'<br>' + this.point.value;
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ .......... ],
http://jsfiddle.net/Slate_Shannon/0mvgmhLb/6/
This is a heatmap chart. The chart looks okay as-is, but should have more data. However, if I add any additional data, the chart breaks.
Note that a large part of the data is commented out. This starts with the data that begins with
[50,0,null],
[50,1,8380],
[50,2,37430],
(note that I removed the axis labels and the data in the code shown above.)
If you change the position of the beginning of the comment tag to so that the "50" data gets charted, then the chart fails.
Is this just too much data, or is there a way to create a heatmap that needs to be approx 20 x 90 cells?
Set turboThreshold to 0, from the Highcharts API:
When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.
http://api.highcharts.com/highcharts/plotOptions.heatmap.turboThreshold
Example: http://jsfiddle.net/0mvgmhLb/7/
series: [{
name: 'Sales per employee',
borderWidth: 1,
turboThreshold: 0,
...
Try loading the Highcharts Boost module.
The boost.js module is a module to allow quick loading of hundred
thousands of data points in Highcharts.
Instead of relying solely on SVG to display the graph, this module does the following to boost performance:
... drawing the graph on a canvas, then copying over the contents to
an image tag inside the SVG, using a data URL.
Link to official blog post.
Just load the module after highcharts.js (lib/modules/boost.js).
This can be solved by providing the colorAxis with a min and max value. Highcharts has issues with calculating the max value with extremely large data sets.
I'm attempting to combine a couple of different chart demos from Highcharts.
My examples are: Data classes and popup and Small US with data labels
I want the map from the first with the popup feature of the second. I need to connect the map to my own google spreadsheet but for now I'm just trying to get the data from the first example to work.
This is what I have so far but can't seem to get any data in the map. I thought I had a joinBy problem, and I may still, but when I set joinBy to null I thought "the map items are joined by their position in the array", yet nothing happened.
https://jsfiddle.net/9eq6mydv/
$(function () {
// Load the data from a Google Spreadsheet
// https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
Highcharts.data({
googleSpreadsheetKey: '0AoIaUO7wH1HwdDFXSlpjN2J4aGg5MkVHWVhsYmtyVWc',
googleSpreadsheetWorksheet: 1,
// custom handler for columns
parsed: function (columns) {
// Make the columns easier to read
var keys = columns[0],
names = columns[1],
percent = columns[10],
// Initiate the chart
options = {
chart : {
renderTo: 'container',
type: 'map',
borderWidth : 1
},
title : {
text : 'US presidential election 2008 result'
},
subtitle: {
text: 'Source: <a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' +
'_2008#Election_results">Wikipedia</a>'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
legend: {
align: 'right',
verticalAlign: 'top',
x: -100,
y: 70,
floating: true,
layout: 'vertical',
valueDecimals: 0,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)'
},
colorAxis: {
dataClasses: [{
from: -100,
to: 0,
color: '#C40401',
name: 'McCain'
}, {
from: 0,
to: 100,
color: '#0200D0',
name: 'Obama'
}]
},
series : [{
data : data,
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}',
style: {
textTransform: 'uppercase'
}
},
mapData: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']),
joinBy: keys,
name: 'Democrats margin',
point: {
events: {
click: pointClick
}
},
tooltip: {
ySuffix: ' %'
},
cursor: 'pointer'
}, {
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
color: 'silver'
}]
};
/**
* Event handler for clicking points. Use jQuery UI to pop up
* a pie chart showing the details for each state.
*/
function pointClick() {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: this.name,
width: 400,
height: 300
});
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'Obama',
color: '#0200D0',
y: parseInt(columns[3][row], 10)
}, {
name: 'McCain',
color: '#C40401',
y: parseInt(columns[4][row], 10)
}],
dataLabels: {
format: '<b>{point.name}</b> {point.percentage:.1f}%'
}
}]
});
}
// Read the columns into the data array
var data = [];
$.each(keys, function (i, key) {
data.push({
key: key,//.toUpperCase(),
value: parseFloat(percent[i]),
name: names,
row: i
});
});
// Initiate the chart
window.chart = new Highcharts.Map(options);
},
error: function () {
$('#container').html('<div class="loading">' +
'<i class="icon-frown icon-large"></i> ' +
'Error loading data from Google Spreadsheets' +
'</div>');
}
});
});
UPDATE:
I wanted to share with everyone my final solution. Although Ondkloss did a magnificent job answering my question the popup feature still didn't work and this is because I forgot to include the jQuery for the .dialog call. Once I included that I had an empty popup with a highchart error 17, this is because the highmaps.js code doesn't include the pie chart class. So I had to add the highcharts.js code and include map.js module afterward. You can see my final jsfiddle here.
Thanks again to Ondkloss for the excellent answer!
The problem here mostly comes down to the use of joinBy. Also to correct it there are some required changes to your data and mapData.
Currently your joinBy is an array of strings, like ["al", "ak", ...]. This is quite simply not an accepted format of the joinBy option. You can read up on the details in the API documentation, but the simplest approach is to have a attribute in common in data and mapData and then supply a string in joinBy which then joins those two arrays by that attribute. For example:
series : [{
data : data,
mapData: mapData,
joinBy: "hc-key",
]
Here the "hc-key" attribute must exist in both data and mapData.
Here's how I'd create the data variable in your code:
var data = [];
$.each(keys, function (i, key) {
if(i != 0)
data.push({
"hc-key": "us-"+key,
code: key.toUpperCase(),
value: parseFloat(percent[i]),
name: names[i],
row: i
});
});
This skips the first key, which is just "Key" (the title of the column). Here we make the "hc-key" fit the format of the "hc-key" in our map data. An example would be "us-al". The rest is just metadata that will be joined in. Note that you were referencing your data in the options prior to filling it with data, so this has to be moved prior to this.
This is how I'd create the mapData variable in your code:
var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);
// Process mapdata
$.each(mapData, function () {
var path = this.path,
copy = { path: path };
// This point has a square legend to the right
if (path[1] === 9727) {
// Identify the box
Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);
// Place the center of the data label in the center of the point legend box
this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);
}
// Tag it for joining
this.ucName = this.name.toUpperCase();
});
The first part is your "standard map data". The rest is to correctly center the labels for the popout states, and gotten directly from the example.
And voila, see this JSFiddle demonstration to witness your map in action.
I suggest doing some console.log-ing to see how data and mapData have the hc-key in common and that leads to the joining of the data in the series.
I need to have dates on my xaxis on my chart. I collect my data through a range datepicker where the user can enter a range of 14 days. I need the first value on the xaxis to be the start date of the range and the last value to be the end date of the range.
i want the the xaxis labels to read something like "27th Jan 2015" , "28th Jan 2015" or something in that direction and each tic to be 1 day. I've read the API-documentation and i've played around alot with the settings of the chart but for some reason i can not get it to work.
$('#graphColumn').highcharts({
title: {
text: '',
x: -20 //center
},
xAxis: {
categories: [dayArray[0], dayArray[1], dayArray[2], dayArray[3], dayArray[4], dayArray[5], dayArray[6], dayArray[7], dayArray[8], dayArray[9], dayArray[10], dayArray[11], dayArray[12], dayArray[13]]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
name: ' ',
data: series,
color: '#77B7C5',
marker: {
symbol: 'circle'
}
}, {
showInLegend: false,
name: '1 år sedan',
data: series1yearago,
color: "#71C73E",
marker: {
symbol: 'circle'
}
}]
});
here is my chart. I know the xaxis has categories set now but thats only for the moment, i know it should be datetime. My series are regular int arrays with one number on each index. I would apreciate any help that could be given here!
Edit: Here is a working jsfiddle example: http://jsfiddle.net/g0p00tLv/1
Your data, and how it is formatted, is what we really need to see.
You need to do one of two things:
1) pass your data as an array of [x,y] pairs, where x is either the epoch time stamp (in miliseconds), or a date.UTC object
2) pass your data as a single array of y values, and use the pointStart and pointInterval properties to set the date axis properly.
reference:
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
If you need more info, set up a working fiddle example and post it here.
I used pointInterval property to set interval as 30 days but my data set contains daily data.
That method is not working. chart is displaying all the points.
please check below image for the chart i got
https://docs.google.com/file/d/0B1wfs7NUcZnGQkk2QWdEbE9ndmM/edit
What is needed is to draw only three points for three months in the above chart.
Following is the code i used to do this.
Note that 'options.data.points' has data set in format of [[date,value],[]....]
var stockChartData = {
chart: {
renderTo: 'container'
},
title: {
text: "Stock Chart"
},
credits: {
enabled: false
},
yAxis: [
{
labels: {
align: 'left',
x: 2
},
title: {
enabled: false
},
lineWidth: 2
}
],
navigation: {
buttonOptions: {
enabled: false
}
},
scrollbar: {
enabled: false
},
series: [{data: options.data.points, type: 'line', pointInterval: 24 * 3600 * 1000 *30}]
};
stockChart = new Highcharts.StockChart(stockChartData, function (chart) {
});
please help me to solve this issue
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/pointinterval-pointstart/
The data set this example uses is in the format of [value,value,...] (see http://www.highcharts.com/samples/data/large-dataset.js).
So when pointInterval for a month is used, for example the last two values will be used for the values of last two months. For the same data when pointInterval for a year is used, the same last two values is used for the last two years. So the chart doesn't ignore the between values, therefore you will not have for example an average value of the month for day values.
EDIT:
You can use plotOptions.series.dataGrouping for grouping the day values in a month:
http://jsfiddle.net/worhscy0/
is it possible to set highcharts to show data only in specific time range, like 2 hours for example, without any zooming.
For example at the beginning i have data for 2 hours from now. And is it possible not to show some points if they do not fit 2 hours from now?
for example, on the highcharts x-axis labels will be always constant like: [12:00, 12:30, 13:00, 13:30, 14-00] even without any data that is related with this time.
And when the new data comes, labels of time shift to new values like: [12:30, 13:00, 13:30, 14:00, 14:30]
I tried to do like:
this.chart = new Highcharts.Chart({
chart: {
reflow: false,
type: 'line',
renderTo: newSensor.get('id')
},
title: {
text: newSensor.get('name')
},
xAxis: {
minRange : 1
},
yAxis: {
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: dataToChart,
plotOptions: {
series: {
lineWidth: 1,
turboThreshold: 0,
threshold: null
}
}
});
But minRange is not right property for this.
I think you should set min and max for xAxis. Then, when new point is added (using addPoint() ) you should set new extremes using
chart.xAxis[0].setExtremes( newMin, newMax )