I'm using https://github.com/chartjs/Chart.js to display my graphs in my application. There's one feature that i want to do in my graph. I want to overlap the graphs to get the following results
I need to get the display graph in the green box. As for now i only have red box.
Yes, you can easily do this in chart.js, its called stacking. You just need to set the stacked option to true.
scales: {
xAxes: [{
stacked: true
}]
}
Note, you might have to set the yAxes option instead since this is horizontal. You can read more about it here and see a sample here. I will update my answer with a working codepen example when I get back to a computer.
Related
I have a problem with the ChartJS API in order that I need to paint a Line graphic, but lines should be painted vertically instead of horizontally.
The only response I can found is to draw static vertical lines in a "standard" horizontal line chart, but that's not the feature I need.
I suppose that ChartJS should hace any graphic type or options in Line graphic type to do this, but I don't see it.
Using "chart.js": "2.9.3"
I need something like this:
Thanks for answers.
If you are using the beta (version 3) of Chart.js you can set the property indexAxis to y in your options object to get the desired behaviour
Example:
options: {
indexAxis: 'y'
}
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'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.
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.
Other than using the Column chart and naming appropriately is it possible to create histograms in google chart api?
To add to mattedgod's answer,
The column chart can now be created with the bars spaced tightly together, use the option:
bar: {groupWidth:"100%"};
Google introduced a couple of days ago an histogram chart : link
Google Charts does not have a histogram chart, since it is just a visualization library you will have to modify the Column Chart to suit your needs. However, I suspect the reason you are not satisfied with column chart is because of the column spacing, which doesn't look very histogram-like. So I will answer this question first:
Can you control the spacing between columns in a Column Chart?
No, not at this time. See this quote from the Google Charts Community
There's no support in the API for controlling the spacing between bars. You might be able to hack it if you're willing to dig into the chart's SVG.
So it is do-able but will take some extra work from you. You can also play around with the chartArea configuration option which will have some influence on the column spacing.
However, the original question may have a different answer actually.
Can you create a histogram-like chart using a Column Chart?
While you cannot control the spacing between sets of columns in a Column Chart, you can get the columns pressed up almost to one another by specifying them as different columns, and then setting each column's color to the same color in the configuration options.
Here is a simple 3-column histogram:
var data = google.visualization.arrayToDataTable([
['x', '1-10', '11-20', '21-30'],
['', 3, 5, 4]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"My Histogram",
width:600, height:400,
hAxis: {title: null},
colors: ['red','red','red'],
legend: {position: 'none'}
}
);
Notice you have 1 row with 3 columns that are each colored 'red'. The downside to this is that you lose out on the labels along the x-axis telling you which column represents what. Again, you will have to have some sort of logic to construct this histogram and populate the data the way you want as well.
So the long story short is Google Charts doesn't have a Histogram and while it is possible with a Column Chart, you might consider looking into a different library.