I'm trying to make it possible for my users to add a max plotLine to a chart and have it change the background color of the chart if a plot goes above that line. I can't seem to get a method to update the plotlines. I've tried:
chart.yAxis[0].update({
plotLines: [{
id: 'limit-max',
color: 'blue',
dashStyle: 'LongDashDot',
width: 1,
value: 45000,
zIndex: 0
}]
});
but I get the error:
TypeError: a is undefined
...dBands,function(a){a.render()});n(this.series,function(a){a.isDirty=!0})},setCat...
highcharts.js (line 136)
You can only destroy and create new plotLins, because update() function is not available.
just add this code and then you can use the plotline.update method
//Add support for update method
Highcharts.PlotLineOrBand.prototype.update = function (newOptions){
var plotBand = this;
Highcharts.extend(plotBand.options, newOptions);
if (plotBand.svgElem) {
plotBand.svgElem.destroy();
plotBand.svgElem = undefined;
plotBand.render();
}
}
Here's what worked for me http://jsfiddle.net/tx1kt0bj/2/
var plotBand = tempAxis.plotLinesAndBands[0];
$.extend(plotBand.options, {
color: '#000',
to: 10,
from: 2
});
plotBand.svgElem.destroy();
plotBand.svgElem = undefined;
plotBand.render();
I tried to assign an id to plotLine,
First remove the plotline completely by removePlotLine(id), then added it back by addPlotLine. It works great for me.
function upgradePlotLine(new_line) {
chart.yAxis[0].removePlotLine('my_line');
chart.yAxis[0].addPlotLine(new_line);
}
Related
I want to change the colour of the crosshair depending on the value. I am doing this, but it isn't working.
xAxis: {
type: 'datetime',
crosshair: {
threshold: 1,
negativeColor: 'green',
color: 'red',
width: 1.5,
snap: false
}
So i wanted the color of the crosshair to be green if the value of the y-axis is less than 1. But it isnt working. any help is appreciated.
The options which you have tried to set doesn't exist in the API - https://api.highcharts.com/highcharts/xAxis.crosshair.color
I think that the easiest way to achieve it is by using the className property and changing crosshair style dynamically in the tooltip.formatter callback.
Demo: https://jsfiddle.net/BlackLabel/be9jqh6s/
tooltip: {
formatter(tooltip) {
let chart = this.series.chart,
crosshair = document.getElementsByClassName('custom-crosshair');
if (crosshair[0]) {
if (this.x > 4) {
crosshair[0].style.stroke = 'green'
} else {
crosshair[0].style.stroke = '#cccccc'
}
}
return tooltip.defaultFormatter.call(this, tooltip);
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
I'm trying to draw a straight dashed line across my linear chart at zero.
I got it to work by drawing another series with all the points on the y axis at 0 and it works ok but I would like to change the style to 'Dash' and also remove the annoying series name it adds to the legend by default. I don't want it to appear in the legend. I tried setting name to '' for this part.
var zeroSerie = {
data: firstSeries,
dashstyle: 'Dash'
};
zeroSeries.name = '';
soarChart.addSeries(zeroSerie, false)
I would also very much like to set the colour to red and 'stroke-width': 2,
Thanks for any help
I think that is better to use the plotLines option:
yAxis: {
plotLines: [{
value: 0,
color: 'red',
zIndex: 2,
dashStyle: 'dash'
}]
}
Live demo: http://jsfiddle.net/BlackLabel/zan69hm7/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
Referring to the kind of chart shown here:
http://code.google.com/apis/visualization/documentation/gallery/barchart.html
There doesn't seem to be a simple switch, and changing the axis color to white (on a white background) didn't seem to do anything. I even tried jquery to hide the selectors produced by the api output but no dice.
You can set hAxis.textPosition to the value of 'none'
For example:
var options = {
hAxis: { textPosition: 'none' },
};
chart.draw(data, options);
See https://developers.google.com/chart/interactive/docs/gallery/barchart#Configuration_Options
I was able to remove the label in the material version of the chart by removing the string in my datatable.
Before:
data.addColumn('string', 'Date');
After:
data.addColumn('string', '');
let options = {legend: { position: 'none' }};
Their API has no function for this indeed, but:
chart.draw( data,
{
width: 400,
height: 240,
is3D: true,
legend :'none',
axisFontSize : 0
});
Setting axisFontSize to 0 will remove your x-axis data. :)
Google changes the API so fast, this is what works today:
chart.draw(daily, {
hAxis : {textColor: '#ffffff'},
[... your other options here ...]
});
axisFontSize : 0 will remove x-axis and y-axis data
Check out http://code.google.com/apis/chart/docs/gallery/bar_charts.html#axis_label_styles
Axis Label Styles chxs "axis_or_tick"
You'll notice this documentation: "_ - (Underscore) Draw neither axis line nor tick marks. If you want to hide an axis line, use this value."
Example: 'chxs=0,,0,0,_'
Use this to remove axis from chart
hAxis: { textPosition: "none", gridlines: { count: 0 } },
vAxis: { textPosition: "none", gridlines: { count: 0 } },
baselineColor:"transparent",
How can I set the fill color of a Gantt chart shape based on the value of a property in the bound json model?
Here's the code I am using to configure the sap.gantt.config.Shape :-
var oRectangle = new sap.gantt.config.Shape({
key: "Rectangle",
shapeDataName: "schedule",
shapeClassName: "sap.gantt.shape.Rectangle",
shapeProperties: {
time: "{startTime}",
endTime: "{endTime}",
height: 32,
fill: "green",
title: "{name}",
level: 0
}
});
The use case I am trying to address is :-
If there are 4 or more schedules, then fill the shape with GREEN else fill YELLOW.
I have already tried expression binding like :
fill: "{= ${data>/schedule}.length > 4 ? 'green' : 'yellow' }"
But that didn't give any result and filled the shape with the default BLACK color.
Is there some other way of getting it possible?
Also, is there a way we can configure Gantt shapes in XML views itself ratherer than doing all these configurations the in controller?
delete the attribute from your shape definition.
Before you define the oRectangle, put the following code segment:
sap.ui.define(["sap/gantt/shape/Rectangle"], function (Rectangle) {
var shapeRectangle = Rectangle.extend("sap.test.shapeRectangle");
shapeRectangle.prototype.getFill = function (oRawData) {
return oRawData.color;
};
return shapeRectangle;
}, true);
After that, you have to provide the property color to the order in your data model on the same level as startTime, endTime, etc...
I am trying to use the google-chart polymer element (http://googlewebcomponents.github.io/google-chart/components/google-chart/) to draw a Ligth ON/OFF chart.
This is what I get using a "area" chart.
However I want a graph where I can read the "state" of the light, hence a better representation would be use a step chart. This is my code that uses the "stepped-area" chart.
this.$.chart.type = "stepped-area";
this.$.chart.cols = [{label:"Date", type:"date"}, {label:"On/Off", type:"number"}];
this.$.chart.rows = chartData;
this.$.chart.options = { strictFirstColumnType: "false", backgroundColor: "transparent" };
this.$.chart.drawChart();
However when I am trying to use a date type as my first column I get a "Stepped area series with value domain axis is not supported.".
Is there another way to do that?
Maybe setting some other option (strictFirstColumnType: "false" is not working)?
Eventually my workaround was using string dates.
Here it follows the code:
this.graphs[tuple.uuid].cols = [{label:"Date", type:"string"}, {label: tuple.behavior, type:"number"}];
this.graphs[tuple.uuid].rows = [];
this.graphs[tuple.uuid].options = {
backgroundColor: "transparent",
hAxis: {
slantedText: true
},
vAxis: {
minValue:0,
maxValue:1,
gridlines:{count:2},
ticks: [{v:1.00, f:'ON'}, {v:0.00, f:'OFF'}]
}
};
this.graphs[tuple.uuid].type = "stepped-area";
This is my final result:
The date label is still not easy to read but the final result is not bad at all.
You could also use a timeline-chart, like in this fiddle:
https://jsfiddle.net/dx0Lw52b/