We Keep Coding

Highcharts - Not showing data

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

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

HighCharts Stacked Column Adding Onclick Event to the chart

I am working on a Highchart column chart.
I need to add an onclick event to it so I can get data back when I click on the different columns.
Here is my current full code.
var chart;
$(function () {
$.ajax({
url: 'url here',
method: 'GET',
async: false,
success: function(result) {
themainData = result;
}
});
var mainData = [themainData];
var chList=[];
var voList=[];
var coList=[];
for (var i = 0; i < mainData[0].ch.length; i++) {
var obj = mainData[0].ch[i];
var chlst = obj.name;
var vl = obj.st.vo;
var cl = obj.st.co;
chList.push(chlst);
voList.push(vl);
coList.push(cl);
}
var chart = {
type: 'column',
};
var title = {
text: 'Vo and Co'
};
var xAxis = {
categories: chList
};
var yAxis ={
min: 0,
title: {
text: 'Ch'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
};
var legend = {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
};
var tooltip = {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
};
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
var credits = {
enabled: false
};
var series= [{
name: 'Vo',
data: voList
}, {
name: 'Co',
data: coList
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
Where do I add the onclick event here?

You can add the click event on the chart, series, or point. I think it makes sense in your case to add the click event to the series.
var series= [{
name: 'Vo',
data: voList
events: {
click: function (event) {}
}
}, {
name: 'Co',
data: coList
}];
event.point is the point that is clicked on. See http://api.highcharts.com/highcharts/series%3Cbar%3E.events.click

This works for me,
chart: {
type: "bar",
},
title: {
text: "Stacked bar chart",
},
xAxis: {
categories: ["Apples", "Oranges", "Pears", "Grapes", "Bananas"],
},
yAxis: {
min: 0,
title: {
text: "Total fruit consumption",
},
},
legend: {
reversed: true,
},
plotOptions: {
series: {
cursor: 'pointer',
stacking: "normal",
events: {
click: function(event) {
alert(
this.name + ' clicked\n' +
'Alt: ' + event.altKey + '\n' +
'Control: ' + event.ctrlKey + '\n' +
'Meta: ' + event.metaKey + '\n' +
'Shift: ' + event.shiftKey
);
}
}
},
},
series: [{
name: "John",
data: [5, 3, 4, 7, 2],
},
{
name: "Jane",
data: [2, 2, 3, 2, 1],
},
{
name: "Joe",
data: [3, 4, 4, 2, 5],
},
],
});```

Kendo chart will not refresh

I'm using a Kendo Chart, the first call works fine but when I call
setInterval(getCharts, 800); the charts brings back the old results every time. If I refresh the page the chart brings the updates results. What am i doing wrong?
If I call $(#chartid).data('KendoChart').datasource.read(); it brings error datasource is undefined
function myCallback(result) {
// Code that depends on 'result'
totalcountvar = result;
return totalcountvar;
}
function foo(callback, id) {
$.ajax({
type: "POST",
url: "Data/OutageCountHandler.ashx?id=" + id,
data: "{}",
async: false,
contentType: "text/json; charset=utf-8",
dataType: "json",
success: callback
});
}
function createChart2(chartid, c_title, fieldName, q_id) {
if (q_id == 2) { foo(myCallback, 4); c_title = c_title + totalcountvar; }
if (q_id == 3) { foo(myCallback, 2); c_title = c_title + totalcountvar; }
if (q_id == 4) { foo(myCallback, 3); c_title = c_title + totalcountvar; }
var sharableDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "Data/ChartDataHandler.ashx?id=" + q_id,
dataType: "json"
}
}
});
// Bind data to Chart
$("#" + chartid).kendoChart({
theme: "moonlight",
chartArea: {
width: 800,
height: 400,
},
title: {
text: c_title
},
dataSource: sharableDataSource,
series: [{
field: fieldName.replace(/\s+/g, ''),
name: fieldName,
color: "#3074D8",
noteTextField: "Type",
notes: {
icon: {
visible: false
},
line: {
length: 20,
color: "transparent"
},
label: {
field:"Type",
position: "outside"
}
}
}],
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent"
}
},
categoryAxis: {
field: "Area",
},
tooltip: {
visible: true,
background: "white",
format: "{0}",
template: "#= series.name #: #= value #"
},
legend: {
position: "bottom"
}
});
}