I am working on a project that is supposed to take csv data that is being written in real time and display it on an html page. I am using Javascript, and the JQuery, HighCharts, and PapaParse libraries.
Here is my JSFiddle with my code: https://jsfiddle.net/m5n8xdo9/3/
I know it doesn't look right, but I don't know how to make it look like it looks on my computer. Should I use a different hosting site?
When I hardcode dummy data into the chart like this:
//Altitude
$(function () {
$('#altGraph').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Payload Altitude'
},
subtitle: {
text: 'Altitude (m) vs. Time (s)'
},
xAxis: {
categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
},
yAxis: {
title: {
text: 'Altitude (m)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Altitude',
data: //dummy data here
}]
});
});
it all works and looks nice. But when I use papaparse to parse the csv into arrays of data, and pass an array of data to the corresponding chart like so:
//Altitude
$(function () {
$('#altGraph').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Payload Altitude'
},
subtitle: {
text: 'Altitude (m) vs. Time (s)'
},
xAxis: {
categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
},
yAxis: {
title: {
text: 'Altitude (m)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Altitude',
data: altitude
}]
});
});
the charts show up blank.
On my computer, after you choose a file the charts show up, though empty of data points. That's my problem. I was thinking that maybe since the charts are written to the page before the data is uploaded, that would be why the data isn't showing up. I am currently at a loss as to how to fix this.
The problem is that your papaParse convert values to strings in array, instead of numbers. See "dynamicTyping" parameter and then set it as true.
Related
I currently have an array of data that I am trying to display on Highcharts.
const data = [10,31,13,19,21]
I am having issues with displaying a specific index of an array. For example, I would like one column to be data: data[0] the other data: data[1] etc.. When doing this I do not have any data displaying on my graph.
I am able to display data when doing data:data and displaying the whole array which creates multiple columns but for my situation, like to keep each point in one column.
Here is a link to a jsfiddle
desired look with specific index of an array i.e. data: data[1]:
outcome if using data: data
here is my code:
const data = [10,31,13,19,21]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function () {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Low',
data: data[0],
showInLegend: false,
},{
name: 'Low',
data: data[1]
},{
name: 'Medium-Low',
data: data[2]
}, {
name: 'Medium',
data: data[3]
}, {
name: 'Medium-High',
data: data[4]
}, {
name: 'High',
data: data[5]
}
]
});
The data must be an array, meanwhile data[0], data[1], ... are numbers. Instead, you need to assign those values in the array, like: data: [data[1]].
Demo: https://jsfiddle.net/BlackLabel/ty42b0hs/
series: [{
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: false,
},{
name: 'Low',
color: '#0D6302',
data: [data[1]]
}, ...]
I am using Fusion charts but one of my charts doesn't load. My html is :
<fusioncharts [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource">
</fusioncharts>
And the data for the chart:
this.dataSource = {
'chart': {
'caption': 'Number of posts',
'startingangle': '120',
'showlabels': '0',
'showlegend': '1',
'enablemultislicing': '0',
'slicingdistance': '15',
'showpercentvalues': '1',
'showpercentintooltip': '0',
'theme': 'ocean'
},
'data': [
{ label: 'Venezuela', value: '290' },
{ label: 'Saudi', value: '260' },
{ label: 'Canada', value: '180' },
{ label: 'Iran', value: '140' },
{ label: 'Russia', value: '115' },
{ label: 'UAE', value: '100' },
{ label: 'US', value: '30' },
{ label: 'China', value: '30' }
]
};
The particular chart doesn't load. In the console I also got another error TypeError: i.title is undefined. It is in vendor.2d90d48c94b0a738e874.bundle.js. The file is minified and there is no way to unerstand from where it comes. Atleast I can't. Can I ask you for some advice?
I am very new at highcharts. I am trying to make a basic graph showing bitcoin price. However, I'm stuck at the data part.
How do I get the data? And how would hourly, weekly and monthly data represent?
This is what I have till now with me.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px"></div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script>
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
},
{
type: 'hour',
count: 1,
text: '12h'
},
{
type: 'hour',
count: 1,
text: '24h'
},
{
type: 'week',
count: 1,
text: '1w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
},
{
type: 'all',
text: 'All'
}]
},
title: {
text: 'Vertcoin Price'
},
series: [{
name: 'VTC',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
</script>
</html>
Any and all guidance will be helpful. I could not find any solution / tutorial to help me out.
You can provide your chart constructor with all the that you get via getJSON function and apply forced data grouping. Then you just need to update dataGrouping.units when needed (e.g. on button click).
$('#months').click(function() {
chart.update({
plotOptions: {
series: {
dataGrouping: {
units: [
[
'month', [1]
]
]
}
}
}
});
});
Live demo: http://jsfiddle.net/kkulig/avd0gqgr/
Docs reference: https://www.highcharts.com/docs/advanced-chart-features/data-grouping
API references: https://api.highcharts.com/highstock/plotOptions.line.dataGrouping
I am using angularjs highchart by integrating the DI of highcharts-ng
I have created different type of charts by following options
var chart = {
options: {
chart: {
type: 'bar'
}
},
title: {
text: chartData.name
},
subtitle: {
text: chartData.subname
},
rangeSelector: {
enabled:true,
selected: 1
},
xAxis: {
title: {
text: chartData.x.title
}
},
yAxis: {
title: {
text: chartData.y.title
}
},
series: [{
name: chartData.data[0].name,
data: chartData.data[0].data,
dashStyle: 'longdash'
}, {
name: chartData.data[1].name,
data: chartData.data[1].data,
dashStyle: 'dot'
}, {
name: chartData.data[2].name,
data: chartData.data[2].data
}]
}
I have added rangeslider options but its not reflecting in chart.
How to integrate highchart range slider in angualrjs
Include a reference to highstock instead of highcharts. Both are compatible with highcharts-ng, but only highstock supports rangeSelector. Then, move rangeSelector into the options object. Note - "range slider" functionality is called navigator in the highstock docs, and must also be added to options.
var chart = {
options: {
chart: {
type: 'bar'
},
rangeSelector: {
enabled: true
},
navigator: {
enabled: true
}
}
...
};
Here is a demo, from highcharts-ng's GitHub page:
http://jsfiddle.net/pablojim/r88yszk0/
I am having an issue with rangeSelector in HighCharts/HighStocks. For some reason, smaller selections are disables or are getting disabled after making a range selection. My question is this, how can I make sure that all range selection buttons are active since data is available for a specific range.
Here is a fiddle example.
Any advice is much appreciated.
Here is an example of my rangeSelector:
rangeSelector: {
buttons: [{
type: 'minute',
count: 1,
text: '1m'
},{
type: 'minute',
count: 15,
text: '15m'
},{
type: 'minute',
count: 60,
text: '1h'
},{
type: 'day',
count: 1,
text: '1day'
}, {
type: 'month',
count: 1,
text: '1mo'
}, {
type: 'month',
count: 6,
text: '6mo'
},{
type: 'ytd',
text: 'YTD'
},
{
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 2
},
Here's the data source you are using: http://www.highcharts.com/samples/data/usdeur.js
Note that the most granular it gets is one value per day. If highcharts let you zoom in to a day or less, it would just be displaying one value... not very useful.
This is expected behavior. With a more granular source, everything will be just fine!