I'm trying to create a simple bar chart using data stored at postgresql db with the code below. The axis of the chart appears but the data don't show up.
When I access the http://127.0.0.1:3000/test.json the data shows in this format:
[{"value":4.0},{"value":1.0},{"value":4.0},{"value":2.0},{"value":2.0},{"value":3.0},{"value":2.0}]
So I'm trying to change this format to [],[],[] and then use it with highchart. But I it seems that $.getJSON and my loop for (i=0.... aren't working.
<div id="orders_chart" style="width:560px; height:300px"></div>
<script type="text/javascript" charset="utf-8">
$(function () {
var test = [];
$.getJSON('http://127.0.0.1:3000/test.json', function(data) {
for (i = 1; i < data.length; i++){
test.push([data[i].key, data[i].value]);
}
$('#orders_chart').highcharts({
chart: {
type: "column"
},
title: {
text: "Orders by Day"
},
series: [{
data: test
}]
});
});
If anyone has any idea how to fix it or another approach to use highcharts with postgres database (stored from csv uploaded files) will help me alot!
In ruby you can create test as
def user_dataset(data)
data.map do |key, value|
{
key[:value]
}
end
end
which will return you data in [4.0, 1.0, 4.0, 2.0, 2.0, 3.0, 2.0]
As per example of barchart implementation for highcharts
example
you need data in format
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}]
for your case data is test and you can put value in place of name
Related
I have a dataset with the date indicated in the style of »2020/01/01«. Now, my Fiddle displays the corresponding data correctly considering the time/year (the right part climbs very steeply):
Pretty much the same code in the original PHP version however does not display it the correct way:
The code is really almost the same:
$.get('graph_global_ch4_concentration_800000.csv', function(data)
{
var chart = new Highcharts.Chart(
{
chart:
{
renderTo: "div_graph_ch4",
type: "spline"
},
xAxis:
{
tickWidth: 0,
tickInterval: 100000
},
data:
{
csv: data
},
});
});
Why is it that the fiddle does it the right way, and my PHP file not?
Thanks for any hints!
So I built a Highcharts application which looks somewhat like this:
https://codesandbox.io/s/angular-opcho
the chart looks like this:
export class ChartComponent implements OnInit {
title = "app";
chart;
updateFromInput = false;
Highcharts = Highcharts;
chartConstructor = "chart";
chartCallback;
data1;
data2;
chartOptions = {
title: {
text: "Global temperature change"
},
subtitle: {
text: "Data input from CSV"
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: []
}
A highcharts application where you can upload csv data.
If you put in csv data which looks similar to this:
"runs","numbers",differences
"run1","1123",21
"run2","222",7200
"run3","31112",60
"run4","412312",32
you will have a nice graph with x and y axis.
Now, what i am trying to do is to build in a range selector for the y axis so i can sort out really high values and have a better view on the lower values.
My problem is, i can only find range selectors that have something to do with date and time. Is there any range selector for my specific problem?
The basic range selector uses setExtremes method, so you can do the same on yAxis:
var chart = Highcharts.chart('container', {
series: [{
type: 'column',
data: [1, 2, 3, 1, 3, 999, 888, 979]
}]
});
document.getElementById('low').addEventListener('click', function() {
chart.yAxis[0].setExtremes(0, 10);
});
document.getElementById('high').addEventListener('click', function() {
chart.yAxis[0].setExtremes(850, 1000);
});
Live demo: http://jsfiddle.net/BlackLabel/hbf2smoc/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I am using a constructor to plot the Highmaps.
$(function() {
var options1 = {
chart: {
renderTo: 'container',
},
series: [{
name: 'Countries',
mapData: Highcharts.maps['custom/world'],
color: '#E0E0E0',
enableMouseTracking: false,
}, ]
};
var drawMap = function(data) {
var newSeriesData = {
type: 'mapbubble',
mapData: Highcharts.maps['custom/world'],
name: 'Population 2013',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
}
options1.series.push(newSeriesData);
var chart = new Highcharts.Map(options1);
};
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function(data) {
var i = 0;
/*while (i < data.length){
drawMap([data[i]]);
i++;
}*/
drawMap(data);
});
});
jsfiddle.
Using a function I am able to plot the whole data in a one go.
I want to iterate through the data and plot it one by one so that the page won't refresh and the new data will not replace the existing ones.
I have tried doing it like:
while (i < data.length){
drawMap([data[i]]);
i++;
}
But only the last point is plotted in the map. Rest of the points are not plotted. (I guess the map is plotted with all the points without persistence. So only the last point is there.)
Note: I followed this and tried for Highmaps.
I have loaded a csv file into a High Charts column chart: it works. However, I cannot figure out how to customize the chart. All the customizing options refer to hard-coded examples where the 'series' and 'categories' are right there in the code. Whereas mine is coming from a csv. How to use the customizing options? My x-axis is "Days" and y-axis is "Total Gallons"This is my code:
<script>
$.get('mergeHighChartsTotal.csv', function(csv) {
$('#map2').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'Water Usage - September'
},
yAxis: {
title: {
text: 'gallons'
}
}
});
});
</script>
You can prepare a json dynamically, based on CSV. You need to load file and prepare custom parsing or use our data module. More infromation you can find here: http://www.highcharts.com/docs/working-with-data/custom-preprocessing
I need to include pagination for my chart (Bar). so that i can control the number of bars that can be displayed. Has anyone tried this earlier?
If this can be achieved, Anyone help me to sort this out.
The basic idea behind changing the 'data' of your chart is to update the series information for it. So that as you press the pagination buttons for your chart, you update the series data directly.
I put together a simple fiddle example based on another question I answered previously.
Check it out here: http://jsfiddle.net/Robodude/EmMxH/71/
html:
<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set A + B
<OPTION VALUE="C">Data Set A + B + C
</SELECT>
<button id="change">Change Data Source</button>
<div id="container" style="height: 400px"></div>
Javascript/Jquery:
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
series: []
};
$("#change").click(function(){
if ($("#list").val() == "A")
{
options.series = [{name: 'A', data: [1,2,3,2,1]}]
}
else if ($("#list").val() == "B")
{
options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]}]
}
else if ($("#list").val() == "C")
{
options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]},{name: 'C', data: [1,1,1,1,1]}]
}
var chart = new Highcharts.Chart(options);
});
This is the previous question I helped answer: Reload chart data via JSON with Highcharts
Obviously, this is a pretty straight forward example. If you update your post with more information, I can possibly expand on this further.
Good luck :)
The other way to do this would be to make use of axis.setExtremes to zoom into the first page then you update the parameters for the prev/next page so rather than the chart refreshing it actual moves left/right.
Pagination in highcharts can be achieved easily, using an extra plugin, Jquery pagination plugin.
I found this forum post informative and helpful.
function pageselectCallback(page_index, jq){
var items_per_page = 3,
max_elem = 5,
from = page_index * items_per_page,
to = from + max_elem,
newcontent = '',
chartData = [];
//pie.series[0].setData( data.slice(from,to) );
if(typeof pie !== 'object') {
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
series: [{
data: []
}]
});
}
pie.series[0].setData( data.slice(from, to) );
// Prevent click eventpropagation
return false;
}
And an working demo is here.