I am trying to resize a Kendo Chart. I have multiple charts on the screen and when I drag one to a specific area of the browser I want it to resize. I initially set my chartArea to 400 x 400 in my javascript and then use the following code to resize.
$(id).kendoChart({
chartArea: {
width: 200,
height: 200
}
});
$(id).data("kendoChart").redraw();
Before:
After:
Why does my chart go completely blank and not have any data on it?
Update:
Interesting thing I have noticed is that if the chart redraws a second time it shows up correctly (i.e. when I drag a second chart over to the area, the first chart redraws and is correct but the second is now not showing correctly).
As shown in the API docs, the correct way to resize a chart is as follows:
var c = $("#chart");
c.kendoChart({
//options
});
//Then later
c.css("width", "800px")
.data("kendoChart").resize();
Related
I'm actually developing one app using the javascript plugin chartjs (on the framework Symfony 3) and I realised that when we create a chart before the page it's ready, the legend it's correctly shown, but when I create other chart doing click on a button (after document.ready) the legend it's hidden.
To illustrate my problem, when I do :
// the chart is draw with the legend
drawChart();
// The chart is draw without the legend
$(document).ready(function() {
drawChart();
});
Have you ever meet this problem ? Is there a solution to solve this ?
Big thanks to all who takes time to help me !
I am using chart.js to try to create a timeline of events relative to current date.
The horizontal bar chart is close but would like to show only the tips of the bars eg as points which would pretty much be a horizontal line chart.
I have shown my horizontal bar chart along with a mock-up of what it would look like as horizontal line chart.
Is this possible with chart.js ?
You first need to know that every information that you can edit about the chart is stored in the variable containing your chart (called myChart usually, but my2Bar in your fiddle).
If you want to globally change the graph, you will need to edit attributes in myChart.config.options.
If you want to change a specific chart, you will need to edit attributes in myChart.config.data.
In this case, you need to change a specific chart (which is the horizontal bar).
If you happen to check the logs of your graph, and go very deep in the config, you will finally see that bars in your chart are drawn using attributes stored in myChart.config.data.datasets[0]._meta[0].data[n]._model (n being the nth rectangle drawn, top to bottom).
Some attributes you can find there :
base : The X position where the rectangle is starting to be drawn (0 in your xAxe for instance).
x : The rectangle is being drawn until this X position.
height : The height of the drawn rectangle.
and so on ...
To edit these values, you just need to loop in your different rectangles (the n in the above path).
But you just can't do it manually on the config of your variable. If you do this, it won't work since your chart is responsive (on resize, it will redraw the chart using the former options).
What you must use are Chart.js plugins.
Plugins let you handle all the events that are triggered while creating, updating, rendering your graph.
Then, in your beforeRender event (triggered after the initialisation, but before the drawing), you need to loop in your different rectangles to edit the values to affect how they will be drawn :
beforeRender: function(chart) {
for (var i = 0; i < chart.config.data.datasets[0]._meta[0].data.length; i++) {
// Change both `3` values to change the height & width of the point
chart.config.data.datasets[0]._meta[0].data[i]._model["base"] = chart.config.data.datasets[0]._meta[0].data[i]._model["x"] + 3;
chart.config.data.datasets[0]._meta[0].data[i]._model["height"] = 3;
}
}
Here is a jsFiddle with the final result.
Unfortunately, I wasn't able to make round dots, instead of squared ones.
Update :
I have also made another jsFiddle where all the dots are linked together which makes it look like it is a horizontal line chart (can be improved of course, but it is a good start).
I would like my chart area to be extended on the top so I've added a negative margin to the chart. However, this causes series at times to be drawn over the contextButtons and can make them impossible to click. I'd like to just increase the z-index or do something that makes them appear above the series without having to make my own buttons that live outside the chart. Does anyone have a way to do this?
Example: http://jsfiddle.net/tu67e1ce/1/
chart: {
marginTop: -25,
events: {
load: function() {
this.exportSVGElements[0].toFront();
this.exportSVGElements[1].toFront();
}
}
},
So method toFront() will bring items on top of the SVG container. this.exportSVGElements[0]/[1] are button/symbol. Of course both of them are inner object of the Highcharts core.
I have the following code that draws a chart using dimple.js: http://jsbin.com/zacus/17/
When the browser window is resized (or the jsbin pane is resized) i want the chart to also resize to fit it's table cell parent. As you can see from the example this does not happen.
I have attempted writing an event handler to change the width of the chart or to redraw the chart when it's , but to no avail.
window.onresize= function redraw(){
chart1.setBounds(70, 30, pTd.offsetWidth-150, 300);
myLegend1.left = chart1.width + 100;
}
Any suggestions on how to accomplish this?
EDIT: Experimenting a bit led me to the following code which seems to solve my problem. Is this the best way to accomplish this?
chart1.svg.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", "0 0 600 400");
I haven't tried it with viewBox so if that's working it sounds a good solution. I do it using setMargins for the proportions of the chart and calling chart.draw on resize. This has the benefit of using dimples sizing logic - for example rotating x axis labels when the chart gets too small.
Here's an example from the website:
// Set up a standard chart
var myChart;
d3.tsv("/data/example_data.tsv", function (data) {
myChart = new dimple.chart(svg, data);
// Fix the margins
myChart.setMargins("60px", "30px", "110px", "70px");
// Continue to set up a standard chart
myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.bar);
// Set the legend using negative values to set the co-ordinate from the right
myChart.addLegend("-100px", "30px", "100px", "-70px");
myChart.draw();
});
// Add a method to draw the chart on resize of the window
window.onresize = function () {
// As of 1.1.0 the second parameter here allows you to draw
// without reprocessing data. This saves a lot on performance
// when you know the data won't have changed.
myChart.draw(0, true);
};
Here it is in action
Inside of a JQuery resizable div I have a JQuery Accordion Widget. Inside of each accordion element is a table that is centered in the accordion div by setting width: 100%; margin: 0 auto;. In each table is a td element that has a Google Visualization Column Chart.
When the resize event is triggered I'd like the Google Visualizations to redraw so the dimensions of the Charts fit the new container sizes. The problem I'm having is that the only Chart that is redrawn with the proper dimensions is the one in the visible accordion div.
I'm assuming that when a div element is set to display=none the container dimensions are ignored in the resize event. If this is true does anyone have any good suggestions to work around this?
I should also add that the width of the visualization is set to '100%' not a pixel number.
Thanks
You may need to set explicity dimensions in in your chart.draw() call since you're drawing a chart on a hidden element. So for your options variable you would set it to:
var options = {'width':400,
'height':300}; //substitute your desired dimensions
chart.draw(data, options);
Adjust accordingly if you're using one of the other Google Charts draw methods (wrapper.Draw() or drawChart()).
From another recent similar question, the Google Charts API pulls the dimensions from the container element when the draw call is made, but if the container is hidden, it has nothing to pull from.
related: redraw google charts on hidden bootstrap tab pane