We Keep Coding

highchart with a specific json format in django

I received data from an api in this format:
[{"t":"2010-05-06T00:00:00Z","v":294},
{"t":"2010-05-07T00:00:00Z","v":103},
{"t":"2010-05-08T00:00:00Z","v":293},
{"t":"2010-05-09T00:00:00Z","v":113}]
how can I draw a chart with highchart in my website with them. "t" have to convert to "time" and "v" to "volume"
this is my JS file. I need to remain in the chart property as much as I can.
Highcharts.chart('container', {
chart: {
scrollablePlotArea: {
minWidth: 700
}
},
data: {
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
legend: {
align: 'left',
verticalAlign: 'top',
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
className: 'popup-on-click',
marker: {
lineWidth: 1
}
}
},
});

You need to map your data to the format required by Highcharts.
const data = [{
"t": "2010-05-06T00:00:00Z",
"v": 294
},
...
];
const seriesData = data.map(dataEl => [new Date(dataEl.t).getTime(), dataEl.v]);
Highcharts.chart('container', {
...,
series: [{
data: seriesData
}]
});
Live demo: http://jsfiddle.net/BlackLabel/z74pyfbj/
API Reference: https://api.highcharts.com/highcharts/series.column.data

How to position dataLabels at the midpoint of an arearange chart in highcharts?

Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) {
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});
Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name "AREA1" and "AREA2" to be shown in the midpoint of the respective y-axis values. ie "Area 1" should be shown at 5(midpoint of 0 and 10) and "Area 2" should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I've tried with specifying yLow value in the plotOptions. But it didn't work for me since the series data is dynamic.
The chart I'm using is highcharts and version is 4.1.5
Please help!! Thanks in advance

You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:
series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]
Live demo: http://jsfiddle.net/BlackLabel/d01e2ymx/
API Reference: https://api.highcharts.com/highcharts/series.scatter

HighChart tooltips different with yaxis dateformat

I've a problem using highchart.
in yaxis dateformat it doesn't problem , but in tooltip dateformat, it is give me different for 1 hour.
JS :
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Report Due Date vs Surat Jalan',
x: -20 //center
},
subtitle: {
text: 'PT BKA',
x: -20
},
xAxis: {
categories: [],
title: {
text: 'So No'
},
labels :{
rotation: -45
}
},
yAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%d/%m/%Y %H:%M:%S' },
labels :{
formatter:function() {return Highcharts.dateFormat('%d/%m/%Y %H:%M:%S',this.value);}
},
title: {
text: 'Date'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br><b>' + this.series.name +'</b> : ' +
Highcharts.dateFormat('%d/%m/%Y %H:%M:%S',this.y);
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: []
};
JSON data form PHP :
1: {name: "SODate", data: [1457910000000]}
data: [1457910000000]
name: "SODate"
2: {name: "DeliverDate1", data: [1457996400000]}
data: [1457996400000]
name: "DeliverDate1"
3: {name: "DeliverDate2", data: [1458169200000]}
data: [1458169200000]
name: "DeliverDate2"
4: {name: "DeliverDate3", data: [1458255600000]}
data: [1458255600000]
name: "DeliverDate3"
ToolTip :
SODate : 1 457 910 000 000
DeliverDate1 : 1 457 996 400 000
but when using formatter like first script , it's showing different 1 hour different
SODate in yaxis : 14/03/2016 00:00:00
SODate in Tooltip : 13/03/2016 23:00:00
I am already using
Highcharts.setOptions({
global: { useUTC: false }
});
but it just make more big different.
Why this can happen?
UPDATE 15 March 2016 :
After using global: { timezoneOffset: 7 * 60, useUTC: false }
its not make different, because yaxis is not problem.
After using global: { timezoneOffset: -60, useUTC: true}
it works, but it is right?

Trying to converted array of data to work with Highcahrts Ajax loaded data example

I am building a dashboard in Ruby on Rails that creates charts/graphs for analysis out of google analytics data using HighchartsJS. I am following this example from Highcharts for Ajax Data implementation. The csv data they are using to create the line graph is here.
Currently I am retrieving google analytics data using Core Client API V3 and gives me a result back the form of
[[Year, Month, Day, Session Hits, Unique Hits], [Year, Month, Day, Session Hits, Unique Hits], [Year, Month, Day, Session Hits, Unique Hits], ...]
An example
[["2014", "11", "24", "21","2"], [2014", "11", "25", "8", "0"],["2014", "11", "26", "11", "3"], [2014", "11", "27", "5", "1"]]
I want to convert this data into a form just like the csv data Highcharts is using as I want a graph that looks exactly like this example.
I tried converting it as such
def web_traffic_results
#Instantiate array of datapoints to be returned for campaign traffic chart
wt_datapoints = "Day,Visits,Unique Visitors"
#for each element in ga queried results parse the data into highcharts example format
traffic_query.each do |rowContent|
row_year = rowContent[0]
row_month = rowContent[1]
row_day = rowContent[2]
row_date = "#{row_day}/#{row_month}/#{row_year}"
total_hits = rowContent[3]
new_hits = rowContent[4]
wt_datapoints = wt_datapoints + "\n#{row_date},#{total_hits},#{new_hits}"
end
return [wt_datapoints]
end
In the reference in which I am rendering the data, [wt_datapoints] renders like this
["Day,Visits,Unique Visitors\n11/04/2014,2,0\n11/13/2014,1,0\n11/20/2014,2,0\n11/21/2014,1,0\n11/24/2014,21,0\n11/25/2014,8,0"]
Here is where I call the chart render and pipe the data
<script>
$(document).ready(function() {
WebTrafficChart.render('/mgt/web/<%= #id %>/graphs/traffic', '#web_traffic_chart');
});
</script>
This calls the below which is mostly taken from the example linked on the top except for the data
window.WebCampaignTrafficChart = {
render: function(data, selector) {
// Get the CSV and create the chart
$.getJSON(data, function (csv) {
// transform
// {data: []}
$('#web_traffic_chart').highcharts({
data: {
csv: csv
},
title: {
text: 'Total Traffic'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
}
}
This implementation does not work and I was wondering if I could get some help and feedback regarding this question. Thanks in advance.

I'm trying to use highcharts to display a series of points not just x and y

I have a chart that displays [x,y] using highcharts .I want to use more than [x,y] when I specify in an array say minimum value, maximum value.
I have an array like this: array1[['apples',no of apples,11,12],['oranges',no of oranges,1,2]
How do I employ this array in my following chart? I understand I have to specify this array1 in the series option. But which chart should I use? How do I represent the point in the chart when it has more than [x,y] option in the array defined as above.
$(document).ready(function fruits() {
$('#container').highcharts({
title: {
text: 'fruits'
},
xAxis: {
categories: ['Apple', 'Orange']
},
yAxis: {
title: {
text: 'No of fruits'
},
tickInterval: 10
},
series: [{
name: 'Fruits',
data: [
['apple', 29.9],
['orange', 71.5]
]
}]
});
});
For example,if i use column range chart I have min and max values under the same point.
But I need no of fruits, mean and median also to be included in the same chart.I don want to draw a separate line for mean and median instead use a single line for each point that shows no of fruits,min,max,median inthe tool tip.I want data to be [apple,5,4,12.5,10]
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: false
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2009'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Min and Max',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}
]
]
});
});

You need two categories and then two series, like this:
xAxis: {
categories: ['Apples', 'Oranges'],
title: {
text: null
}
},
series: [{
name: 'Min',
data: [11, 12]
}, {
name: 'Max',
data: [20, 24]
}]
Here's an example fiddle: http://jsfiddle.net/UZj2K/

I think what you are looking for is called a columnrange chart.

I don't think it's a good idea to put all the data in a single point. But Error Bar or Box plot might fit your need. Here is an example of box plot chart. It's not exactly what you want but it's close. http://jsfiddle.net/7kFh4/

If you want to use only one line on a chart, and just display all detailed info only in tooltip, you can simple pass point as object, and then format tooltip, see: http://jsfiddle.net/3bQne/566/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['apple', 'banana']
},
tooltip: {
formatter: function() {
var o = this.point.options;
return this.x + '<br>' +
this.series.name + '<br>' +
'Count: ' + this.y + '<br>' +
'Min: ' + o.min + '<br>' +
'Max: ' + o.max + '<br>' +
'Mean: ' + o.mean + '<br>' +
'Median: ' + o.median + '<br>';
}
},
series: [{
data: [{
x: 0,
y: 5,
min: 10,
max: 15,
median: 13.4,
mean: 12.1
},{
x: 1,
y: 6,
min: 13,
max: 16,
median: 13.4,
mean: 15.2
}]
}]
});