We Keep Coding

UTC number getting displayed on xAxis with highcharts

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.

To print arrays value using "/" in bar chart

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)
);
});

x-axis displaying incorrectly in Highcharts php

I have the following code:
<script>
$.getJSON('https://www.quandl.com/api/v3/datasets/ECB/RTD_M_S0_N_C_EUR1Y_E.json?start_date=2003-01-01', function(json) {
var hiJson = json.dataset.data.map(function(d) {
return [new Date(d[0]), d[1]]
});
// var hiJson = json.dataset.data.map(function(d) {
// return { x: new Date(d[0]), y: d[1] };
// });
// Create the chart
$('#Euribor').highcharts('chart', {
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y'
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'Euribor Interest Rates',
},
series: [{
type: 'line',
name: 'Interest Rate',
data: hiJson,
}]
});
});
</script>
This prints out a Highcharts chart, but the x-axis is incorrect. It should be in Years, but it looks more like it's a time format.
Your help is much appreciated!
R

Highcharts redraw previous line still exist

I'm using Highstock to draw curve,There is a dropdown list in my page,when I select one of them,it will display corresponding curve.Default it will display default value's curve,but when I select another one,it will display the newer curve ,but previous curve line still exist.Why?Here is my code:
<script type="text/javascript" src='#Url.Content("~/Scripts/jquery-1.6.min.js")'></script>
<script src='#Url.Content("~/Scripts/highstock.js")' type="text/javascript"></script>
<script src='#Url.Content("~/Scripts/exporting.js")'type="text/javascript"></script>
<div id="T">
</div>
<script type="text/javascript">
var T_chart;
var T_options;
var T1_data = [];
var T2_data = [];
$(document).ready(function () {
draw_chart();
$('#search').click(function () {
redraw_chart();
});
Highcharts.setOptions({
lang: {
rangeSelectorFrom: 'From',
rangeSelectorTo: 'To',
rangeSelectorZoom:'Range'
},
global: {
useUTC: false
}
});
});
T_options = {
chart: {
renderTo: 'T',
type: 'spline'
},
navigator:{
enabled:false
},
rangeSelector: {
buttons: [{
count: 1,
type: 'day',
text: 'Day'
}, {
count: 1,
type: 'week',
text: 'Week'
}, {
count: 1,
type: 'month',
text: 'Month'
}, {
count: 1,
type: 'year',
text: 'Year'
}, {
type: 'all',
text: 'All'
}],
selected: 0
},
title: {
text: 'Temperature Chart'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
yAxis: {
labels: {
x: -10,
y: 0
}
},
series: []
};
function draw_chart() {
storenum = $(".StoreNum").val();
$.getJSON("HisGraData", { storenum: storenum }, function (data) {
$.each(data, function (index, item) {
//Date Format
var date = new Date(parseInt((item.Time).replace("/Date(", "").replace(")/", "").split("+")[0]));
T1_data.push([Date.parse(date.toString()), item.T1]);
T2_data.push([Date.parse(date.toString()), item.T2]);
});
T_options.series.push({ name: 'T1', data: T1_data });
T_options.series.push({ name: 'T2', data: T2_data });
T_chart = new Highcharts.StockChart(T_options);
});
}
function redraw_chart() {
storenum = $(".StoreNum").val(); //dropdown list ,select one
while (T_chart.series.length > 0)
T_chart.series[0].remove();
T1_data = [];
T2_data = [];
$.getJSON("HisGraData", { storenum: storenum }, function (data) {
$.each(data, function (index, item) {
//DateFormat
var date = new Date(parseInt((item.Time).replace("/Date(", "").replace(")/", "").split("+")[0]));
T1_data.push([Date.parse(date.toString()), item.T1]);
T2_data.push([Date.parse(date.toString()), item.T2]);
});
T_chart.addSeries({ name: 'T1', data: T1_data });
T_chart.addSeries({ name: 'T2', data: T2_data });
T_chart.redraw();
});
}
Here is my capture:

I suspect your problem is in the while loop which removes the series.
Rather than removing all the series, and then calling addSeries, why not just use series.setData() ?
http://api.highcharts.com/highcharts#Series.setData()
Try something like:
function redraw_chart() {
storenum = $(".StoreNum").val(); //dropdown list ,select one
T1_data = [];
T2_data = [];
$.getJSON("HisGraData", { storenum: storenum }, function (data) {
$.each(data, function (index, item) {
//DateFormat
var date = new Date(parseInt((item.Time).replace("/Date(", "").replace(")/", "").split("+")[0]));
T1_data.push([Date.parse(date.toString()), item.T1]);
T2_data.push([Date.parse(date.toString()), item.T2]);
});
T_chart.series[0].setData(T1_Data, false);
T_chart.series[1].setData(T2_Data, true);
}
Note the last parameter which tells it whether to redraw or not.

How do you put the datetime in the guage chart in human readable format

my php script output is this:
[y:45,date:1371126021000]
\my function is this:
(document).ready(function() {
function request_cpu_Data() {
$.ajax({
url: 'get_cpu.php',
success: function(data) {
var point = cpu_chart.series[0].points[0];
alert(data);
point.update(data);
setTimeout(request_cpu_Data, 10);
},
cache: false
});
}
\n
plotOptions: {
gauge: {
dataLabels: {
formatter: function () {
return this.y + '<br>' + Highcharts.dateFormat('%d/%m/%Y %H:%M', this.point.date);
}
},
}
},
series: [{
name: 'CPU',
data: [0]
}]
my gauge is not updating. Any ideas what migh be wrong here?

Don't convert that value. Instead use dataLabel formatter: http://jsfiddle.net/AVLeH/
plotOptions: {
gauge: {
dataLabels: {
formatter: function () {
return Highcharts.dateFormat('%d/%m/%Y %H:%M', this.y);
}
},
}
},