This is my code:
In the output i'm getting the UTC timestamp number instead of the date value. I've searched a bit and found out that type 'datetime' is required to display time values on xAxis. but its not working in my case.
this.partnerChart = function () {
chart = new Highcharts.chart({
chart: {
type: 'line',
renderTo: 'partnerChart',
events: {
load: self.requestPartnerChartData
},
zoomType: 'xy',
resetZoomButton: {
position: {
align: 'right', // by default
verticalAlign: 'top' // by default
}
}
},
title: {
text: self.selectedXAxis() + ' Statistics'
},
xAxis: {
type: 'datetime',
categories: []
},
yAxis: {
min: 0
},
plotOptions: {
series: {
connectNulls: true
}
},
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
}
})
};
This is my ajax call:
$.ajax({
url: "#",
type: "GET",
contentType: "application/json",
success: function (data) {
chart.yAxis[0].setTitle({ text: self.selectedYAxisLeft() });
var dateCost;
var dateString = data.slice(data.indexOf('{') + 1, data.lastIndexOf('}'));
var rawSaleData = dateString.split(',');
var sales = [];
chart.update({
xAxis: {
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
},
min: 1483228800000
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e %b}: {point.y:.2f} '
}
});
for(var i = 0; i < rawSaleData.length; i++){
if(i != 0){
rawSaleData[i] = rawSaleData[i].slice(1);
}
dateCost = rawSaleData[i].split('=');
dateCost[0] = dateCost[0].slice(0,dateCost[0].indexOf(' '));
var components = dateCost[0].split('-');
var utcDate = Date.UTC(components[0],components[1] - 1,components[2]);
sales.push([utcDate, parseInt(dateCost[1])]);
}
chart.addSeries({
name: 'Sales',
data: sales
});
}
})
the data in variable sales in series has data in the form:
[[utc timestamp, value],[utc timestamp, value]]. please help. thank you
Remove categories: []. You have at the same time set type: "datetime" and categories.
Related
Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})
Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click
I had to print the values of Active_Employees & Employees_Plan in bar chart like in this
Image
Means to make a bar representing the comparison in the last bar. It would be more suitable if concise code is provided.
function BarChart()
{
var emp = 0;
myData = "{ 'date':'" + startdate + "', 'Level1':'0','Level2':'0','Level3':'0','Level4':'0','Level5':'0','Level6':'0', 'EmployeeId':'" + emp + "'}";
$.ajax({
type: "POST",
url: "NewDashboard.asmx/BarChart",
contentType: "application/json; charset=utf-8",
data:myData,
success: OnSuccessBarChart,
// function (result) {
// alert(result.d);
//},
error: onError,
cache: false
});
}
function OnSuccessBarChart(data,status)
{
var bar_array = [];
if (data.d != null) {
var bar_data = jsonParse(data.d);
$.each(bar_data, function (i, option) {
//OSA.push(
// {
// name: option[i].Active_Employees,
// data: parseFloat(option[i].Employees_Plan)
// })
bar_array.push(
parseFloat([option.Employees_Plan]),
parseFloat([option.Active_Employees]),
parseFloat([option.Employees_Plan] + "/" + [option.Active_Employees])
);
});
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'BarCharts',
type: 'bar',
height: 300
},
title: {
text: 'Month Planned by Employees '
},
colors: [
'#604228'
],
credits: { enabled: false },
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
},
formatter: function () {
return this.x + ':' + this.y;
}
},
plotOptions: {
series: {
shadow: false,
borderWidth: 1,
dataLabels: {
enabled: true,
}
}
},
xAxis: {
categories: ['Plan of Current Month', 'Total Active Employee', 'Plans Made by Active Employees'],
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
title: {
text: 'Plans of Active Employees',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
series: [{
showInLegend: false,
data: bar_array
}]
});
}
I would try something like this:
$.each(bar_data, function (i, option) {
var emp_plan = option.Employees_Plan;
var active_emp = option.Active_Employees;
var plan_ratio = emp_plan / active_emp;
bar_array.push(
parseFloat([option.Employees_Plan]),
parseFloat([option.Active_Employees]),
parseFloat(plan_ratio).toFixed(2)
);
});
I want to use HighCharts because of the zoom function! Everything works great. There is one thing which I would like differently, but I can't seem to get it to work... My code:
http://jsfiddle.net/ma50685a/16/
$(function() {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'column'
},
rangeSelector: {
enabled: false
},
navigator: {
series: {
type: 'column'
}
},
title: {
text: 'Overview of veggies'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Sarah',
data: [2,2,3,0,8]
}, {
name: 'Ben',
data: [6,0,0,13,2]
}, {
name: 'Kiki',
data: [3,5,1,16,3]
}, {
name: 'Anna',
data: [0,5,1,3,2]
}],
credits: {
enabled: false
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}
});
});
On the x-axis I would like to display the categories! Is this possible because now it shows date?
As was mentioned, a stockchart works with datetime axis, but you can use a normal chart with a navigator enabled.
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: true,
series: {
type: 'column'
}
},
example: http://jsfiddle.net/ma50685a/26/
Navigator axis is still datetime, though. But I think mocking the datetime axis to look as the category is achievable.
Optionally, you can implement a master-detail chart.
http://www.highcharts.com/demo/dynamic-master-detail
Not very elegant but i think this is what you want :
http://jsfiddle.net/ma50685a/23/
$(function() {
// Create the chart
var categoriesCptChart = 0;
var categoriesCptStock = 0;
var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'];
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'column'
},
rangeSelector: {
enabled: false
},
navigator: {
series: {
type: 'column'
},
xAxis: {
labels: {
formatter: function() { return categories[categoriesCptStock++ % categories.length]}
}
}
},
title: {
text: 'Overview of veggies'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Sarah',
data: [2,2,3,0,8]
}, {
name: 'Ben',
data: [6,0,0,13,2]
}, {
name: 'Kiki',
data: [3,5,1,16,3]
}, {
name: 'Anna',
data: [0,5,1,3,2]
}],
credits: {
enabled: false
},
xAxis: {
labels: {
formatter: function() { return categories[categoriesCptChart++ % categories.length]}
}
}
});
});
How to load json data to multiple series and add Time to xAxis in HighStock?
And any idea how to add multiple yAxis on the right and left of the HighStock chart?
I tried to convert to json structure ["name": data:[]] but i can't find how to do it. Please help.
My code is in ASP.Net MVC 4:
public JsonResult GetData()
{
var chart = new List<object>();
chart.Add( new { Speed = 50, Tank = 201.56, odomoter = 2319.956, Time = "05/04/2015 23:53:07" } );
chart.Add( new { Speed = 80, Tank = 201.56, odomoter = 2319.956, Time = "05/04/2015 23:52:06" } );
chart.Add( new { Speed = 90, Tank = 201.56, odomoter = 2191.907, Time = "05/04/2015 23:51:06" } );
var jss = new JavaScriptSerializer();
var output = jss.Serialize( chart );
return Json( output, JsonRequestBehavior.AllowGet );
}
$(function () {
$.getJSON('GetData', function(jdata) {
alert(jdata);
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
type: 'spline',
zoomType: 'xy'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
selected: 0 // day
},
//xAxis: {
// minRange: 3600 * 1000, // one hour
// type: 'datetime',
// dateTimeLabelFormats: { minute: '%H:%M', day: '%A. %e/%m' },
// // minRange: 15*60*1000,
// //maxZoom: 48 * 3600 * 1000,
// labels: {
// rotation: 330,
// y: 20,
// staggerLines: 1
// }
//},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Consumo',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} Kw',
style: {
color: '#4572A7'
}
},
opposite: true
}],
title: {
text: 'AAPL Stock Price'
},
series: data
//series: [{
// name: 'AAPL',
// data: data,
// tooltip: {
// valueDecimals: 2
// }
//}]
});
});
});
I cannot get highcharts to recognize my timestamps, they are in javascript date format.
Tried many different approaches, but cannot get it to work when both the data and time array's are seperate.
Fiddle: http://jsfiddle.net/SjL6F/
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ''
}
});
$('#container').highcharts({
title: {
text: 'Temperature - Last 24 hours',
},
credits: {
enabled: false
},
subtitle: {
text: "Test Site",
x: -20
},
xAxis: {
type: 'datetime',
labels: {
enabled: true
},
categories: time,
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%e of %b'
}
},
yAxis: [{
title: {
text: 'Temperature (\u00b0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
tooltip: {
valueSuffix: ' C'
},
marker: {
enabled: false
}
}]
});
});
Highcharts just shows the raw javascript date value.
You are setting categories, which isn't datetime type for xAxis. Remove them, then concat time and temp arrays.
For example:
var concatenatedData = [];
$.each(time, function(i, e){
concatenatedData.push([parseInt(e), temp[i]]);
});
Demo:
http://jsfiddle.net/SjL6F/1/
Note: I have added parseInt, because Highcharts requires timestamps to be numbers, not strings.