Highchart speedometer take input from csv - csv

I am trying to read the data from csv and display it as a input to Speedometer but I am unable to get the chart. Please tell me where i am going wrong.
My code is:
$(document).ready(function() {
var options = {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: []
};
$.get('data.csv', function(data) {
var series = {
data: [],
name: 'Speed',
tooltip: {
valueSuffix: ' km/h'
}
};
series.data.push(parseFloat(data));
options.series.push(series);
alert("data "+options.series);
var chart = new Highcharts.Chart(options);
});
});
and the csv file is simple
data.csv has only one value 30.
or incase it is
t1,30
t2,40
t3,60
how do i display 3 corresponding speedometers with respective speed.
Your help is greatly appreciated.
Thanks in advance.

In your case data your data (from ajax) is a single string, but you need to split elements and then choose which should be parsed to integer (parseFloat).

Related

One series name in higcharts not getting populated even though json send the correct information

The last series in a bar chart is showing "Series 4" as a name, even though its proper name is coming correcty from json file.
The information from the json file comes from a SQL query that prints the information in a string with the following format:
[
{"name": "Operation","data": [{"y":3000, "second": 1500, "third": 5}]},
{"name": "Mechanical","data": [{"y":2515, "second": 515, "third": 8}]},
{"name": "Electrical","data": [{"y":1800, "second": 475, "third": 10}]},
{"name": "Operation Slag","data": [{"y":1000, "second": 1500, "third": 7}]}
]
Since the colors of the series are set manually, I am using the below to add just data and name to each series:
jspData.forEach(function(jspData, i) {
Delays.series[i].setData(jspData.data);
Delays.series[i].setName(jspData.name);
}];
This is working as expected until the last series which show "Series 4" name and not "Operation Slag".
$(function () {
$(document).ready(function(){
$.getJSON('getData.json', function(jspData) {
var Delays = new Highcharts.chart({
chart: {
renderTo: 'Delays',
type: 'bar'
},
xAxis: {
categories: [''],
lineWidth: 0,
minorTickLength: 0,
tickLength: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
text: null
}
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
lineWidth: 0,
tickWidth: 0,
tickLength: 0,
min: 0,
title: null,
labels: {
enabled: false,
}
},
tooltip: {
enabled:true,
style:{fontSize:'10px', fontFamily:"sans-serif"},
formatter: function() {
console.log(this);
return 'Total duration: ' + this.y + 'min<br/>Delay Code: ' + this.point.second + '<br/>Count of Events: ' + this.point.third;
},
},
plotOptions: {
bar: {
borderWidth: 0.5,
dataLabels: {
enabled: true,
format: '{series.name}',
style: {
fontSize: "10px",
fontWeight:'normal',
textOutline: false,
fontFamily: 'sans-serif',
},
}
},
series: {
groupPadding: 0,
pointPadding: 0,
},
},
legend:{
enabled:false,
},
series: [{
color:'#4572A7',
data: []
}, {
color:'#89A54E',
data: []
}, {
color:'#AA4643',
data: []
}, {
color:'#A1745B',
data: []
}],
});
jspData.forEach(function(jspData, i) {
Delays.series[i].setData(jspData.data);
Delays.series[i].setName(jspData.name);
});
});
});
});
Last series name should not be "Series 4" but "Operation Slag". Chart is render porperly all other data is populated correctly.
The setName method is internal and it requires to redraw the chart. In your case it's enough to change the order of calls, because setData causes redraw:
jspData.forEach(function(jspData, i) {
Delays.series[i].setName(jspData.name);
Delays.series[i].setData(jspData.data);
});
Live demo: http://jsfiddle.net/BlackLabel/0qkf26zp/
API: https://api.highcharts.com/class-reference/Highcharts.Series#setData

How to update just data attribute under series in highcharts with json?

I am currently new on this and I am looking for the easiest way to load, from a json file, the data for different series, but keeping other attributes of each serie as they are in the javascript.
So as shown in the below code, there are two series "Carbon" and "Add". The JSON file will just have the data for both series:
[
{"data":[70]},
{"data":[-30]}
]
The script that I have is as the one below:
$(function () {
$(document).ready(function(){
$.getJSON('carbonData.json', function(data) {
var carbon = new Highcharts.chart({
chart: {
renderTo: 'Carbon',
marginLeft:-30,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
type: 'bar'
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
labels:{enabled:false},
lineWidth: 0,
minorTickLength: 0,
tickLength: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
categories: ['']
},
yAxis: {
labels:{
enabled: false,
},
plotLines: [{
value: -30,
label: {
text: 'Target<br/>30 kg/t',
style:{fontSize: "10px"},
rotation:0,
align: 'center',
x: 0,
y:25
}
},{
value: 70,
label: {
text: 'Target<br/>70 kg/t',
style:{fontSize: "10px"},
rotation:0,
align: 'center',
x: 0,
y:25
}
}],
gridLineWidth: 0,
minorGridLineWidth: 0,
min: -45,
max:75,
title: {
text: ''
}
},
colors:['#4572A7','#AA4643'],
legend: {
enabled: false,
},
tooltip: {
enabled:false,
},
plotOptions: {
series: {
stacking: 'normal',
}
},
series: [{
name: 'Carbon',
data: [70],
dataLabels: {
enabled:true,
x: 16,
format: '{series.name}<br/>{point.y} kg/t',
style: {
align: 'center',
fontSize: "10px",
fontWeight:'normal',
textOutline: false,
fontFamily: 'sans-serif',
'text-anchor': 'middle'
}
}
}, {
name: 'Add',
data: [-30],
dataLabels: {
enabled:true,
x:13,
formatter: function() {
return this.series.name+'<br/>'+Math.abs(this.y)+' kg/t';
},
style: {
color: 'white',
align: 'center',
fontSize: "10px",
fontWeight:'normal',
textOutline: false,
fontFamily: 'sans-serif',
'text-anchor': 'middle'
}
}
}]
});
});
});
});
So I am looking to map the information of the JSON file to each of the series correspondingly.
Thanks.
Use setData method:
var data = [{
"data": [70]
},
{
"data": [-30]
}
]
var chart = Highcharts.chart('container', {
series: [{
color: 'red',
data: []
}, {
color: 'blue',
data: []
}]
});
document.getElementById("data").addEventListener('click', function() {
data.forEach(function(el, i) {
chart.series[i].setData(el.data);
});
});
Live demo: http://jsfiddle.net/BlackLabel/z5aLvgxq/
API: https://api.highcharts.com/class-reference/Highcharts.Series#setData

Stacked bar chart from JSON file - seems to be ignoring a value

Pretty new to this stuff, so any help is greatly appreciated. To start off with, here is my JSON file's contents:
[
{
"drg": "NONSPECIFIC CEREBROVASCULAR DISORDERS W MCC",
"approved": 124,
"denied": 38
},
{
"drg": "SEIZURES WO MCC",
"approved": 138,
"denied": 26
},
{
"drg": "CHRONIC OBSTRUCTIVE PULMONARY DISEASE W CC",
"approved": 352,
"denied": 61
},
{
"drg": "CHEST PAIN",
"approved": 246,
"denied": 44
},
{
"drg": "TRANSIENT ISCHEMIA",
"approved": 205,
"denied": 37
},
{
"drg": "OTHER DISORDERS OF NERVOUS SYSTEM W CC",
"approved": 133,
"denied": 23
},
{
"drg": "DIABETES W MCC",
"approved": 151,
"denied": 27
},
{
"drg": "CARDIAC ARRHYTHMIA CONDUCTION DISORDERS W CC",
"approved": 336,
"denied": 55
},
{
"drg": "HYPERTENSION WO MCC",
"approved": 177,
"denied": 29
},
{
"drg": "POISONING TOXIC EFFECTS OF DRUGS WO MCC",
"approved": 144,
"denied": 24
}
]
My stacked bar chart, which worked fine with a CSV file, keeps ignoring the "denied" value. I suspect the issue has something to do with my formatting of the "processed_json.push()" portion of my code. It renders the approved value stacked on top of itself. Here is the script file:
<script>
$(document).ready(function() {
var processed_json = new Array();
$.getJSON('/dashboard-test-data/denied-percentage-2015-chart.json', function(data) {
for (i = 0; i < data.length; i++) {
processed_json.push([data[i].drg, data[i].approved, data[i].denied]);
}
$('#denied-percentage-2015-chart').highcharts({
chart: {
type: 'bar'
},
credits: {
text: 'Vortext Analytics',
href: 'http://www.vortextanalytics.com'
},
title: {
text: 'Top 10 DRG by Denial Percentage 2015'
},
xAxis: {
type: 'category',
},
navigation: {
menuStyle: {
border: '1px solid #ddd',
boxShadow: 'none',
},
menuItemStyle: {
padding: '5px 1.5rem',
},
menuItemHoverStyle: {
backgroundColor: '#f7f7f9',
color: '#666'
},
buttonOptions: {
height: 40,
width: 46,
symbolX: 23,
symbolY: 22,
x: 10,
y: -15,
symbolSize: 13,
}
},
yAxis: {
min: 0,
title: {
text: 'Total Records'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
}
}
},
legend: {
align: 'left',
x: 0,
verticalAlign: 'bottom',
y: 22,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
reversed: true,
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: {point.y:,0f} of {point.stackTotal:,0f} <b>({point.percentage:.1f}%)</b><br />',
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textOutline: 'none',
fontWeight: 'normal',
fontSize: '9px'
}
},
pointWidth: 20,
}
},
series: [{
name: 'approved',
color: '#55B4E4',
data: processed_json,
}, {
name: 'denied',
color: '#005079',
data: processed_json,
}],
});
});
});
</script>
Here is what the end product should produce (screen grab from my csv version):
Correct
And here is what I'm getting from the JSON file: incorrect
Any assistance or guidance is greatly appreciated. Thanks.
Have a look at highchart's stacked bar chart example. For each series, data contains the array of values for that series.
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]
}]
In your case, instead of creating the processed_json array of objects, you should create separate arrays containing each series' values.
Change the loop this way:
var xAxis = []
, approvedCount = []
, deniedCount = []
for (i = 0; i < data.length; i++) {
xAxis.push(data[i].drg);
approvedCount.push(data[i].approved);
deniedCount.push(data[i].denied);
Then adapt the chart's instantiation accordingly:
// (...)
xAxis: {
categories: xAxis
},
// (...)
series: [{
name: 'approved',
color: '#55B4E4',
data: approvedCount,
}, {
name: 'denied',
color: '#005079',
data: deniedCount,
}],
// (...)

populating x-axis(Category) Highcharts ajax

I need assistance on how to dynamically bind my x-axis. I have written a webservice, that will fetch the data from the stored procedure.
I am stuck on displaying just the first column from the SP as for the x-axis.
$.ajax({
type: "POST",
url: "/path/path.asmx/xpath",
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function(data) {
alert("X_axis function is being hit")
// Parse JSON data:
var jsonCategories = eval('(' + data + ')');
alert(jsonCategories);
// Pass parsed data to the chart:
$('#Div3').xAxis[0].setCategories(jsonCategories);
}
})
// };
$('#Div3').highcharts({
chart: {
type: 'areaspline',
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
}
},
title: {
text: 'Average Disc Space consumption',
style: { fontSize: 10, color: '#E0E0E3' }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 0,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#EEE'
},
legend: {
enabled: true
},
xAxis: {
categories: [],
labels: {
style: {
color: '#E0E0E3'
}
},
plotBands: [{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Disc (GB)',
style: { fontSize: 10, color: '#E0E0E3' }
},
labels: {
style: {
color: '#E0E0E3'
}
}
},
tooltip: {
shared: true,
valueSuffix: ' GB'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'DB size',
data: [20, 10, 65, 3, 55, 62, 58]
}, {
name: 'Data size',
data: [19, 34, 47, 31, 3, 54, 41]
},
{
name: 'Log size',
data: [11, 34, 49, 38, 38, 80, 10]
},
{
name: 'Backup size',
data: [1, 32, 47, 3, 39, 59, 4]
}
]
});

Transparent plot area of heatmap using highcharts

how to make a heatmap's plot area as transparent.
i would like to remove all the white blocks in the chart and make it transparent, so that background colors are visible.
refer this fiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
backgroundColor: {
linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
stops: [
[0.23, 'rgb(240, 59, 9)'],
[0.5, 'rgb(255, 224, 80)'],
[0.67, 'rgb(54, 64, 207)'],
[0.99, 'rgb(13, 163, 35)'],
[1, 'rgb(217, 186, 50']
]
},
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor:'#FFFFFF'
//maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0,0,0],[0,1,19],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115],[5,0,88],[5,1,32],[5,2,12],[5,3,6],[5,4,120],[6,0,13],[6,1,44],[6,2,88],[6,3,98],[6,4,96],[7,0,31],[7,1,1],[7,2,82],[7,3,32],[7,4,30],[8,0,85],[8,1,97],[8,2,123],[8,3,64],[8,4,84],[9,0,47],[9,1,114],[9,2,31],[9,3,48],[9,4,91]],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none'
}
}
}]
});
});
Here is the fiddle solution
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
plotBackgroundColor: {
linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
stops: [
[0.03, 'rgb(247, 88, 45)'],
[0.5, 'rgb(255, 224, 80)'],
[0.67, 'rgb(54, 64, 207)'],
[0.99, 'rgb(13, 163, 35)'],
[1, 'rgb(217, 186, 50']
]
}
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Insignificant', 'Minimum', 'Significant', 'Material', 'Critical']
},
yAxis: {
categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
title: null
},
colorAxis: {
min: 0,
minColor: 'transparent',
maxColor:'transparent'
//maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0,0,0],[0,1],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115]],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none'
}
}
}]
});
});