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
}
}
}
}
Related
render chart view
how the chart looks
So I feel like I've tried everything under the sun to remove that red rectangle above the chart. Anyone know how to remove it? Most of the examples with setting up options and legend like below might work with chartjs but not vue-chartjs if I'm not mistaken.
options: {
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
You litterly posted the answer yourself, the second object in the renderChart function is the options object so if you put it like this it will work:
{ responsive: true, maintainAspectRatio: true, legend: { display: false } }
Next time please dont post a screenshot of your code but include it as text in your post since it is a lot easyer to read and use for people
Im working on making a nice chart in vuejs with chartjs. I have a scatter chart here and chartjs seems to want to pad the x axis with unused values when I use large numbers like a unix timestamp.
Here is what it looks like with lables on so you can see what is happening:
I added the prop ...
xAxes: [
{
display: true,
ticks: {
padding: 0,
}
...assuming that was the solution but it has no affect.
Thank you!
Codepen of behavior
Got it!
Since all of my x values are multiples of 3600 (one hour in seconds) I was able to set the x axis stepSize to 3600 to make sure it begins and ends on a step.
scales: {
xAxes: [
{
ticks: {
stepSize: 3600
}
}
],
}
I am interested in making a bar chart that changes over time (ideally bars will move up and down smoothly to show data changes over time). I didn't expect it would be difficult but, maybe due to the way I am searching, I cannot find a pre-built component or library that does this. I have come across other animated graphs that show data changes over time (like https://developers.google.com/chart/interactive/docs/gallery/motionchart and http://www.highcharts.com/demo/dynamic-update) but nothing that does what I describe in a bar chart. It would also work if I could find a line chart or pie chart that smoothly changed over time but I would rather make a bar chart to do this if possible.
Does an application or component or library like this exist (and if so can you point me in the right direction)? If for some reason nothing like this is available, what is the closest thing to it available (what is the path that would require the least amount of effort to produce this chart)?
ZingChart should be able to do this for you, and it's super easy to use. The chart configuration is defined using a JSON object. Inside the plot object, the animation object can hold a number of different animation options, including effect, speed, delay, and sequence. More information on ZingChart's animation effects can be found here. The render method is called to tell ZingChart where to render the chart using a div's unique ID. For this example, I configured a function to be called every 3000 milliseconds, generating a random array of numbers between 0 and 100, using the setseriesvalues method to change the data at plotindex 0.
var oData = {
"type": "bar",
"scaleY": {
"values": "0:100:10"
},
"plot": {
"animation": {
"effect": "ANIMATION_SLIDE_BOTTOM"
}
},
"series": [{
"values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69]
}]
};
zingchart.render({
id: 'myChartDiv',
width: 600,
height: 400,
data: oData
});
setInterval(function() {
var aValues = [];
for (var n = 0; n < 12; n++) {
var num = Math.random() * (100 - 0) + 0;
aValues.push(num);
}
console.log(aValues);
zingchart.exec('myChartDiv', 'setseriesvalues', {
plotindex: 0,
values: aValues
});
}, 3000);
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChartDiv"></div>
Full disclaimer: I'm on the ZingChart team, but if there's anything else I can help you with, I'd be happy to help!
I have a certain view where I want to post text so I need the height of the row cells to be bigger than the default. I look up the documentation of ExtJS 4.0 and come up with this:
Ext.define('APP.view.CalendarEventsGrid', {
//extend: 'Ext.grid.Panel',//this is the default which is working
Ext.create('Ext.grid.Panel',{
viewConfig: {
height: 50
}
}),
id: 'CalendarEvent',
requires: [
'Ext.data.*',
'Ext.grid.plugin.CellEditing',
'Ext.form.field.Text',
'Ext.toolbar.TextItem',
],
initComponent: function(){...
But this don't do the trick. So could anyone help me with a way to change the height of the row in this exact view?
i am not sure what is your exact problem but i assume that you want to pass height: 50 in the viewConfig config option of Ext.grid.Panel
every config of the parent class can be passed through the child class so you don't need to instantiate parent class to specify config options (and actually what you tried in the question is not possible at all :))
Ext.define('SYMADM.view.CalendarEventsGrid', {
extend: 'Ext.grid.Panel',
viewConfig: {
height: 50
},
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;
}
},