I'm using Highcharts plugins "dragable points" and "export-csv".
I'm using these to place circles on a chart with a background drawing. This is so I can use these points to change colour as the data for that point updates.
My problem is I'm trying to export the "Name" of the point in the csv file and I'm only able to get the x and y values.
Data I'm loading in looks like this
{name: 'd1', color: '#FF0000', x: 10, y: 100},{name: 'd2', color: '#FF0000', x: 30, y: 100}
This places the points in a set location and then I'm using the dragable plugin to move the points to the new locations. Once there I would like the export-csv plugin to output the "name:" along with the "x: and y:" values.
Question:
Is there a way to set the export-csv plugin to include the name of the point?
Don't even bother with the plugin. You can code very simply in like 8 lines of JavaScript:
$('#getcsv').click(function () {
var csv = "Series;Name;X;Y\n";
$.each(Highcharts.charts[0].series, function(i,s){
$.each(s.points, function(j,p){
csv += s.name + ";" + p.name + ";" + p.x + ";" + p.y + "\n";
});
});
alert(csv);
});
Here's an example.
If you check out the docs and the source code for this plugin you can see that it is just explicitly getting the data as a two dimensional array of x and y points (date or category and the yValue). To get it to return the other items you would need to extend this plugin (or roll your own).
Related
I only just began learning swift and wanted to create a simple chart displaying some data.
I am creating a line chart using AnyChart library and there is a series of lines I am plotting to the chart. I noticed that I am repeating pretty much all of the properties. How can I make the below code less dry.
I am creating a line chart using AnyChart library and there is a series of lines I am plotting to the chart. I noticed that I am repeating pretty much all of the properties, the only thing that is changing is the initial variable name.
How can I make produce less code that will take into account the names of the variables intact (series 1, series 2)?
let series1Mapping = set.mapAs(mapping: "{x: 'x', value: 'value'}")
let series2Mapping = set.mapAs(mapping: "{x: 'x', value: 'value2'}")
let series1 = chart.line(data: series1Mapping)
let series2 = chart.line(data: series2Mapping)
series1.name(name: data.seriesNames[0])
series1.hovered().markers().enabled(enabled: true)
series1.hovered().markers()
.type(type: anychart.enums.MarkerType.CIRCLE)
.size(size: 4)
series1.tooltip()
.position(position: data.position)
.anchor(anchor: anychart.enums.Anchor.LEFT_CENTER)
.offsetX(offset: 5)
.offsetY(offset: 5)
series2.name(name: data.seriesNames[1])
series2.hovered().markers().enabled(enabled: true)
series2.hovered().markers()
.type(type: anychart.enums.MarkerType.CIRCLE)
.size(size: 4)
series2.tooltip()
.position(position: data.position)
.anchor(anchor: anychart.enums.Anchor.LEFT_CENTER)
.offsetX(offset: 5)
.offsetY(offset: 5)
You can do it like this.. Its just a rough idea ...i don't know what is Series object and mapping that you are doing ... But you can have one function that return series and get parameters to create that series
func getSeries(number:Int, mapping:String) -> Series {
let series = chart.line(data: set.mapAs(mapping: mapping))
series.name(name: data.seriesNames[number])
series.hovered().markers().enabled(enabled: true)
series.hovered().markers()
.type(type: anychart.enums.MarkerType.CIRCLE)
.size(size: 4)
series.tooltip()
.position(position: data.position)
.anchor(anchor: anychart.enums.Anchor.LEFT_CENTER)
.offsetX(offset: 5)
.offsetY(offset: 5)
return series
}
And then Create Series
let series1 = getSeries(number:0 , mapping:"{x: 'x', value: 'value'}")
let series2 = getSeries(number:1 , mapping:"{x: 'x', value: 'value2'}")
if you want to make it more simpler ... you can create mapping string from the number as well
Thanks
I have a chart like this, you can see that only about 22 points in the chart from left to right. I want to increase this, so that there are more points. Right now it seems very jumpy, but the range is only between 10-11.5, I want to "zoom out" so the line almost looks flat, and these huge peaks and valleys look like little bumps. I've combed over the highcharts documentation and cannot find this config setting.
In the initial creation of the spline chart, an array of point is created, in the default case it is 49 samples, here I changed it to 200, which did what I needed.
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -200; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
What are the plotX, plotY values of a point in HighCharts? I can't find them in the documentation. I read the values but couldn't make sense of them when using a pixel ruler on the graph.
plotX and plotY are not part of API - just inner properties to get coordinates where plot point. Using them is shorthand for getting values from point:
http://api.highcharts.com/highcharts#Point.x
http://api.highcharts.com/highcharts#Point.y
And translating to position via:
http://api.highcharts.com/highcharts#Axis.toPixels()
plotX and plotY are the reference point in the plot area, chart.plotLeft and chart.plotTop get the full coordinates.
Check the API for tooltip->positioner
http://api.highcharts.com/highcharts#tooltip.positioner
jsFiddle: http://jsfiddle.net/m9L5j/
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
}
}
In Highcharts 2, it was easy to add a point using series.addPoint(p) where the x value of that point fell between the x-values of two existing points.
Example: Let's say you wanted to create a chart with one series containing two points:
var p1 = {x: 100, y: 50};
var p2 = {x: 200, y: 40};
var data = [];
data.push(p1);
data.push(p1);
var c = new Highcharts.Chart({
...//code omitted
type: 'line',
data: data,
...//code omitted
});
In version two you could call add a point between those two by going:
var p3 = {x: 150, y: 60};
c.series[0].addPoint(p3, true);
For 'line' charts, highcharts 2 would automatically determine that the x value of p3 falls between the x values of p1 and p2 and so the line would be plotted through the points in the order: p1, p3, p2.
We are finding that in highcharts 3, the line gets plotted through the points in the order p1, p2, p3 - which implies that it "turns back on itself".
I have prepared the following jsFiddle examples, which add 50 points to an existing series with randomized x and y value.:
Highcharts 2.1.9: http://jsfiddle.net/HdNh2/4/
Highcharts 3.0.0: http://jsfiddle.net/HdNh2/5/
Is this something that could be fixed or do we need to try and circumvent the issue?
Thanks in advance...
H
So just to close this issue: Highcharts has confirmed that the logic changed since 2.2.x.
In our case it was simple enough to just re-render the entire chart, but I suspect series.setData() would also have been an option.
Here's a workaround. This will sort points on their x-values as they're added manually. This events object is in the chart object options block.
events: {
click: function(e) {
// find the clicked values and the series
var series = this.series[DIA.currentSeriesIndex],
x = parseFloat(e.xAxis[0].value),
y = parseFloat(e.yAxis[0].value);
// Add it
series.addPoint([x, y]);
if ( series.data.length > 1) {
// grab last point object in array
var point = series.data[series.data.length-1];
// sort the point objects on their x values
series.data.sort(function (a, b)
{
//Compare "a" and "b" and return -1, 0, or 1
return (a.x - b.x);
});
// force a redraw
point.update();
}
}
}
For a JQplot chart with 2 y axes, I am able to set the tooltip but when i hover over a datapoint i need to know to which y axis the tooltip belongs. I need this so that i can display the tooltip after multiplying with the appropriate scale factor. The code i tried is shown below. I thought y will be null when we hover over a data point belonging to y2 axis. But y is never null.
$("#"+sTargetId).bind('jqplotcustomDataMouseOver',
function (ev, seriesIndex, pointIndex, data) {
var chart_left = $("#"+sTargetId).offset().left,
chart_right = ($(window).width() - ($("#"+sTargetId).offset().left + $("#"+sTargetId).outerWidth())),
chart_top = $("#"+sTargetId).offset().top,
x = oPlot.axes.xaxis.u2p(data[0]),
y = oPlot.axes.yaxis.u2p(data[1]),
y2 = oPlot.axes.y2axis.u2p(data[1]);;
if(y===null|| y===undefined){ //this condition doesnt work
var tooltipDataYaxis = data[1]*scaleYaxis1;
var sYDisplay = this.sYAxis1MeasureName;
$('#tooltip').css({left:chart_left+x, top:chart_top+y, marginRight:chart_right});
}
else{
tooltipDataYaxis = data[1]*scaleYaxis2;
sYDisplay = this.sYAxis2MeasureName;
$('#tooltip').css({left:chart_left+x, top:chart_top+y2, marginRight:chart_right});
}
$('#tooltip').html(
'<span style="font-family: Arial;font-size:'+sTooltip+';font:bold;color:#000000;">'+ sYDisplay+': ' + tooltipDataYaxis +'</span>');
$('#tooltip').show();
});
$("#"+sTargetId).bind('jqplotcustomDataUnhighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#tooltip').empty();
$('#tooltip').hide();
});
}
The variable seriesIndex will help to identify which series the tooltip belongs to. :)
I was just playing with jqplot for the first time. quite fun.
In the highlighter plugin jqplot.highlighter.js
I extended it on line 336
elem.html(str + " component:"+neighbor.data[2]);
You might use Chrome developer tools to get the data model at this point and look at the contents of the neighbor object.
(scope variables > Local > neighbor > data )
That's how I did it anywho. Hope it helps.