I have a graph with values from 0-40000 (y2-axis) As an example: In a time window the values are 33000-37000. This can be seen on the right side axis-Y2. Now I want to have an axis Y on the left that shows relative values: that is, from 0-4000 in this example ... and at the same time to the right axis Y2 ... do you understand my concern?
Thanks Jerry
If I am understanding the question correctly you are trying to put two different y axes on a single graph.
Dygraphs has built in support for this.
When creating a new graph:
g = new Dygraph(
document.getElementById("graphDiv"),
data,
{
labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
series: {
'Y3': {
axis: 'y2'
},
'Y4': {
axis: 'y2'
},
},
axes: {
y: {
axisLabelWidth: 60
},
y2: {
// set axis-related properties here
labelsKMB: true
}
},
ylabel: 'Primary y-axis',
y2label: 'Secondary y-axis',
}
);
This is taken directly from the dygraphs 2 axes demo page which can be found here:
http://dygraphs.com/tests/two-axes.html
Related
I'm trying to create a mix chart, a bar chart with a line chart. Below is a picture of a standard example.
I need to change the x-axis as shown in the picture below, how can I do that?
In other words, I want to remove the dependence of x-axis labels on the number of bars and their points and make the x-axis arbitrary, which sets the maximum and minimum values and its step
Change the labels as shown in this example:
const data = {
// Put whatever you want
labels: [0, 5, 10, 15, 20],
datasets: [
{
/* ........ */
},
]
};
I found a solution, we need to add a new dataset and bind it to a custom X axis.
datasets: [{
type: chartTypes.Line,
xAxisID: 'custom-X-axis',
},
/*...*/]
Then we need to add this custom axis and hide the default one
scales: {
xAxes: [
{
display: false,
}, {
id: 'custom-X-axis',
type: 'linear',
ticks: {
min: 0,
max: 20,
}
}
],
}
The Problem:
I am using polar area chart. For slices in this chart, each value after the largest value should appear one level smaller. The level is as follows: for example, if the value after a 38 slice is 6, it should look like 37. Or I should be able to set it to the level I want. My question is all about sizing the slices on the polar area.
What I get:
What I want:
Sorry for my bad drawing. You can think what i want is like:
scaling very small slices close to large slice.
Methods I tried:
I tried changing the scale and ticks parameters from the link chartjs axes settings but without success.
I put the index data after sorting the array as data into the dataset. It worked as I wanted, but this time the values appeared as index values.
Charts.js polar area scales I tried this also but not worked.
A solution can be reached from the two methods I tried, but I could not.
Code example here:
function SetWorkflowChart(labels, datas, labelColors) {
//label colors
// workflow stats chart
const workflowdata = {
labels: labels,
datasets: [{
normalized: true,
data: datas, // example data: [38, 5,3]
backgroundColor: labelColors,
borderColor: "rgba(0, 0, 0, 0.0)"
}]
};
const workflowconfig = {
type: 'polarArea',
data: workflowdata,
options: {
scales: {
r: {
grid: {
display: false
},
ticks: {
display: false //try2 i tried to set ticks for scale
},
suggestedMin: 5, //try1
suggestedMax: 20,//try1
}
},
plugins: {
legend: {
display: false,
position: "right"
},
},
responsive: false
}
};
workflowChart = new Chart(
document.getElementById('WorkFlowStatsChart'),
workflowconfig
);
}
I'll be pleased if you pay attention.
I'm trying to use linear scale on x-axis in my chart.js chart.
I add some code beause stackoverflow makes it obligatory when adding a jsfiddle url, but I don't see the point :
var options={
scales:{
xAxes:[{ type: "linear"}]
}
};
I'm getting a very strange chart (2nd one) : http://jsfiddle.net/t0krmau8/
In the first chart, I'd like to get more space between 2 and 4 (2 times more space than between 1 and 2), that's why I'm using a linear scale.
Am I using the linear scale wrong? Or should I use something else?
Thanks
You're not providing the data in correct format for the scatter line plot.
The correct format to provide the data is described by the following example from Chart.js Docs.
var scatterChart = new Chart(ctx/* your canvas context*/, {
type: 'line',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
source
I think the x and y should be separable into different arrays, but you can always do a combination step and combine them into objects.
I've been trying to get graphing working, all the data seems to be graphing, however the tooltip doesn't move from the far right. This of course is a issue since I cannot then mouse over specific points to see the data.
Here is a JS fiddle example of what's happening: https://jsfiddle.net/kp7eyf8o/6/
NOTE: for some reason the stack overflow JSfiddle gives me an error, but the URL should show my issue.
var chart = c3.generate({
bindto: '#test',
data: {
x: 'x',
columns: [
['x', '2016-01-01', '2016-02-02', '2016-03-03', '2016-04-04', '2016-05-05', '2016-06-06', '2016-07-07', '2016-08-08', '2016-09-09', '2016-10-10', '2016-11-11', '2016-12-12'],
['2016 Actual', 12873666.64, 15976835.94, 19232540.28, 23649495.4, 26338636.36, 29496799.84, 43801703.66, 4263924.64, 5788580.3, ],
['2016 Projected', 3916752.11, 4626643.23, 5146264.25, 6148854.32, 6640724.57, 7409783.48, 8263054.46, 8488001.54, 8837809.1, 9068047.68, 9402019.15, 9513505.72, ],
['2015 Actual', 3256870.0, 3825580.0, 4394290.0, 5550000.0, 6044000.0, 7100000.0, 7700000.0, 8154000.0, 8860000.0, 9200000.0, 9500000.0, 9600328.45, ]
],
colors: {
'2016 Actual': '#2cd554',
'2016 Projected': '#1bc4fc',
'2015 Actual': '#fdaf5a'
}
},
axis: {
x: {
type: 'timeseries',
tick: {
culling: false,
format: '%b'
}
},
y: {
tick: {
format: d3.format("$,.2f")
}
}
},
});
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet" />
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.12/d3.min.js"></script>
<div id="test"></div>
I saw someone mention using 'xs: {x .... y....} but I wasn't able to get that working. I need the X axis to be dates (hard coded right now but in my app I'm using dates associated with one dataset I'm looping through), and the Y axis to be $.
C3 tooltips seem to break when data arrays of different lengths are entered into the columns. You can try putting null values into the shorter array so that the tooltip can move properly.
JS Fiddle: https://jsfiddle.net/stancheta/7zgny2yd/
['2016 Actual', 12873666.64, 15976835.94, 19232540.28, 23649495.4, 26338636.36, 29496799.84, 43801703.66, 4263924.64, 5788580.3, null, null, null],
I am using Highcharts and I would like this chart to display categories on axis z. This is what I have now: JSFiddle
zAxis: {
min: 1,
max: 3,
categories: ['Apples', 'Bananas', 'Oranges'],
minorTickInterval: 1,
title: 'source'
},
As you can see I have 3 categories. I would like them to be displayed in the same way as the numbers on the x and y axes. Any ideas?
Just get set categories for every axis in your config and get it from chart.zAxis[0].options.categories for z axis. Then you can get indexes which are in this.point.x this.point.y and this.point.z and return a formatted tooltip containing categories names.
Code:
tooltip: {
formatter: function() {
const chart = this.point.series.chart,
catsX = chart.xAxis[0].categories,
catsY = chart.yAxis[0].categories,
catsZ = chart.zAxis[0].options.categories;
return `X: ${catsX[this.point.x]}<br/>
Y: ${catsY[this.point.y]}<br/>
Z: ${catsZ[this.point.z]}`;
}
},
Live example:
https://jsfiddle.net/p86a7y0g/
Api reference:
http://api.highcharts.com/highcharts/tooltip.formatter
Output: