Create a chart of type Line, so it can load one or more types of series within that same graph. More in this case only two series as in the link.
I made no listeners->painted to render the chart.
The caption I download dynamically good. but the lines do not appear
Following the code of the View, it has two links with the data in json .
prntscr.com/80vj9p ---- in this I load the graphIndBIStore in case it would be the two lines of the graph and the two legends
prntscr.com/80vkis ---- in this I load the values of the chart more, do not load the lines are in the upper left corner
Graph view image prntscr.com/80vovv
Ext.define('Integrator.view.BI.Chart.Line', {
extend: 'Ext.Panel',
alias: 'widget.linechart',
requires: ['Ext.chart.axis.Numeric', 'Ext.data.JsonStore', 'Ext.chart.CartesianChart'],
config: {
cls: 'card4',
layout: 'fit',
items: [
{
xtype: 'chart',
id: 'chartBILine',
store: {},
background: 'white',
animate: true,
legend:{
position: 'bottom'
}
}
],
listeners: {
painted: function () {
var indicadorStore = Ext.getStore('biChartsStore'),
graficoIndBIStore = Ext.getStore('GraficoIndBIStore'),
chart = Ext.getCmp('chartBILine'),
seriesArray = new Array(),
axesArray = new Array(),
fields = new Array(),
lineColors = ['#115fa6', '#94ae0a', '#a61120', '#006600', '#ff9900', '#ff9999', '#ffccff', '#66ff00', '#cc33ff'],
markerColors = ['#94ae0a', '#a61120', '#115fa6', '#003300', '#006600', '#0066ff', '#993300', '#66ff00', '#cc33ff'];
graficoIndBIStore.each(function(rec, index){
seriesArray.push(
new Ext.chart.series.Line({
type: 'line',
xField: 'data',
yField: [rec.data.titulo_ind],
stacked: false,
style: {
smooth: true,
stroke: lineColors[index - 0],
lineWidth: 1,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3
},
marker: {
type: 'circle',
stroke: markerColors[index - 0],
fill: markerColors[index - 0],
lineWidth: 2,
radius: 4,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3,
fx: {
duration: 300
}
}
})
);
});
indicadorStore.each(function(rec2, index2){
fields.push(rec2.data.valor);
});
axesArray.push(
new Ext.chart.axis.Numeric({
type: 'numeric',
position: 'left',
fields: fields,
title: 'Valor',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd'
}
},
style: {
axisLine: false,
estStepSize: 20,
stroke: '#ddd',
'stroke-width': 0.5
}
})
);
axesArray.push(
new Ext.chart.axis.Category({
type: 'category',
position: 'bottom',
fields: ['data'],
title: {
text: 'Meses',
fontSize: !Ext.os.is.Phone ? 15 : 10
},
style: {
estStepSize: 1,
stroke: '#999'
},
label: {
rotate: { degrees: 65 }
}
})
);
var data = {"data": indicadorStore.getData().items};
chart.setStore(data);
chart.setAxes(axesArray);
chart.setSeries(seriesArray);
}
}
}
});