I was trying to limit the horizontal axis to only two points ( minimum and maximum ).
I have tried using tick property for haxis but it seems to be not working for me.
here is the code snippet I have tried.
Please help
const chartoptions = {
//hAxis: { textPosition: 'none' },
hAxis: {textPosition: 'none',ticks: [-1000, -500, 0, 500, 1000], title: 'Time'},
vAxis: {title: 'Amount'},
Related
I am using Chart.js and would like to manage my Y-axis. It should look like this:
Intervals should be 15 steps and it should always show the maximum value - 45 (even the data from X-axis is less).
I am trying this:
options: {
scales: {
yAxes: [{
display: true,
ticks: {
maxTicksLimit: 45,
stepSize: 15,
}
}]
},
}
It doesn't work for me: the interval is not 15, but 2, and the maximum Y-axis value depends on X-axis data - if data is 30, then maximum Y-axis value is 30.
How could I fix that? Thank you!
If you open up your browser's dev tools, in the console it's likely you would see this error:
Invalid scale configuration for scale: yAxes
At least that's what I see when trying to use your options object. This tells us that we've not written the scales property correctly. Looking at the chart.js documentation, we see that scales is always an object, not an array of objects. Also based on your requirements it sounds like you would want to set max instead of maxTicksLimit which means you should write an options object like this:
options: {
scales: {
yAxes: {
display: true,
max: 45,
ticks: {
stepSize: 15
}
}
}
}
I'm trying to create chart using Dojox charting. I created plot and added Series.
this.addPlot("st", {type: Lines, markers: false, tension:"X"});
this.addSeries("Series A",
[{x:0, y:0}, {x:5, y:10},
{x:10, y:12}, {x:15, y:14},
{x:20, y:15}, {x:25, y:16},
{x:30, y:18}],
{plot: "st"});
Then I added MouseIndicator
new MouseIndicator (this, "st",
{series: "Series A",
labels: false,
mouseOver: true,
lineStroke: { color: "blue" }
});
So it has added indicator but with default colors.
Tried to change indicator with lineStroke, lineOutline or lineShadow. Nothing changed.
According to API docs it should change the line style^ http://bill.dojotoolkit.org/api/1.9/dojox/charting/action2d/MouseIndicator
Does anybody knows how to change MouseIndicator line style?
Here is my Hack of a solution.
Using dojo/aspect (http://dojotoolkit.org/reference-guide/1.10/dojo/aspect.html) to listen on the "_onMouseSingle" of the MouseIndicator object, and after this event occurs, change the marker and line stroke colors:
var mouseHoverIndicator = new MouseIndicator (this, "st",{
series: "Series A",
labels: false,
mouseOver: true,
lineStroke: { color: "blue" }
});
aspect.after(mouseHoverIndicator, "_onMouseSingle", function (value) {
var plot = mouseHoverIndicator.chart.getPlot(mouseHoverIndicator._uName);
plot.opt.markerStroke= {color:"blue"};
plot.opt.lineStroke= {color:"blue"};
plot.dirty = true;
mouseHoverIndicator.chart.render();
});
I must be missing something very stupid, because my pie chart works when I put a number in, but not a variable. The code for my chart is below. The two variables were taken from PHP variables, but they do work, because if I call an alert on the variables right before I make the chart, they do pop up. It's just as soon as I put them as data in the chart, the chart won't show up.
What am I missing here?
$('#space').highcharts({
chart: {
type: 'pie',
},
title: {
text: 'Used vs. available diskspace.'
},
subtitle: {
text: 'Over all customers.'
},
series: [{
type: 'pie',
name: 'Magnetic disks',
data: [
{
name: 'Free space',
color: '#2674c7',
y: $free,
},
{
name: 'Total space',
color: '#ac2d38',
y: $total,
sliced: false,
selected: true
},
]
}]
});
Got it, it was something sort of silly as I suspected:
the PHP variables I assigned to the js variables were strings...
Inside
y: $total,
you should use
y: <?php echo $total ?>,
Becuase you cannot common js / php variables.
I use flotr2, I wrote a test here.
http://jsfiddle.net/yKqXM/
If I want to show label on each bar stack, should I use "marker" type? and how do I use it.
I am new to flotr2, could you give me an good study article or docs, so I can study it.
Sorry if this question is stupid, but I am frustrated of looking for the example.
Matt
Yup, you can use the 'markers' attribute. You can actually just place this fragment after the bars type (you can use both at once):
markers: {
show: true,
position: 'ct',
},
However, there is a small problem with this. Flotr2 doesn't respect the stacked positions for markers, so the marker labels will end up in the wrong position.
To get around this, create some dummy data sets which are the summation of the stacks, and move the 'bars' and 'markers' to be directly specified on the separate data sources. The bit after the data is listed is just the "default" mode for each data source.
There are many quite useful opts for markers. See the library source.
Flotr.addType('markers', {
options: {
show: false, // => setting to true will show markers, false will hide
lineWidth: 1, // => line width of the rectangle around the marker
color: '#000000', // => text color
fill: false, // => fill or not the marekers' rectangles
fillColor: "#FFFFFF", // => fill color
fillOpacity: 0.4, // => fill opacity
stroke: false, // => draw the rectangle around the markers
position: 'ct', // => the markers position (vertical align: b, m, t, horizontal align: l, c, r)
verticalMargin: 0, // => the margin between the point and the text.
labelFormatter: Flotr.defaultMarkerFormatter,
fontSize: Flotr.defaultOptions.fontSize,
stacked: false, // => true if markers should be stacked
stackingType: 'b', // => define staching behavior, (b- bars like, a - area like) (see Issue 125 for details)
horizontal: false // => true if markers should be horizontal (For now only in a case on horizontal stacked bars, stacks should be calculated horizontaly)
}
I am trying to draw an pie chart using ExtJS but something is going wrong. I can see following warnings in firebug window :
Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing height attribute.
Code for my pie chart is as follows :
xtype: 'chart',
title: 'Location wise candidate distribution',
itemId: 'CandidateDistributionChart',
store: 'CandidateDistribution',
width: 250,
height: 260,
shadow: true,
animate: true,
theme: 'Base:gradients',
legend: {
position: 'right'
},
series: [{
type: 'pie',
field: 'candidateCount',
showInLegend: true,
label: {
field: 'name',
contrast: true,
font: '18px Arial'
}
}]
Why do those warnings are coming? Currently chart is not getting drawn even though I have mentioned all the necessary values.
Please help...
You used a string to define the store, but it needs a store object.
2 solutions :
1) store: Ext.getCmp('CandidateDistribution'),
Or 2) Define the store into a variable this way chartStore = Ext.create('Ext.data.Store', { ... }); and then pass it to the chart config : store: chartStore
But maybe it's not the problem according to the errors... Can you post the code of your store, your model, and the container of your chart ?
Make sure the value at least one value is not null or not zero. If all zeros or null you will have this type of error.
this is the model. I added the return and it worked. is a quick fix
{name: 'HD', type: 'number', convert: function(value,record){
if (value == 0)
return 0.0001 // The graphic needs at least one of the values to be more than 0 or will throw an error.
else
return value;
}
},