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],
Related
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 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
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'm creating a line chart using n3 line chart in my angular app.
My data is array of dates and counts.
This is the result I get:
As you can see, the X axis values are inconsistent.
It has a tick every 12 hours, but each tick has different format. I'm trying to keep the format the same for every tick, i.e:
This is how I include the chart in my html:
<linechart class="linechart" data="data" options="options"></linechart>
This is my axes options:
$scope.options = {
axes: {
x: {
key: "from",
type: "date",
innerTicks: false,
grid: false,
ticksInterval: d3.time.days
},
y: {
ticks: 6,
ticksFormatter: $scope. formatNumber
}
}
I've tried to use diffent values for ticks and ticksInterval but with no success.
Any way to achieve this?
Thank you.
I had the same problem today.
I solved it using thickFormat and the d3.time.format() function.
axes : {
x : {
key : "date",
type : 'date',
tickFormat : d3.time.format("%x %X")
}
}
I have a chart made with highcharts.js.
The graph works the way I wanted but then if I try to set the categories (programmatically or not) somehitng strange happen, the tick become smaller and move to the centre leaving a big space on the sides of the graph.
BEFORE:
AFTER:
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'graph',
type: 'area',
},
xAxis: {
title: {
text: ''
},
startOnTick: false,
endOnTick: false,
tickmarkPlacement: 'on',
},
series: [{
data: [['aa',29.9], ['bb',71.5], ['cc',106.4],['dd', 129.2 ]]
}],
});
// the button handler
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setCategories(['bb', 'bb', 'cc', 'dd']);
});
});
See this JsFiddle:
http://jsfiddle.net/MaurizioPiccini/d746v/3/
It all happens when you press the button (the categories can be set in the xAxis as well giving the same problem).
Is it possible to have named categories to start and end at the graph extremes?
You can use workaround which, updatse your axis with defined min/max value.
chart.xAxis[0].update({
categories: ['bb', 'bb', 'cc', 'dd'],
min: 0.5,
max: 2.5
});
http://jsfiddle.net/d746v/6/
I found a solution that is also reporteed here:
http://forum.highcharts.com/highcharts-usage/highchart-ticks-start-point-change-when-categories-names-are-t29052/
The solution is not to use categorized xAxis but linear or datetime with label formatter like this:
xAxis: {
labels: {
formatter: function(){
return categories[this.value];
}
}
}
where categories is an array of categories.
It looks like that is the only way to make the chart behave this way.