How to put data in one column - javascript

I'm using Highcharts.js plugin and everything it's fine, but what I want to show is for example this data:
1, 5, 10, 20
The problem here is that every value it's displayed in one column and what I want is to display all the values in one column, so my question is what can I do to show my chart like I want? Here is my current code:
$(document).ready(function() {
$('#xd').click(function() {
draw();
});
});
function draw() {
var myArray = [];
myArray = [1, 5, 10, 11, 8];
$('#grafic').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Sampled Parts'
},
xAxis: {
categories: ['Data'],
labels: {
rotation: -33,
}
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Resultados'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
legend: {
reversed: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'My Data',
data: myArray
}]
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafic">
</div>
<button id="xd">Click</button>
If you see my code I have 5 columns and what I want is to have all the values in only one column but to be honest I don't have any idea of what can I do.
Codepen code

If you want to stack the values, then you need to create multiple series (each with only one value in it, I guess). Change it from this:
var myArray = [];
myArray = [1, 5, 10, 11, 8];
to this:
series: [{
name: 'mydata',
data: [1]
}, {
name: 'mydata2',
data: [5]
}, {
name: 'mydata3',
data: [10]
}, {
name: 'mydata4',
data: [11]
}, {
name: 'mydata5',
data: [8]
}]
See running sample below:
$(document).ready(function() {
$('#xd').click(function() {
draw();
});
});
function draw() {
$('#grafic').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Sampled Parts'
},
xAxis: {
categories: ['Data'],
labels: {
rotation: -33,
}
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Resultados'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
legend: {
reversed: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
// var myArray = [];
// myArray = [1, 5, 10, 11, 8];
series: [{
name: 'mydata',
data: [1]
}, {
name: 'mydata2',
data: [5]
}, {
name: 'mydata3',
data: [10]
}, {
name: 'mydata4',
data: [11]
}, {
name: 'mydata5',
data: [8]
}]
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafic">
</div>
<button id="xd">Click</button>

Related

Highchart: how to update a dynamic chart by clicking on a button?

I intend to have a button on my web page so that upon clicking a button, a point will be added to a chart without redrawing the whole chart (the chart is a modified version of this http://www.highcharts.com/demo/dynamic-update). However, my current code is not working.
Here is the code in concern: http://jsfiddle.net/wtvaz9gc/7/
var series;
$(function drawCharts(numberOfPoint) {
// if(typeof chartData == undefined){
// chartData = $(dataStore.getXml());
// }
$("#b").click(function(){
series.addPoint([3,3]);
})
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
// window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y;
// console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y);
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: 'Jahre'
},
// gridLineWidth: 0,
// lineWidth:1,
startOnTick: true,
tickPixelInterval: 40,
min: 0,
max: 10,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
yAxis: {
title: {
text: 'Vermögen(in EUR)'
},
labels: {
enabled: true
},
min: 0,
max: 100,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
enabled : false,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: ($(function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i, preValue;
for (i = 0; i < numberOfPoint; i += 1) {
if(i == 0){
data.push({
x: i,
y: 10
});
} else {
data.push({
x: i,
y: chartData["wealth"][0][i]
});
}
}
// showMsg(data);
// console.log(data);
return data;
}()))
}]
});
});
});
When I tries to run it in chrome, I got the following error report:
highcharts.js:Uncaught TypeError: i.splice is not a function
addPoint # highcharts.js:...
How should I use the function "addPoint" in this case?
Or should I use other method to achieve the purpose?
There is something wrong with the function generating your initial data, but addPoint is working fine:
var series;
$(function drawCharts(numberOfPoint) {
// if(typeof chartData == undefined){
// chartData = $(dataStore.getXml());
// }
$("#b").click(function(){
series.addPoint([10,10]);
})
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
// window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y;
// console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y);
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: 'Jahre'
},
// gridLineWidth: 0,
// lineWidth:1,
startOnTick: true,
tickPixelInterval: 40,
min: 0,
max: 10,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
yAxis: {
title: {
text: 'Vermögen(in EUR)'
},
labels: {
enabled: true
},
min: 0,
max: 100,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
enabled : false,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: [1,2,3]
}]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="b" href="#" >AddPoints</button>
I am not sure what you are trying to do in your series.data function but removing all that code and defining your chart in your click event so it knows what series is does add the point [3,3].
Series declaration now:
series: [{
name: 'Random data',
data: []
}]
And the click function (no moved after the chart code):
$("#b").click(function() {
var chart = $('#container').highcharts();
chart.series[0].addPoint([3, 3]);
})
Live demo.

Highcharts: dateTime in milliseconds is not recognized

I have a highcharts graph consisting of 3 different plot lines. Y axis is a number format, X axis is a dateTime. The plots are being displayed properly but the labels on X show '00:00:00' and the tooltip shows the 1-st of January 1970.
Here's my code for initialising the chart:
Co2Chart = new Highcharts.Chart({
chart: {
renderTo: 'co2-graph',
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
updateData();
setInterval(updateData, 5000);
}
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M:%S', this.value);
}
}
},
yAxis: {
title: {
text: 'CO2, ppm'
},
plotLines: [{
value: 0,
width: 1
},{
value: 1,
width: 1
},{
value: 2,
width: 1
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
plotOptions: {
spline: {
marker: {
enabled: false
}
}
},
exporting: {
enabled: false
},
series: [{
name: 'Master',
data: []
},
{
name: 'Slave 1',
data: []
},
{
name: 'Slave 2',
data: []
}]
});
This one pushes data:
for(var i = 0; i < array.length; i++){
var time = Date.parse(array[i]["dateTime"]);
Co2Chart.series[0].addPoint(array[i]["masterCo2"], time);
Co2Chart.series[1].addPoint(array[i]["slave1Co2"], time);
Co2Chart.series[2].addPoint(array[i]["slave2Co2"], time);
}
DateTime string that is passed to the Date.parse looks like this 2016-03-28 22:47:49. And in milliseconds – 1459198069000
Any ideas why it's not showing?
The problem is how you use addPoint method:
Co2Chart.series[0].addPoint(array[i]["masterCo2"], time);
Should be:
Co2Chart.series[0].addPoint([time, array[i]["masterCo2"]]);
Or:
Co2Chart.series[0].addPoint({
y: array[i]["masterCo2"],
x: time
});

High chart with diffrent series data

I want to create a chart with different series data. I have a poll with several question and every question has different options.
I tried to use this code :
$(function () {
$('#c_chart').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: [
'Question 1',
'Question 2',
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: [['Option1', 'Option2']],
data: [49.9, 56]
}, {
name: 'Option3',
data: [83.6]
}
]
});});
How can I create this chart like following image:
Chart
my english is basic but, i try to splain rigth?
try to look this links, im not very sure if you need to move something in plotOptions:{} or chart:{}
the other options not draw the chart. i found this links, i'll hope help you
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels
grettins, from mexico :)
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Questions Answers'
},
xAxis: {
categories: ['Question1', 'Question2', 'Question3', 'Question4', 'Question5']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Option Ticked'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>';
}
},
plotOptions: {
column: {
stacking: false
}
},
series: [{
name: 'Option1',
data: [5, 3, 4, 7, 2]
}, {
name: 'Option2',
data: [3, 4, 4, 2, 5]
}, {
name: 'Option3',
data: [2, 5, 6, 2, 1]
}, {
name: 'Option4',
data: [3, 0, 4, 4, 3]
}]
});
});

High chart formatter not working on Highchart API

I am using Highchart library but very disappointed after using the same. Highchart call back function formatter not working for me for any of the chart.
I am using Highchart API, It return image of the chart. but with wrong x-axis value. I want value to be "hello1, hello2, hello3 etc." but it only gives me number 1, 2, 3...
Please help me.
Link Of Js Fiddle : https://jsfiddle.net/stjk38rz/
Code is
var categories = ['Conflict', 'Identity', 'Role', 'Attitude', 'Agility', 'Fairness'],
count = 0;
var options = {
exporting: {
url: 'https://export.highcharts.com/'
},
chart: {
polar: true,
renderTo: 'container',
zoomType: 'x'
},
pane: {
startAngle: 45,
},
title: {
text: 'Highcharts Polar Chart'
},
xAxis: {
tickInterval: 1,
min: 0,
max: 6,
labels: {
enabled: true,
formatter: function () {
if(this.value.toString().substring(0, 6) == 0)
{
return "hello1";
}
if(this.value.toString().substring(0, 6) == 1)
{
return "hello2";
}
if(this.value.toString().substring(0, 6) == 2)
{
return "hello3";
}
if(this.value.toString().substring(0, 6) == 3)
{
return "hello4";
}
if(this.value.toString().substring(0, 6) == 4)
{
return "hello5";
}
if(this.value.toString().substring(0, 6) == 5)
{
return "hello6";
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + categories[Highcharts.numberFormat(this.x, 0) - 1] + '</b><br/>' + 'value: ' + this.y;
}
},
yAxis: {
labels: {
enabled: false
},
min: 0,
tickInterval: 10,
tickPositions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
minorTickInterval: 0
},
plotOptions: {
series: {
pointStart: 0.5,
pointInterval: 1
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'test data',
data: [{
y: 9.5,
color: '#0FCCD9'
}, {
y: 1,
color: '#ED1334'
}, {
y: 3,
color: '#EDCC13'
}, {
y: 4,
color: '#34ED13'
}, {
y: 5,
color: '#34ED13'
}, {
y: 6,
color: '#34ED13'
}]
}]
};
var obj = {},
exportUrl = options.exporting.url;
obj.options = JSON.stringify(options);
obj.type = 'image/png';
obj.async = true;
$.ajax({
type: 'post',
url: exportUrl,
data: obj,
success: function (data) {
var imgContainer = $("#imgContainer");
$('<img>').attr('src', exportUrl + data).attr('width', '250px').appendTo(imgContainer);
$('<a>or Download Here</a>').attr('href', exportUrl + data).appendTo(imgContainer);
}
});
It appears that formatter isn't being called at all.
This could be because it's a polar chart or possibly there's some other conflict in your code overriding this?
As long as you only want text, you can pass the text in as categories, ie:
var categories = ['Conflict', 'Identity', 'Role', 'Attitude', 'Agility', 'Fairness']
xAxis: {
categories: categories
}
Updated fiddle

Disabling label without bar Highstock

I have a column chart Highstock:
http://jsfiddle.net/txfnsubb/
When we change range to smaller values, sometimes it shows us a label of value w/o the bar. For example I see 30 bars and at the end label with 31. Is there a possibility to turn it off? To set chart to showing label only with bar.
$('#container').highcharts('StockChart', {
chart: {
marginTop: 140
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataGrouping: {
approximation: "average"
}
}
},
scrollbar: {
enabled: false
},
navigator: {
top: 40,
xAxis: {
labels: {
formatter: function () {
return x[this.value];
}
}
}
},
xAxis: {
labels: {
y: 50,
max: 150,
formatter: function () {
return x[this.value];
}
}
},
tooltip: {
formatter: function () {
var s = [];
var next = this.x + this.points[0].series.pointRange;
if ((this.x + 1) == next) {
s.push("<b>Position: " + (this.x + 1));
} else {
s.push("<b>Position: " + (this.x + 1) + "-" + next);
}
$.each(this.points, function (i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : <span>' + point.y.toFixed(2));
});
return s.join('<br/>');
},
shared: true
},
series: [{
type: 'column',
name: 'reactivity',
data: data,
showInLegend: false,
tooltip: {
valueDecimals: 2,
shared: true
}
}, {
type: 'spline',
name: 'experiment 1',
data: data2,
color: 'green',
visible: false,
tooltip: {
valueDecimals: 2
}
}, {
type: 'spline',
name: 'experiment 2',
data: data3,
color: 'red',
visible: false,
tooltip: {
valueDecimals: 2
}
}],
legend: {
enabled: true,
margin: 0
},
rangeSelector: {
buttons: [{
type: 'millisecond',
count: seqLength / 5,
text: '0.25'
}, {
type: 'millisecond',
count: seqLength / 3,
text: '0.3'
}, {
type: 'millisecond',
count: seqLength / 2,
text: '0.5'
}, {
type: 'all',
text: '1.0'
}],
inputEnabled: false, // it supports only days
selected: 4 // all
}
});

Categories

Resources