I'm using barChartPlotter to show power (kWh) values for each day and it works great.
Now I would like to put price (kWh value * 0.08) on y2 axis. So that on y axis I have kWh and on the right y2 axis price (but to have only 1 column). I tried adding extra y2 into axes option, but I cannot get it work without adding another series.
Is this possible?
It's not. You have to add another series.
Related
How can I show multiple time series overlapping each other with a dynamic Y axis that changes depending on which series is selected by the user.
The goal is to be able to compare patterns in the data, but it requires us to able able to display these charts overlapping on the Y axis.
Say TS1 (timeseries 1) has a dynamic range of [0 -> 2000] on the Y axis.
Say TS2 (timeseries 2) has a dynamic range of [500 -> 10,000] on the Y axis.
d3.js needs to be able to display both series on the graph overlapping (not stacking) on the Y axis.
Here is an example with pictures (Notice the change in Y Axis):
Green Series Selected:
Blue Series Selected:
I have a line chart in D3 as seen here:
I am attempting to extend the x-axis to be the same size as the y-axis tick width. Currently I am setting the ranges as follows:
// set the ranges
var x = d3.scaleTime().range([20, width - 20]);
var y = d3.scaleLinear().range([height, 0]);
This achieves my desired effect of pushing the plot in from the left and right sides but does not extend the x-axis. I'm sure there has to be a way to add padding to the plot without changing the ranges but I can't seem to figure out how?
There's no easy way to add padding to a linear scale.
However, in your case, since your x axis is presenting categorical data (days of the week), you can use a d3.scalePoint and configure its outer padding with the padding function.
I'm using angular-chart.js (which uses Chart.js) to create a bar chart, there is also a table under this showing the same data.
The problem I am having is when I change the data being displayed, the Y axis labels change width and throw everything out of alignment, for example:
Chart and table aligned in the first picture, but when the data changes (max Y axis label 3 characters reduced from 4), it looks like the second picture.
I couldn't find anything in the chart.js docs, is there a way I can set a width for the Y axis labels globally?
Actually, I think I figured out a very basic and static way for setting the width.
In chart.js (version 1.0.2), line 1576:
this.yLabelWidth = (this.display && this.showLabels) ? longestText(this.ctx,this.font,this.yLabels) + 10 : 0;
I simply changed that to a static number, '93'.
this.yLabelWidth = 93;
I'm sure with a bit more tinkering I can call the width of the first cell in the table get them both to be the same.
I'm working on makin a graph like this in highcharts:
But I have problems making the green red yellow background colors based on y and x axis.
This is an example I have found but it's only based on the y axis: jsfiddle.net/tK7ux
And I want to use plotBands on both X and Y at the same time, if possible.
Maybe there is another way than using plotBands ? i have also looked at Renderer functions and making an rectangle, but the problem was that it is the position not is based on the Y and X axis.
I'm using google charts and I'm trying to get the value of the x and y values along with the series name that a user clicks on. I believe I have the X value by using the following in a click event.
console.log(dataTable.getValue(chartObject.getSelection()[0].row,0))
This get me the X value, but how do I get the series and Y value? Its exactly what shows up on the hover on the point. I just need to be able to grab these values to pass on to another function.
After some research, I've got what I wanted.
//X Axis
console.log(dataTable.getValue(chartObject.getSelection()[0].row,0))
//Y Axis
console.log(dataTable.getValue(chartObject.getSelection()[0].row,chartObject.getSelection()[0].column));
//Series Label
console.log(dataTable.getColumnLabel(chartObject.getSelection()[0].column))