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() )
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 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
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'm using Chart.js to create a pie chart (see below). Instead of the colors in each pie segment, I would like to use a background image.
Could you give me a pointer on how I could do this?
Thanks!
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}
];
var myPieChart = new Chart(ctx[0]).Pie(data,options);
Subclass Pie, rewrite the initializer and addData - in the initializer re-define draw, adding one line:
if(this.bg_img)ctx.fillStyle=ctx.createPattern(this.bg_img,"repeat");
, right after it says:
ctx.fillStyle = this.fillColor;
(copy Pie's draw, add that line - or just copy my AltPie subclass from the bottom of the attached fiddle) This could be different for later versions but that's how Chart.js 1.01 is.
Also in your Pie subclass you will add a property (for example call it bg_img) for sending the background image through. To do this there is a one-line addition, so re-define addData inside AltPie and add the property inside the splice line:
bg_img : segment.bg_img,
for example somewhere around the line
fillColor : segment.color,
That's most of it - other than that you will load and then attach the images to the data you're making the chart with. To load them you can use
....img=new Image();...img.src=...and - img.onload=function()(..recurse-load-next,
with a recursing callback similar to solution #2 from this page:
stackoverflow.com/questions/4960111/image-as-a-background-to-a-drawn-shape
I think you would need to make sure the images are done loading before attaching them to the data and sending them through to the Chart.js renderer, hence the recursion pattern to load them one by one before attaching them to the chart data and then creating the new AltPie chart.
The end result is that your images will show up in the pie pieces backgrounds or you can still use a color background if there's no image. It changes the html5 canvas ink pattern
(ctx.fillStyle=ctx.createPattern(this.bg_img,"repeat"))
to be the image you attached to the chart data, also taken from solution #2 from the same page: stackoverflow.com/questions/4960111/image-as-a-background-to-a-drawn-shape.
For the complete working example see attached fiddle https://jsfiddle.net/arlon_arriola/pkwftkp2/
The dependencies for loading the page are Chart.js file (v1.01?) (which is just copy/pasted into the fiddle at the top making the code look extremely long but the relvant code is at the very bottom), and the images inside your ./imgs/patterns/ folder, and the reference to some hosted jquery (1.9?). (and a body tag)
I am sure you could get image rollovers too, just attach two images to the data, figure out where it re-draws for hovering and modify it the same way as the regular draw.
I'd like to add paging controls to my Google Visualization bar chart, similar to the one described here (keywords: thenez101 Google Visualization BarChart Paging), but instead of flowing my paging controls around the Google bar chart, I'd like to place them on top of the chart. When I place my controls inside the chart's div, however, I see them only until the chart is drawn.
Assigning my controls a CSS class whose z-index property I have changed to positive and negative has not worked. Perhaps I can change their z position after my ready event has fired? Has anyone succeeded in getting this working?
Thanks, BH