I am using Chart.js to make a line chart. The working of the code is as follows. (Snapshots of the code below)
Data is retrieved from MongoDB and then the array of numerical data is passed to ejs file.
In the ejs file, when individual elements of the retrieved data are passes on to the data array, then it works correctly but not when whole array is passed.
The graph should look like this:
(There are total 30 values but only 5 are passed for sample)
But when I pass the whole array to data, then this happens:
The relevent code is as follows.
First code is (Using express and the data for graph is in "prices". It is an array as I have confirmed it multiple times.Also the individual tag is use for something else and is not neccesary for the chart.)
app.get('/:symb', async (req, res) => { const { symb } = req.params;
let prices = await (await price.find({ Symbol: symb }).distinct("Data.Close")).slice(-30);
res.render('individual.ejs', { prices, individual });
Second code is (using ejs)
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: `<%=base %>`,
datasets: [{
label: '# of Votes',
data: `<%= prices %>`,
backgroundColor: 'green', options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}]
}
});
(Here the labels "base" is an array of string from 1 to 30 ['1','2','3'...] and is just the count of main data "prices".
It seems like your problem is that you convert your labels array to a string by surrounding it by backticks. Chart.js does not like this. If you remove the backticks around the labels array variable and also around the data variable it should work fine
Is there any library for Angular where I can plot two Y axis on the same graph (one on the left and the other on the right for example)?
I tried libraries by chinmaymk and jtblin, but haven't found suitable method.
Thanks.
var chartData = {
"type":"mixed",
"title":{
"text":"Multiple Y Axis"
},
"scale-x":{
},
"scale-y":{
"values":"0:50:5"
},
"scale-y-2":{
"values":"0:40000:5000",
"guide":{
"visible":false
}
},
"series":[
{
"values":[8,31,12,40,24,20,16,40,9],
"type":"bar",
"scales":"scale-x,scale-y",
"hover-state":{
"visible":false
}
},
{
"values":[11254,26145,17014,2444,17871,25658,34002,26178,20413],
"type":"line",
"scales":"scale-x,scale-y-2"
}
]
};
zingchart.render({
id: "chart",
data: chartData,
width: "100%"
});
#chart {
width: 100%;
}
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="chart"></div>
ZingChart supports multiple y-axes with the scale-y-n objects. There's also an easy to use Angular directive on Github.
There's a simple demo in the snippet and here's a more real world example. You can right click the chart itself and select "View Source" to check out the JSON.
If you have any questions about implementation feel free to reach out - I'm on the ZC team.
I've found n3-charts library that solves my problem.
I am using EXT JS 3.4.
The code of my Column Model goes like this : -
My Ext.grid.Column for Column Model is getting configured from the database like this.
Ext.QuickTips.init();
cm = new Ext.grid.ColumnModel( {
columns : cols // the cols is getting generated from the database
});
The json data for the cols mentioned in above code is generated as follows:
{
header: "Title Alias",
type: "STRING",
dataIndex: "order#title_alias",
width: 80,
tooltip: "Title Alias",
sortable: "true",
filter: {
test: "/^{0}/i"
}
}
QUERY : The tool tip is shown in two lines. i want the tool tip to adjust its width
according to text the tool tip text should be shown in single line only.
BOUNDATION : cannot modify "cols".
APPROACH : can we override or apply some kind of configuration to the quick tips. IS it possible.
You should be able to set the css for the tooltip and define:
.x-tip .x-tip-body {
white-space: nowrap;
}
to prevent it from wrapping.
I got this template (default)
<span class="x-legend-item-marker {[values.disabled?'x-legend-inactive':'']}" style="background:{mark};"></span>{name}
that produce this :
I want to have the same template with every of it's functionnality. But, I need one more if-clause to it. I don't want an item to be 'legendarize' if it's value is 0.
Here is the complete code
{
xtype: 'container',
title: 'Chart',
iconCls: 'chart',
itemId: 'chart_Tab',
layout: {
type: 'fit'
},
items: [
{
xtype: 'polar',
itemId: 'pie',
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111',
'#222222',
'#115ea6',
'#94cc0a',
'#b61120',
'#dd8809',
'#11d13e',
'#a68887',
'#94df9d',
'#7f74f4',
'#112341',
'#abcdef1'
],
store: 'relativedata',
series: [
{
type: 'pie',
label: {
textBaseline: 'middle',
textAlign: 'center',
font: '9px Helvetica'
},
labelField: 'strName',
labelOverflowPadding: 0,
xField: 'numValue'
}
],
interactions: [
{
type: 'rotate'
}
],
listeners: [
{
fn: function(element, eOpts) {
var relStore = Ext.getStore('relativedata');
var eleStore = Ext.getStore('element');
var relModel;
var eleModel;
relStore.removeAll();
//Convert to CO2 qty
for(var i = 0; i< eleStore.getCount();i++)
{
eleModel = eleStore.getAt(i);
relModel = Ext.create(APPNAME + '.model.RelativeElement');
relModel.set('strName',eleModel.get('strName'));
relModel.set('numValue', eleModel.get('numValue')*eleModel.getFactor());
relStore.add(relModel);
}
relStore.sync();
//Hide arrows-legend
this._series[0]._label.attr.hidden=true;
},
event: 'painted'
}
],
legend: {
xtype: 'legend',
docked: 'bottom',
itemId: 'pie_legend',
itemTpl: [
'<span class="x-legend-item-marker {[values.disabled?\'x-legend-inactive\':\'\']}" style="background:{mark};"></span>{name}'
],
maxItemCache: 100,
store: 'element'
}
}
]
}
I ask for help because i'm not that good with templates. I would not dare say I understand everything of the default one actually.
I'm back! Yet, nobody's calling me slim shaddy for that... Unluckily!
So, to answer your initial question, the template you need would be something like the following:
// Configuration of the chart legend
legend: {
// Finally, we can use the value field to customize our templates.
itemTpl: [
'<tpl if="value != 0">', // <= template condition
'<span class="x-legend-item-marker {[values.disabled?\'x-legend-inactive\':\'\']}" style="background:{mark};"></span>{name}',
'</tpl>'
]
// ...
}
Unfortunately, as I've said in my previous comment, quick debugger inspection shows that this value variable, or any equivalence, is not available at the time this template is applied.
Now I'm going to give you a detailed explanation about how I was able to overcome this vexation. In part because this is such an involved hack that you'd better know what you're doing if you decide to apply it, and in part because you'll learn a lot more by witnessing the fishing techniques than by being given the fish right away -- in this case, the fish is not available for retail anyway. And also in a large part, I must confess, because I like to be lyrical about things I've put some energy in, and it's late, and my defenses against self congratulation have gotten a bit weak...
So, looking at Ext.chart.Legend's code shows that there's nothing to be done there, it's just a somewhat lightweight extension of Ext.dataview.Dataview. As such it must have a store bounded to it, which, obviously (and unfortunately), is not the one bound to the chart to provide its data.
Another judicious breakpoint (in the Legend's setStore method) shows that this store comes from Ext.chart.AbstractChart, and in the code of this class we can see two things: a dedicated legend store is created in the constructor, and chart series implement a method to feed this store, namely provideLegendInfo.
We're getting closer to our goal. What we need to do is add a value field to the legend store, and have our serie provide the data for this field. Great!
The wise approach now would be to implement these modifications with the minimal amount of replication of Ext's code... But after having spent an inconsiderate amount of time trying to do that with no luck, I'll just settle for wildly overriding these two methods, and giving the advice to put a big bold warning to check that the code of these methods doesn't change with the next versions of Touch:
if (Ext.getVersion().isGreaterThan('2.2.1')) {
// Give yourself a big warning to check that the overridden methods' code
// bellow has not changed (see further comments).
}
With that out of the way, let's go to the point without any further consideration for future generations.
That is, first we add a value field to the legend store:
/**
* Adds a value field to legend store.
*/
Ext.define(null, {
override: 'Ext.chart.AbstractChart'
// Berk, what a lot of code replication :( Let's just hope that this method's code
// won't change in the future...
,constructor: function() {
var me = this;
me.itemListeners = {};
me.surfaceMap = {};
me.legendStore = new Ext.data.Store({
storeId: this.getId() + '-legendStore',
autoDestroy: true,
fields: [
'id', 'name', 'mark', 'disabled', 'series', 'index'
// Adding my value field
,'value'
]
});
me.suspendLayout();
// For whatever reason, AbstractChart doesn't want to call its superclass
// (Ext.draw.Component) constructor and, by using callSuper, skips directly to
// Ext.Container's one. So well... I respect, but I must do it old school since
// callSuper would go to Ext.draw.Component from here.
Ext.Container.prototype.constructor.apply(this, arguments);
// me.callSuper(arguments);
me.refreshLegendStore();
me.getLegendStore().on('updaterecord', 'onUpdateLegendStore', me);
me.resumeLayout();
}
}, function() {
// Post-create functions are not called for overrides in touch as they are
// in ExtJS? Hmm... That would have been the perfect place to issue a big
// warning in case the version has changed, but we'll live with it :(
});
And, second, we make our chart serie feed that value. From your code, I can deduce that you're working with a pie chart, so I'm only giving the code for that, as a matter of illustration... But, if you've followed until here, it should be trivial to implement it for other kind of series. Anyway, here's the code:
/**
* Overrides `provideLegendInfo` to add the value to the legend records.
*
* Here again, let us all cross our fingers very hard, hoping for Sencha's team to not decide
* to add their own extra fields too soon...
*/
Ext.define(null, {
override: 'Ext.chart.series.Pie'
,provideLegendInfo: function(target) {
var store = this.getStore();
if (store) {
var items = store.getData().items,
labelField = this.getLabelField(),
field = this.getField(),
hidden = this.getHidden();
for (var i = 0; i < items.length; i++) {
target.push({
name: labelField ? String(items[i].get(labelField)) : field + " " + i,
mark: this.getStyleByIndex(i).fillStyle || this.getStyleByIndex(i).strokeStyle || 'black',
disabled: hidden[i],
series: this.getId(),
index: i
// Providing actual data value to the legend record
,value: items[i].get(field)
});
}
}
}
});
Let's sum it up. We've got two overrides and a custom template. We could hope that we'd be done by now. But here's what we get:
So, the DataView is adding some markup of its own around the itemTpl's markup. Well, well, well... At this point, I'm tired of tracking Ext's internals and, fortunately (for once!), I envision a quick patch for this. So that is without an hesitation that I'm throwing this CSS rule in:
.x-legend-item:empty {
display: none;
}
And finally we're done. I guess my line of thought and code might be a little tricky to replicate, so let me provide you with a definitive proof that this all works.
In this demo, there is a "metric four" that has a value of 0.
{
'name': 'metric four',
'data': 0
}
But you won't see it. Because that was the point of all this, wasn't it?
I'm using the Sencha Touch 2.1 with Charts 1.1 to display some data.
I have a pie chart depicted below:
I want the labels to stay where they are now , but I want them to be horizontal (not rotated).
extend: 'Ext.chart.PolarChart',
requires: [
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.series.Pie',
'Charting.store.charts.perStore',
'Ext.chart.interactions.Rotate'
],
config: {
colors: ["#6295C7", "#CCCCC", "#FFFFF"],
store: 'chrtProduct',
// centered:true,
// innerPadding:20,
series: [{
type: 'pie',
labelField: 'verdeling',
label:{
/*display:'middle',
orientation:'horizontal',*/
field:'patVerdeling',
font: '1em Trade Gothic LT Std Bold',
contrast:true,
disableCallout:true
},
xField: 'patVerdeling'
//,rotation:90
}]
//,interactions: ['rotate']
The following code doesn't seem to do anything when uncommented.
display:'middle',
orientation:'horizontal',
Ok, I'm not sure whether this is the best way or not but it works for me, so after spending some time digging into the sencha chart library, the solution is easier then what I expected.
Just comment this line in PieSlice.js located at touch/src/chart/series/sprite/PieSlice.js of your app project:
labelCfg.rotationRads = midAngle + Math.atan2(surfaceMatrix.y(1, 0) - surfaceMatrix.y(0, 0), surfaceMatrix.x(1, 0) - surfaceMatrix.x(0, 0));
This line perform as the key role to rotate the label of your pie chart.