I have a graph that is already drawn. I'd like to toggle the beginAtZero property on the yAxis ticks: {beginAtZero: true} and use update() to force the graph to redraw so I don't have to reload the whole page.
Is this possible, and if so, how would one go about doing it?
Thanks for any help!
myBarChart.options.scales.yAxes[0].ticks.beginAtZero = false;
// You probably also want to move your min :
myBarChart.options.scales.yAxes[0].ticks.min = 100;
// and call update:
// myBarChart.update();
Here's pen with some buttons if you want to experiment:
Chart.js add/remove adjust data
Another thing you can do, is destroy and rebuild the chart :
Chart.js Toggle Chart
Related
I want to draw a line to show the zero value on a y axis. I have this working:
afterDraw(chart) {
const {ctx, scales} = chart;
Object.keys(scales).forEach((key) => {
const scale = scales[key];
if (scale.axis !== 'y') {
return;
}
const yCoordinate = scale.getPixelForValue(ZERO_COORDINATE);
ctx.fillStyle = 'blue';
ctx.fillRect(0, yCoordinate, 200, 5);
});
},
I had first attempted to use afterBuildTicks, but that didn't draw the line - or at least it wasn't visible. Is there guidance regarding when to use the different lifecycle hooks? Some seem obvious, others less so.
If I use the chart's context in any lifecycle hook, how do I ensure what I draw is on top of the chart? I saw an example where someone changed the background by supplying a beforeDraw callback - is the stacking context managed by order in which we draw via the different hooks?
There is a diagram in the chart.js documentation that shows when each hook is being called in the rendering process and what chart.js does between those hooks like drawing datasets, grids etc.
If you want to make sure what you are drawing is on top of everything else you will need to use the afterDraw hook to draw the things on the canvas that you want there.
I am new to Chart.js and I want to hide the y axis and x axis line and label in my chart. I looked at the documentation and couldn't find a good option. Has anyone else encountered this problem and have a solution?
Using the showScale option would be better
var ctx = document.getElementById("LineWithLine").getContext("2d");
new Chart(ctx).Line(data, {
showScale: false
});
Fiddle - http://jsfiddle.net/wb3kcunt/
This hides gridlines too. If you want to hide only the axes and labels and not the grid lines, just set scaleFontColor and scaleLineColor to a transparent color.
I found that if you edit a library posted in this answer, you can achieve this
In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?
I have some sets of raphael elements that are draggable, sometimes the elements animate for a halv a sec, but if the set/element is draged while animating the animation stops.
I want to make my elements undraggable when i'm animating so i'm sure that the animation will always complete. Is there any way? I tried using undrag() but it didn't work.
I'm not using any plugin for dragging, just created my own start,move and up methods for set.drag(start,move,up)
Thanks
I've got it to work with undrag method.
I just needed to add undrag on each element of the set instead the set itself(i'm calling drag on the set so it seems wrong) and the it worked.
function undragAll() {
$.each(screenSets, function (index, set) {
$.each(set, function (index, setEl) {
set[index].undrag();
});
});
}
I am using google visualization for drawing a 3d chart.
I use - greg.ross.visualisation.SurfacePlot().
I am drawing chart in iframe.
If I call the method draw() once, the chart gets plotted properly. But, after that calling draw() again doesn't make any change. It doesn't draw the chart again.
Can anyone help me in this? I want to draw the chart again & again depending on user input.
Is there any way to redraw the chart?
or is tehre any way to flush the existing chart?
& one more question - why this is happening?
How do I delete a google chart and replace it with a new one in a google app?
Try this
/* Clear chart Panel */
var chartPanel = app.getElementById('chartPanel');
chartPanel.clear();
Reuse the "draw()" function. example :
/*************************************************************************/
/* Redraw charts on window resize (only if responsive option is TRUE */
angular.element($window).bind('resize', function () {
if (googleTreeChartsResponsive) {
$timeout(function () { googleChartsInstance.draw(data, googleTreeChartsOptions) }, 250);
}
});
From : http://codepen.io/vage/pen/KdoBRr (resize the window, the charts will be redraw() )
Short version - I want to modify the width/height of a google.visualization.PieChart object after construction, but I can't find any documentation pointing out how it's done.
Context - I'm building a visualization that overlays a bunch of data on a Google Map. At certain lat/long coordinates I want to render a pie chart marker detailing certain statistics that are relevant to that place.
To avoid cluttering up the screen, I want to vary the dimensions of the pie chart markers based on the current zoom level. This requires me to either re-render all markers that are currently visible or, preferably, change the width/height attributes of all markers.
I currently use the following settings to render my charts:
legend: {position: "none"},
width: 200,
height: 200,
backgroundColor: "transparent",
pieSliceText: "none",
colors: ["#C10001", "#F79647", "#92D051", "#558ED5", "#7F7F7F"],
tooltip: {textStyle: {fontSize: 14}}
Is there a way to alter the dimensions of the chart after it's created?
I do not think there's something in the API; nevertheless with a tiny bit of Javascript you should be able to modify the attribute of the SVG tag containing the chart. One possible way is to add a viewBox attribute that will scale up or down the pie chart.
The only working solution I have so far is to redraw the entire chart with changed width/height settings. This snippet uses jQuery.
for (var i = 0; i < dataPoints.length; ++i) {
var drawingOptions = $.extend({}, defaultDrawOptions);
drawingOptions.width = defaultDrawOptions.width*(currentZoom/defaultZoom);
drawingOptions.height = defaultDrawOptions.height*(currentZoom/defaultZoom);
dataPoints[i].chart.draw(dataPoints[i].dataSource, drawingOptions);
}
As you can see, this half-baked solution is rather clumsy and might needlessly deteriorate performance.