When i tried to pass the string value(data) to highchart series, it return blank chart. How to use the String value in series in highchart jquery plugin.
var data="{name: 'Jane',data: [1, 0, 4]},{name: 'John',data: [5, 7, 3]},{name: 'RAHUL', data: [1, 5, 4]}";
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series:[data]
});
Note: the data will be passed as dynamic.
Check this : http://jsfiddle.net/prathi89/FDjq7/26/
JSON.parse() is not working for you as your data is not a valid JSON string.
There is a trick, however, to force JavaScript to parse that kind of strings:
var data="{name: 'Jane',data: [1, 0, 4]},{name: 'John',data: [5, 7, 3]},{name: 'RAHUL', data: [1, 5, 4]}";
console.log(Function("return [" + data + "];")());
This is not clean and considered harmful, so if you can get your data in a valid JSON format - do it instead.
http://jsfiddle.net/neustroev_ai/FDjq7/27/
Related
I have the code to generate a sine wave in the javascript library- function-plot:
functionPlot({
target: '#domain',
yAxis: {domain: [-1, 1]},
xAxis: {domain: [8, 24]},
data: [{
fn: 'sin(x)'
}]
})
But it doesn't generate a graph when I plot sin(kx-wt) which is what needed for a moving wave.
I think the library only takes in strings as inputs.
Is there any way to bypass this and generate a plot of a function containing variables?
You can declare a string as
var myfunction = "sin(kx-wt)"
and input this function as:
data: [{
fn: myfunction
}]
Now, you can declare variables for k,w and t.
In your case, you want to animate the t value.
I am doing this by using setTimeout
var t = 0;
function mytimer(){
t+=.5
var funb = "sin("+k+"*x"+-t+")";
var options = {
target: '#root',
xAxis: { domain: [0, 10] },
yAxis: { domain: [-3, 3] },
data: [
{
fn: funb
},
]
}
functionPlot(options)
document.getElementById("test").innerHTML = "t="+t;
setTimeout(mytimer, 50);
}
window.onload=setTimeout(mytimer,50);
implementation example: https://pbphysics.blogspot.com/2022/09/test-python.html
I'm using Highcharts with hebrew names. When I have negative values, the tooltip display the minus sign (-) on the right side.
tooltip display
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'שרה',
data: [5, 3, -4, 7, -2]
}, {
name: 'שי',
data: [2, -2, -3, 2, 1]
}]
});
});
jsfiddle
How to display it on the left side?
Thanks for your help.
check out this fiddle
http://jsfiddle.net/mooioom/upcq96k5/
A general useful tip for all numeral-direction-problems in RTL languages is to
apply direction:ltr and display:inline-block on the element which is wrapping the number.
in this specific case you also need to add tooltip : { useHTML:true } on the highcharts object in order for highcharts to render the tooltip using html (and not svg) ...
I have data that is returned in an integer format that is based on time, but isn't a measurement of time that we normally use.
The integers are not evenly spaced, so I'm trying reflect that in the chart.
Is there any way to do this without the time in milliseconds?
Here's what I've got so far:
$('#container').highcharts({
chart: {
type: 'line',
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
categories: xCategories(),
title: {
text: 'Time'
},
ordinal: true
},
series: [{
data: getInterestRates()
}]
});
ordinal: true doesn't seem to work because this isn't a formal time format.
Thanks in advance for your help.
Example Data:
{
"integerOfTime": 1024,
"thingMeasuredOverTime": 0,
},
{
"integerOfTime": 2048,
"thingMeasuredOverTime": 5,
},
{
"integerOfTime": 4096,
"thingMeasuredOverTime": 5,
},
This can be done using a x-axis of type linear (this is the default type), and passing an array of [x,y] pairs as data of your series. Given your example data format you'll have to convert it into this format.
A simple Highcharts example would be (JSFiddle):
$('#container').highcharts({
xAxis: {
type: 'linear'
},
series: [{
data: [[1024,0],[2048,5],[4096,5]]
}]
});
The format conversion could be done like this (JSFiddle):
var json = [{
"integerOfTime": 1024,
"thingMeasuredOverTime": 0,
}, {
"integerOfTime": 2048,
"thingMeasuredOverTime": 5,
}, {
"integerOfTime": 4096,
"thingMeasuredOverTime": 5,
}];
var data = [];
$.each(json, function(i, v) {
data.push([v.integerOfTime, v.thingMeasuredOverTime]);
});
Server is sending back data like this:
{"barData":
[
{"Accepted":[0,0,0]},
{"Rejected":[0,0,0]},
{"In_Process":[0,1,0]}]
}
In the browser, it shows up as such:
My perhaps (and very likely) incorrect belief was that this was the correct structure to populate a Highcharts stacked bar chart as seen here:
Example Stacked Bar in jsFiddle
The example in the documentation shows a fixed data set that appears like this:
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]
}]
This is what I was attempting to emulate. So, at the end of all that, I get a zero plot. My Javascript looks like this:
$.ajax({
url : 'http://localhost:8080/afta/report/transfersbynetwork',
success : function(point) {
data = [];
$.each(point.barData, function(itemNo, item) {
data.push([ item[0], parseInt(item[1][0]), parseInt(item[1][1]), parseInt(item[1][2])]);
});
barchart = new Highcharts.Chart(baroptions);
baroptions.series[0].data = data;
},
cache : false
});
So where did I bone this up? I'm getting no plot and am quite convinced the problem is either in my presentation of the data from the server (possible) or in the javascript that's parsing the data structure and loading the series (highly likely).
Any insight would be appreciated.
Based on your structure, you need to change your function to process the data:
$(function () {
var point = {
"barData": [{
"Accepted": [1, 2, 3]
}, {
"Rejected": [3, 4, 5]
}, {
"In_Process": [0, 1, 0]
}]
},
data = [];
$.each(point.barData, function (itemNo, item) {
for (var prop in item) {
data.push({
name: prop,
data: [parseInt(item[prop][0]), parseInt(item[prop][1]), parseInt(item[prop][2])]
});
}
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: data
});
});
http://jsfiddle.net/9jVJb/
I'm trying to embed a small chart (using Highcharts) on my webpage. I've provided an example of what I'm trying to do. When the page loads, the chart takes up the entire page by overwriting whats in the mainDiv (which I haven't included in here). I've tried modifying the dimensions of the division and the chart. I've also looked at the 'renderTo' parameter for 'chart', and tried rendering it as an object reference.
Does anyone know what might be causing this issue? Am I missing a critical parameter in my chart? Or have I written my code incorrectly? Thanks.
<!-- mainDiv is what's getting overwritten -->
<div id="mainDiv"></div>
<div id="container" style="width:10px; height:10px;"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
I fixed this by changing the id attribute of my element from "container" to just "contain" (and obviously changed any code that previously referenced "container" to just reference "contain").
For whatever reason this fixed my problem, although I'm still not quite sure why. Perhaps "container" is a keyword used by Highcharts.
Final code looked like this:
<!-- mainDiv is what's getting overwritten -->
<div id="mainDiv"></div>
<div id="contain" style="width:10px; height:10px;"></div>
<script>
$(function () {
$('#contain').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
Not sure if this will work but have you tried the renderTo: 'divname' option... Something like...
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});