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
Related
I'm developing a web page with multiple charts using Highcharts. Every chart is using a different worksheet as a feed for its data.
Is there an easy way to make only one call to Google sheets to get the whole sheet in one call and then use the response to feed every single chart?
Here is a sample jsFiddle
// Create the chart
Highcharts.chart('container', {
title: {
text: 'Highcharts data from Google Spreadsheets'
},
data: {
googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
googleSpreadsheetWorksheet: 1
}
});
// Create the chart
Highcharts.chart('container2', {
title: {
text: 'Second chart'
},
data: {
googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
googleSpreadsheetWorksheet: 2
}
});
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!
I cannot seem to get the tooltip value label to change using the tooltip: { pointFormat: "custom label"} option.
I'm integrating Highcharts in the chartkick gem, and I've ensured that chartkick is indeed using the highcharts adapter. The other library options work such as xAxis and yAxis.
Here is the code in question:
column_chart #registrations.joins(:clinic).group("clinics.name").count,
title: "Registrations Per Clinic",
library: {
tooltip: {
pointFormat: "Registrations: <b>{point.y}</b>"
},
xAxis: {
title: { text: "Clinic" }
},
yAxis: {
allowDecimals: false,
title: { text: "Number of Registrations" }
}
}
No matter what the tooltip renders with the word Value
You can try tooltip.formatter : Documentation
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
I have found this jsfiddle very helpful when I started working on paginated highchart columns. On top of this good example, I would like to know how I could change the x-axis labels into each data's corresponding name. (Ex. Along the x-axis, we should find the names of 'Fred G. Aandahl', 'Watkins Moorman Abbitt', 'Amos Abbott', etc. with their corresponding y-values and must change accordingly when the "Next" button is clicked.)
I have tried adding "xAxis" option inside the highcharts portion but still had no luck.
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
formatter: function(){
return this.value;
}
}
},
series: [{
data: []
}]
});
and
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
format: '{value}'
}
},
series: [{
data: []
}]
});
Can someone help me regarding on what I am missing in this example? It will be very much appreciated.
You can set type of xAxis to category and without category array the value in axis will be taken from the point. But you will need to change your setData call to
pie.series[0].setData( data.slice(from, to), true, true, false );
xAxis: {
type: 'category'
},
Example: http://jsfiddle.net/kpxp4/8/
I am able to change the x-axis labels accordingly by adding
pie.xAxis[0].update({
categories: category.slice(from, to)
})
after the setData call, where category is an array of all the x-axis labels that you want to display in correspondence to each y-axis value. Moreover, the
xAxis: {
type: 'category'
}
portion, as suggested by #Kacper Madej, works for the specific data format given originally. However, the pie.xAxis[0].update() could be used on a more general sense given that you know the array of x-axis labels that you want to use (regardless of the data or series format that you have).
Here is the link to the jsfiddle.
Hope this could be of any help, too.