I am trying to find All the values are stored in prodFamilyRunArray. The x-axis labels are stored in xAxis labels. When I tried to hardcode the values inside series and print then it is working. I have attached the screenshot for further reference.
In short it is not being able to take an array reference
var xAxisLabels = [];
var prodFamilyRunArray = [];
var mapOfProdFamilyNames = new Map();
$.ajax({
type: "POST",
url: '#Url.Action("GetProductFamilyName", "Automation")',
contentType: "application/json",
data: '',
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
prodFamilyRunArray.push(5);
xAxisLabels.push(data[i].prodFamily);
mapOfProdFamilyNames.set(xAxisLabels[i], i);
}
}
});
//getProductFamilyExecutionData
$.ajax({
type: "POST",
url: '#Url.Action("getProductFamilyExecutionData", "Automation")',
contentType: "application/json",
//data:'',
dataType: "json",
success: function (data) {
console.log(data);
for (var i = 0; i < data.length; i++) {
var ind = mapOfProdFamilyNames.get(data[i].prodFamily);
prodFamilyRunArray[i] = data[i].cnt; // make i to ind here
}
//reload
// $('#container').highcharts().redraw();
// setInterval('location.reload()', 50);
}
});
console.log(xAxisLabels);
console.log(prodFamilyRunArray);
console.log(mapOfProdFamilyNames)
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
type: 'column',
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
//y = Math.random();
//series.setData([y]);
}, 1000);
}
}
},
title: {
text: 'Manual vs Automated Executions'
},
xAxis: {
categories: xAxisLabels
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Executions'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
'xyx' + ': ' + this.y + '<br/>';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
dataLabels: {
enabled: true,
formatter: function () {
if (this.y > 0)
return this.y;
}
},
borderWidth: 0,
maxPointWidth: 40,
/*events: {
load: function () {
var series = this.series[0];
setInterval(function () {
y = Math.random();
series.setData([y]);
}, 1000);
}
},
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
y = Math.random();
series.setData([y]);
}, 1000);
}
},*/
/* events: {
click: function (event) {
//console.log(event);
//console.log(event.point.series.name)
//console.log(event.point.category.name)
}
},*/
}
},
colors: ['#18a689', '#dd8e07', '#5cbae5', '#930a0a', '#156489', '#2a6d3c', '#f33334', '#71c989', '#3fa45b'],
series: [{
name: 'Manual',
data: prodFamilyRunArray
}]
});
Related
Indicators do draw only for 'historical' part of the chart but do not update when new points appear. http://jsfiddle.net/yp6ocybe/
series: [{
id: 'rand',
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
},
{
type: 'sma',
linkedTo: 'rand',
name: 'SMA (14)'
}, {
type: 'sma',
linkedTo: 'rand',
name: 'SMA (50)',
params: {
period: 50
}
}]
});
The best solution I found is to manually call update on SMA series when the main series is updated.
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
var series2 = this.series[2];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
//call update by passing the old options and redraw = true
series1.update(series1.options, true);
series2.update(series2.options, true);
}, 1000);
}
It stops animating smoothly though, at least on my machine.
http://jsfiddle.net/yp6ocybe/3/
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
var series2 = this.series[2];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
series1.update(series1.options,true);
series2.update(series2.options,true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
id: 'rand',
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
},
{
type: 'sma',
linkedTo: 'rand',
name: 'SMA (14)'
}, {
type: 'sma',
linkedTo: 'rand',
name: 'SMA (50)',
params: {
period: 50
}
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
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 have multiple records in table .. Scenario when I click on row then chart is display according to ID now I want to specify that which owner have this data so for this I try to display owner name ..
I have data in a table:
ID Owner RegNo
26626 John B82
26634 David BE49
26642 Roh A5
26640 Julie B5
I tried this:
<script type="text/javascript">
$(function () {
$('#tabledata').on('click', 'tr', function () {
var row = $(this);
var Id = row.find('td')[0].firstChild.data;
var cell = row.find('td')[1].firstChild.data;
var obj = {};
var cellvalue = {};
obj.ID = Id;
cellvalue.cell = cell;
GetData(obj);
return false;
});
});
function GetData(obj) {
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetVo",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
if (result !== null && result.length == 0) {
$("#cont").hide();
return;
}
strArray = result.d;
var myarray = eval(strArray);
$("#cont").show();
$('#cont').highcharts({
chart: {
borderColor: 'Grey',
borderWidth: 2,
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: JSON.stringify(cellvalue)
},
position: {
align: 'right',
verticalAlign: 'bottom',
x: 10,
y: -10
},
subtitle: {
text: 'Chart'
//text: 'Total: ' + myarray.length
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}',
},
showInLegend: true
}
},
series: [{
name: 'Delivered amount',
data: myarray
}]
});
//end
},
error: function (error) {
alert(error);
}
});
}
// });
</script>
when I check f12 this shows the error
WebForm1.aspx:109 Uncaught ReferenceError: cellvalue is not defined
Modify You function calling and function definition:
<script type="text/javascript">
$(function () {
$('#tabledata').on('click', 'tr', function () {
var row = $(this);
var Id = row.find('td')[0].firstChild.data;
var cell = row.find('td')[1].firstChild.data;
var obj = {};
var cellvalue = {};
obj.ID = Id;
cellvalue.cell = cell;
GetData(obj, cellvalue); //HERE
return false;
});
});
function GetData(obj, cellvalue) { //AND HERE
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetVo",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
if (result !== null && result.length == 0) {
$("#cont").hide();
return;
}
strArray = result.d;
var myarray = eval(strArray);
$("#cont").show();
$('#cont').highcharts({
chart: {
borderColor: 'Grey',
borderWidth: 2,
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: JSON.stringify(cellvalue)
},
position: {
align: 'right',
verticalAlign: 'bottom',
x: 10,
y: -10
},
subtitle: {
text: 'Chart'
//text: 'Total: ' + myarray.length
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}',
},
showInLegend: true
}
},
series: [{
name: 'Delivered amount',
data: myarray
}]
});
//end
},
error: function (error) {
alert(error);
}
});
}
// });
</script>
Hi I'm using high chart and the data is coming through okay however the date is not coming through on the x axis, I have a parameter in Data with the correctly formatted date and I'd like to use that on the x axis and popup, however I understand I need to use UTC datetime for it to order properly
https://imgur.com/32TyzvH
function buildAndUpdateTempChart() {
$.getJSON('server/getReadings.php', function (data) {
$('#chartContainer').highcharts('StockChart', {
chart:{
events: {
load: function(){
// set up the updating of the chart each second
//debugger;
// var series = this.series[0];
// //console.log('data is: ' + data);
// for(var i = 0; i < data.length - 1; i++){
// this.series[0].addPoint(data[i].temp, data[i].timestamp, true, true);
// this.series[1].addPoint(data[i].aTemp, data[i].timestamp, true, true);
// }
// setInterval(function () {
// //get tick
// var x = (new Date()).getTime(), // current time
// y = Math.round(Math.random() * 100);
// series.addPoint([x, y], true, true);
// }, 1000);
}
}
},
title: {
text: 'Temperature Sensor Readings'
},
yAxis: {
title: {
text: 'Degrees Celcius'
},
plotLines: [{
value: -10,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Minimum tolerated.'
}
}, {
value: 20,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Maximum tolerated.'
}
}]},
plotOptions: {
series: {
compare: 'percent'
}
},
series: [{
name: 'Temp',
data: (function () {
var temp = [];
for (var i = 0; i < data.length; i++) {
temp.push([
data[i].timestamp,
parseFloat(data[i].temp)
]);
}
return temp;
}()),
tooltip: {
valueDecimals: 2
}},
{
name: 'Ambient Temp',
data: (function () {
var aTemp = [];
for (var i = 0; i < data.length; i++) {
aTemp.push([
data[i].timestamp,
parseFloat(data[i].aTemp)
]);
}
return aTemp;
}()),
tooltip: {
valueDecimals: 2
},
}]
});
})
}
$(document).ready(function(){
buildAndUpdateTempChart(); //this is async so there rest of the app can continue to work
});
My guess is you need
xAxis: {
type: 'datetime'
},
in your code. Hope this helps.
this could help you, you have to specify xAxis a datetime
function buildAndUpdateTempChart() {
$.getJSON('server/getReadings.php', function (data) {
$('#chartContainer').highcharts('StockChart', {
chart:{
events: {
load: function(){
// set up the updating of the chart each second
//debugger;
// var series = this.series[0];
// //console.log('data is: ' + data);
// for(var i = 0; i < data.length - 1; i++){
// this.series[0].addPoint(data[i].temp, data[i].timestamp, true, true);
// this.series[1].addPoint(data[i].aTemp, data[i].timestamp, true, true);
// }
// setInterval(function () {
// //get tick
// var x = (new Date()).getTime(), // current time
// y = Math.round(Math.random() * 100);
// series.addPoint([x, y], true, true);
// }, 1000);
}
}
},
title: {
text: 'Temperature Sensor Readings'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Degrees Celcius'
},
plotLines: [{
value: -10,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Minimum tolerated.'
}
}, {
value: 20,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Maximum tolerated.'
}
}]},
plotOptions: {
series: {
compare: 'percent'
}
},
series: [{
name: 'Temp',
data: (function () {
var temp = [];
for (var i = 0; i < data.length; i++) {
temp.push([
data[i].timestamp,
parseFloat(data[i].temp)
]);
}
return temp;
}()),
tooltip: {
valueDecimals: 2
}},
{
name: 'Ambient Temp',
data: (function () {
var aTemp = [];
for (var i = 0; i < data.length; i++) {
aTemp.push([
data[i].timestamp,
parseFloat(data[i].aTemp)
]);
}
return aTemp;
}()),
tooltip: {
valueDecimals: 2
},
}]
});
})
}
$(document).ready(function(){
buildAndUpdateTempChart(); //this is async so there rest of the app can continue to work
});
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);
}
},
}
},