PDA

View Full Version : Line chart without markers configuration and highlightI



sehulloa
29 Jan 2012, 11:46 AM
Hi,

I want to built a chart as the next link:
http://www.highcharts.com/demo/spline-plot-bands

I need a chart without markers only line, because they are many points, but when the mouse is over a point that shows the highlighting effect.
I tried to remove the configuration of markers, but not showing the effect when you mouse over a point.


marker: {
radius: 0,
size: 0
}


And the configuration of the highlighting effect.


highlight: {
radius: 7,
size: 7
},


Is it possible to do this?
Is there any option that is missing?
Does anyone know how to do it?

Thank you.

mitchellsimoens
30 Jan 2012, 7:39 AM
What Ext JS 4 version are you using? Looking like the highlight config isn't really doing anything.

sehulloa
30 Jan 2012, 9:59 AM
Hi Mitchell,

I was using the 4.0.2 version and I changed to the new 4.0.7 version but is the same.
I want the highlight effect (shown enlarged marker) when the mouse is over a point, but only that point and not all.

Thank you.
undefined

josephkirubakaran
30 Jan 2012, 11:17 AM
Am not much familiar with charts. But I could able to do this. Checkout the following code


var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{ 'name': 'metric 1', 'data1': 10},
{ 'name': 'metric 2', 'data1': 6},
{ 'name': 'metric 3', 'data1': 8},
{ 'name': 'metric 4', 'data1': 4},
{ 'name': 'metric 5', 'data1': 5},
{ 'name': 'metric 6', 'data1': 3},
{ 'name': 'metric 7', 'data1': 10},
{ 'name': 'metric 8', 'data1': 10},
{ 'name': 'metric 9', 'data1': 3},
{ 'name': 'metric 10', 'data1': 2},
{ 'name': 'metric 11', 'data1': 10},
{ 'name': 'metric 12', 'data1': 1},
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
highlight:true,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],

series: [
{
type: 'line',
highlight: {size:100},
axis: 'left',
xField: 'name',
yField: 'data1',
smooth:true,
selectionTolerance:20,
showMarkers:true,
markerConfig:{radius:0.5, stroke:'blue', fill:'blue', 'stroke-width': 0, opacity:2},
style: {radius:1, stroke:'blue', fill:'blue', 'stroke-width': 0, opacity:1},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
}
}
]
});


Hope this helps!

sehulloa
30 Jan 2012, 12:37 PM
Thank you Joseph,

But, I need something as this.
31159

the markers are not showed until a point is pointed with the mouse, it is showed with the effect mentioned, otherwise only is showed the line without markers.

This is the normal behavior.
31160

Here is when the markers are disabled but the
highlight effect is enabled. the line is highlighted but the marker is not showed.

31161

josephkirubakaran
31 Jan 2012, 9:54 AM
Sehulloa,

You can play the game by changing markerConfig and style values. Checkout the following code..



var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{ 'name': 'metric 1', 'data1': 10},
{ 'name': 'metric 2', 'data1': 6},
{ 'name': 'metric 3', 'data1': 8},
{ 'name': 'metric 4', 'data1': 4},
{ 'name': 'metric 5', 'data1': 5},
{ 'name': 'metric 6', 'data1': 3},
{ 'name': 'metric 7', 'data1': 10},
{ 'name': 'metric 8', 'data1': 10},
{ 'name': 'metric 9', 'data1': 3},
{ 'name': 'metric 10', 'data1': 2},
{ 'name': 'metric 11', 'data1': 10},
{ 'name': 'metric 12', 'data1': 1},
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
highlight:true,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],

series: [
{
type: 'line',
highlight: {size:100},
axis: 'left',
xField: 'name',
yField: 'data1',
smooth:true,
selectionTolerance:20,
showMarkers:true,
markerConfig:{radius:0.5, stroke:'blue', fill:'blue', 'stroke-width': 0, opacity:2},
style: {radius:1, stroke:'blue', fill:'blue', 'stroke-width': 0, opacity:1},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
}
}
]
});

sehulloa
2 Feb 2012, 10:51 PM
Thank you to all, I have found the answer to my question.
Here the sample:
31312


The code is the next:



initComponent: function() {

Ext.chart.theme.White = Ext.extend(Ext.chart.theme.Base, {
constructor: function() {
Ext.chart.theme.White.superclass.constructor.call(this, {
axis: {
stroke: '#C2CFDF',
'stroke-width': 1
},
axisLabelBottom: {
fill: '#6A6A6A',
font: '11px Lucida Sans Unicode'
},
axisLabelLeft: {
fill: '#6A6A6A',
font: '11px Lucida Sans Unicode'
},
axisTitleBottom: {
fill: '#717D8B',
font: 'bold 14px Lucida Sans Unicode'
},
axisTitleLeft: {
fill: '#717D8B',
font: 'bold 14px Lucida Sans Unicode'
},
series: {
'stroke-width': 1
},
background: {
fill: '#ffffff'
},
marker: {
size: 0,
radius: 0,
},
});
}
});



Ext.define('dataBHCA', {
extend: 'Ext.data.Model',
fields:['date', 'counter']
});


var storebhca = Ext.create('Ext.data.Store', {
model: 'dataBHCA',
proxy: {
type: 'ajax',
url: './resources/databhca.php'
}
});

storebhca.load();

this.items = {
xtype: 'chart',
style: 'background:#fff',
store: storebhca,
shadow: true,
legend: true,
theme: 'White',
axes: [{
type: 'Numeric',
minimum: 0,
minorTickSteps: 10,
position: 'left',
fields: ['counter'],
title: 'BHCA',
minorTickSteps: 1,
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['date'],
title: 'Date',
label: {
rotate: {
degrees: 270
}
}
}],
series: [{
type: 'line',
smooth: true,
highlight: true,
highlightCfg: {
radius: 6,
size: 6,
stroke: '#94ac1a',
fill: '#94ac1a'
},
tips: {
width: 120,
constrainPosition: true,
renderer: function(storeItem, item) {
this.setTitle('Counter: ' + storeItem.get('counter') + '<br />'+
' Date: ' + storeItem.get('date'));
}
},
axis: 'left',
xField: 'date',
yField: 'counter',
title: 'BHCA'
}],
};

this.callParent(arguments);
}




The property that actually makes it work the effect highlight is highlightCfg.

Now, I have a new problem, as you can see in the first image, when a serie is selected, in the area of legend can not see the color of the serie selected, I think this is related with the use of a customized theme and don't use a theme as 'Category1'.

Here, we can see when the theme set is named "Category1" the color line in the legend can be distinguished, but its width does not change.
31313

Anybody has an idea about how fix this problem?

Ulloa

mayur_satasiya
19 Jun 2012, 5:00 AM
Am not much familiar with charts. But I could able to do this. Checkout the following code


var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{ 'name': 'metric 1', 'data1': 10},
{ 'name': 'metric 2', 'data1': 6},
{ 'name': 'metric 3', 'data1': 8},
{ 'name': 'metric 4', 'data1': 4},
{ 'name': 'metric 5', 'data1': 5},
{ 'name': 'metric 6', 'data1': 3},
{ 'name': 'metric 7', 'data1': 10},
{ 'name': 'metric 8', 'data1': 10},
{ 'name': 'metric 9', 'data1': 3},
{ 'name': 'metric 10', 'data1': 2},
{ 'name': 'metric 11', 'data1': 10},
{ 'name': 'metric 12', 'data1': 1},
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
highlight:true,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],

series: [
{
type: 'line',
highlight: {size:100},
axis: 'left',
xField: 'name',
yField: 'data1',
smooth:true,
selectionTolerance:20,
showMarkers:true,
markerConfig:{radius:0.5, stroke:'blue', fill:'blue', 'stroke-width': 0, opacity:2},
style: {radius:1, stroke:'blue', fill:'blue', 'stroke-width': 0, opacity:1},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
}
}
]
});


Hope this helps!

Thanks dear
it's work for me, Thank you very much

Thanks and Regards
Mayur