Bootstrap+HighCharts.js Responsive Image Position in Donut Chart - javascript

I need to insert an image inside of a donut chart but when using bootstrap and when it becomes responsive the location of the image gets out of the donut chart. I want the image to be in the center of the donut chart, how can i do this?
Example Code : http://paste.ubuntu.com/16889111/

Your code for chart.renderer.image is using fixed values, not relative:
// Render the image
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 220, 200, 60, 60)
.add();
I would suggest making your four values (x position of top corner, y position of top corner, image width, and image height) variables that are based on the chart container's current size.
Consider setting values based on $('#chart').height() and $('#chart').width() and test out the chart.redraw() and chart.reflow() functions to make sure the image within your chart gets updated when the viewport changes.
Here's some links in the API documentation that may be helpful to you:
renderer.image(): http://api.highcharts.com/highcharts#Renderer.image
chart.redraw(): http://api.highcharts.com/highcharts#Chart.redraw
chart.reflow(): http://api.highcharts.com/highcharts#Chart.reflow

Related

Is there any way to provide left margin on y axis label to avoid the chart moving Chartjs?

I am using Chart JS for bar representation. and using this link https://stackblitz.com/edit/ng2-chart-scrollable?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts for scrolling the bar chart.
In vertical bar, everything working fine. But in horizontal bar while scrolling the y axis moving.
It is because of the characters length the chart is moving on scroll.
In the above picture, you can see the chart position.
this is second picture the chart position slightly moves to left.
i Know this is because of the character, I have tried some logic like adding empty spaces based on maximum character shown to other words which is less than the bigger words.
Is there any way to make it fixed without moving. or can we try adding margin left before y axis label, if yes how to add a margin to it. Because in highchart I have seen something like margin left fixes this thing, But I don't know how to implement in chartjs

Highcharts multiple x axes is hidden on zoom

I used the multiple axes on the highchart
During Zoom operation the x values are getting hidden
I used linked to attribute also
JsFiddle
zoomType: 'y',
zoomType: String
Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.
Try it:
None by default
x
y
xy
I referred this jsfiddle to figure out what's happening. I think, this behavior is not a bug/issue.
This github issue mentioned in comments is not the problem here. Because what it is saying is to use linkedTo: 0 which is already present in this example.
It actually depends on how much area and more importantly from where to where you select for zooming in. Let's see that by examples:
In the following image, the rectangle signifies the width of one column.
Now, if you start your pinch from more than half of the width of any column or end the pinch after half of the width of a column, that column would be fully visible along with x-Axis labels.
But, if you pinch any less, say from the middle of orange bar of first column, till middle of next column's blue bar, it's not going to show whole columns and hence it ends up with hidden x-Axis labels.

Chart.js horizontal line chart or modified horizontal bar chart

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).

SVG/JavaScript pie chart with outside labels constrained by container width

All examples of pie charts (with outside labels and lines) use labels positioned around the circle (diagram A below). The problem is that a container where my pie chart should be located has a width constrain equal to the width of the pie chart.
1) Is it possible to position the labels like on diagram B below?
2) Is there any other solution addressing my problem?
NB! The labels cannot be placed inside the circle. I am happy to use any JavaScript library to achieve the required result.
Please go to http://jsfiddle.net/thudfactor/HdwTH/ and do a view source in the pie chart area (please give credit to this author). Paste the source into your IDE.
Make these modifications:
// Store our chart dimensions
cDim = {
height: 300, //500
width: 300,//500
innerRadius: 50,
outerRadius: 150,
labelRadius: 150 //175
}
This uses the d3.js library

Get coordinates of image within a box

I need to grab the following coordinates topX, topY, bottomX, bottomY, as they represent a box around a source image. They are equal to:
topX = X coordinate at top left corner on source image
topY = Y Coordinate at top left corner on source image
bottomX = X coordinate at bottom right corner on source image
bottomY = Y coordinate at bottom right corner on source image
Here is a sample plugin that calculates these values. The source image width = 1024px and the height = 750px:
http://thindery.com/jsfiddle/crop_move.html
However, I have a new plugin that does more functionality than the above plugin, but I can't figure out how to get these 4 variables I need.
here is the jsfiddle http://jsfiddle.net/thindery/cv96e/
i tried to create my own boxedCoords(), based on how the original plugin calculated the values. However i'm still new to jQuery and I can't get it to work.
anybody have an idea how I can get these 4 variables?
This was solved. For the solution: jsfiddle

Categories

Resources