http://jsfiddle.net/ErzQs/
How can I get the output from series0 ? I need the datapoints ... but my solution does not work properly.
data = chart.series[0].data;
You can retrieve the data this way:
$('#button').click(function () {
var chart = $('#container').highcharts();
data = chart.series[0].data;
$(chart.series[0].data).each(function (index, element) {
alert(this.y);
});
});
Working demo: http://jsfiddle.net/ErzQs/1/
Related
https://i.stack.imgur.com/aBY2H.png
getChartData = function(d,i,isBarChart=false){
var cData = [];
angular.forEach(d, function(value, key) {
cData.push({"key": value.key,"value": value.values[i].y});
});
//console.log(cData);
return (isBarChart ? this.toBarChart(cData) : cData);
};
You can use the methods available in javascript. A list of the methods that may be useful for your scenario:
Array.forEach(),
Array.map(), Object.keys(object)
You can use simple javascript forEach method:
Example:
let myArray = [1,2,3,4,5];
myArray.forEach((item) => {
console.log(item);
});
Your updated code:
getChartData = function(d,i,isBarChart=false){
var cData = [];
d.forEach(function(value, key) {
cData.push({"key": value.key,"value": value.values[i].y});
});
//console.log(cData);
return (isBarChart ? this.toBarChart(cData) : cData);
};
Is there currently a way to have a legend item save its state on refresh? For example, I have a graph that has 3 lines: a, b, and c. I toggle off line c so it doesn't show on the graph. Currently when refreshing the page, a, b, and c will show on the graph again. Is there a way to have it remember to turn off c?
Use localStorage feature to store current state of the chart series visibility. You need to change the state of your local storage position when clicking on legend item, so just use the plotOptions.series.events.legendItemClick handler, and then on every chart load event, set your series visibility basing on the stored information.
chart: {
events: {
load: function() {
var series = this.series;
// If there is no legend items visibility flags saved in local storage, save them.
if (!localStorage.legendItems) {
let legend = []
series.forEach(function(series) {
legend.push(series.visible)
})
localStorage.legendItems = legend.toString()
//
} else {
let legend = localStorage.legendItems.split(',')
let legendBooleans = []
legend.forEach(function(elem) {
var isTrueSet = (elem === 'true')
legendBooleans.push(isTrueSet)
})
legendBooleans.forEach(function(state, i) {
series[i].update({
visible: state
})
})
}
}
}
},
plotOptions: {
series: {
events: {
legendItemClick: function() {
var series = this.chart.series
var index = this.index
var legend = localStorage.legendItems.split(',')
var legendBooleans = []
legend.forEach(function(elem) {
var isTrueSet = (elem === 'true')
legendBooleans.push(isTrueSet)
})
// toggle series visibility flag and override it in local storage
legendBooleans[index] = !legendBooleans[index]
localStorage.legendItems = legendBooleans.toString()
}
}
}
},
If you have any questions, just ask.
Live example: https://jsfiddle.net/os961gke/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick
https://api.highcharts.com/highcharts/chart.events.load
I have a problem with an indexeddb query with index when running on IOS devices.
$.indexedDB(dbName).objectStore(tablename).index("INDICE").each(function(itemLocal) {
itemLocal.delete();
}, [VALORINDICE]).then(function() {
callback();
}, function() {
console.log("error");
});
The problem is if there is more than one record that matches the index, it does not eliminate them, it eliminates the first one and leaves. But if for example I put console.log (itemLocal) instead of itemLocal.delete() if it shows all those that match the index. Any suggestions of something that may be leaking?
I have tried with this code and I get the same error(code without api jquery)
var request = indexedDB.open(DATABASE_NAME);
request.onsuccess = function(event) {
var db = request.result;
var transaction = db.transaction(["TABLE"], "readwrite");
var table = transaction.objectStore("TABLE");
var index = table.index("INDEX");
var req = index.openCursor();
req.onsuccess = function() {
var cursor = req.result;
if (cursor) {
console.info(cursor.value);
cursor["delete"]();
cursor["continue"]();
}
};
req.onerror = function(e) {
console.error(e, req);
};
};
request.onerror = function(e) {
console.error(e, request);
};
I have this script on my .html page to display a graph. My values are from -1 to 1 and I have values like 0.0045. It is possible to define this scale on Y axis?
<script>
function js_fun() {
$.getJSON('/myopteboard/data/selectedEngines/'
+ getAllEnginesIdsSelected(), function(datas) {
$.each(datas, function(index, indexData) {
data = indexData.evidencesValues;
console.log(data);
drawChart(data, indexData.name);
});
});
}
var data = [];
var options1 = {
chart : {
renderTo : 'thermal_graph'
},
yAxis : {
labels : {
format : '{value:.002f}'
}
},
series : []
};
var drawChart = function(data, name) {
console.log(name);
// 'series' is an array of objects with keys: 'name' (string) and 'data' (array)
var newSeriesData = {
name : name,
data : data
};
// Add the new data to the series array
options1.series.push(newSeriesData);
// If you want to remove old series data, you can do that here too
// Render the chart
var chart = new Highcharts.Chart(options1);
};
</script>
Next time please provide fiddle for your code.
Try tickInterval option for axis http://jsfiddle.net/Paulson/zwwsuc0L/
I would like to use a CSV file as source for a highcharts graph.
Could you give some guidance? I need to understand basically how to get data in the web page.
Do I need to put the function that load the text file in the "series" part of the js function?
This is what I have so far:
<script type='text/javascript'>
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'chart example'
},
xAxis: {
categories: []
},
yAxis: {
},
series: []
};
$.get('test.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first
// position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 1) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
This is how the data file is structured in the CSV file:
Compound,Value
mix1,0.244
mix2,0.453
pureCu,1
pureAg,0.98
The value of column 1 is an ID basically, so the distance between each of them could be considered as 1. So technically, the first column would be always from 1 to 15 for example, with the label using the name in the first column
I would like to put the second field on the Y, and on the X the first field; but using the code pasted (which is what is on an example on the Highcharts website), I can't really figure out how to set up correctly the values on each side of the chart.
Thanks
Here you can find tutorials from Highcharts to load data from external file: http://www.highcharts.com/docs/working-with-data/preprocessing
About refreshing page - yes you can refresh page every n-seconds, however it would be better (I think) to call AJAX to fetch new data from server and then replace it in Highcharts (simply using chart.series[0].setData( new_array_of_data );