Im using highcharts for plotting a column type chart.
Data on x-axis is not a timestamp based one. It is normal categories only.
Like the one in the below mentioned fiddle.
JSFIDDLE : http://jsfiddle.net/BalajiR/d1LL2tvk/4/
I have enabled panning, so that the user can pan across the chart to view the complete chart.
It is working fine in browser as like in the fiddle.
But, the same is not working for touch devices, which is expecting a zoomed chart for panning .
I don't want any zoom functionality.
Just same behaviour as like browser in device (Panning).
Please share any way to implement the same.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '#F0F0F0',
panning:true
},
title: {
text: null
},
xAxis: {
categories: ['PLAN_1','PLAN_2','PLAN_3','PLAN_4','PLAN_5','PLAN_6','PLAN_7','PLAN_8','PLAN_9','PLAN_10'],
min:0,
max: 3
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y;
}
},
plotOptions: {
column: {
grouping: false,
pointWidth: 30
}
},
series: [{
name: 'Total',
data: [8, 10, 5, 9, 6, 8, 10, 5, 9, 6],
color: '#97BF0D'
}, {
name: 'Actionable',
data: [4, 5, 2, 4, 3, 4, 5, 2, 4, 3],
color: '#FFFFFF'
}]
});
});
Regards,
Balaji R
I haven't implemented it myself yet and there may be a cleaner way of doing this but here's a potential solution:
Your browser lets you pan because it is the default action of the event onDrag; this event occurs when the user clicks and drags across the screen. Your mobile platform is using onZoom instead because there isn't a dragging functionality on it.
What I would do is manually set the event to pan like you want it to on the onZoom event. If you found the default behavior of onDrag, you could do
onZoom(e){// same behavior as onDrag};
All of this is defined in the events key.
Related
How do I color each boxes individually in an echarts box-plot based on a function?
The following function works on a simple bar chart and colors the bars appropriately:
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
itemStyle: {
color: function(seriesIndex) {
return ProfessionColor[seriesIndex.name.split("_", 1).toString()]
},
},
}]
However, it does not work on a box-plot:
series: [{
name: 'boxplot',
type: 'boxplot',
datasetIndex: 1,
itemStyle: {
color: function(seriesIndex) {
return ProfessionColor[seriesIndex.name.split('_', 1)];
}
},
encode: {
tooltip: [1, 2, 3, 4, 5]
}
},
{
name: 'outlier',
type: 'scatter',
encode: {
x: 1,
y: 0
},
datasetIndex: 2
}
]
If I provide color: "red" rather than a function all boxes are colored red. This leads me to believe that it needs to happen in the transform.config which I can't find in the documents or tutorial.
Echarts Box-Plot currently
The link is the complete charts in its current form.
Apparently, echarts only allows scripting (i.e., using a function for) either the line color -- option itemStyle.borderColor or the fill color -- option itemStyle.color.
The difference between the two appears to be made by the value of the internal property BoxplotSeriesModel#visualDrawType. It is now set to "stroke", which means that borderColor can be set via a function.
Since you wanted to set the fill color, its value should be set to "fill". I searched a way to change that property - it was rather difficult for echarts don't document an API for extensions. Still, navigating the source code I came up with this hacky solution:
const BoxplotSeriesModel = echarts.ComponentModel.getClassesByMainType('series').find(cls=>cls.type==='series.boxplot');
const BoxplotSeriesModelFill = function(...args){
const _this = new BoxplotSeriesModel(...args);
_this.visualDrawType = 'fill';
return _this;
}
BoxplotSeriesModelFill.type = BoxplotSeriesModel.type;
echarts.ComponentModel.registerClass(BoxplotSeriesModelFill);
That's a "patch" to be applied at the beginning of your script, immediately after you have the echarts global defined.
Here's a forked version of your code that uses that patch. The only other change I made was to set a borderColor (can now only be a fixed value) to black.
This will not get you all the way, but if you add colorBy: "data" to your options and remove the itemStyle, it will look like this:
I am using echarts Angular version- ngx-echarts in my project. I want to catch click event done on a line graph. chartClick or any of the mouse event of ngx-echarts library is not working for line graphs but they are working for barGraphs. How can I catch click events in line graph using ngx-echarts
<div echarts [options]="chartOption"
(chartClick)="onChartEvent($event, 'chartClick')">
</div>
onChartEvent(event: any, type: string) {
console.log('chart event:', type, event);
}
Logical entity is not entering the onChartEvent function even when click is performed
You can do it by this way.
when you build your options, in series object populate:
series: [
{ // your bar
type: 'bar',
barWidth: '30%',
data: myData
},
{ // shadow bar
type: 'bar',
barWidth: '30%',
itemStyle: {
// transparent bar
normal: { color: 'rgba(0, 0, 0, 0)' }
},
barGap: '-100%',
data: myDataShadow,
animation: false
}
]
Where myDataShow is a copy of myData.
I recommend you put the biggest value in all positions of myDataShadow to make all bar clickable.
In the line chart the 'chartClick' event gets fired only if you click on the points of the lines.
Please go ahead and add the symbol, with that you can click over the point and the event would be triggered. Replace for example triangle over none as shown below:
private mySeries = {
type: 'line',
name: 'prod',
data: myData,
symbol: 'triangle',
itemStyle: {
color: '#35b53a'
}
};
Is there any Option for active brush without showing a toolbox.
Working with Echarts library version 3 . trying to find a solution with Echarts provided Document
"https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.brush.icon.rect"
Sample Code
{
brush: {
toolbox: ['rect'],
brushLink: [0, 1, 2, 3],
brushType: 'rect',
brushMode: ['single'],
outOfBrush: {
color: '#abc'
},
brushStyle: {
borderWidth: 2,
color: 'rgba(0,0,0,0.2)',
borderColor: 'rgba(0,0,0,0.5)'
},
throttleDelay: 300
},
toolbox: {
show: false,
feature: {
brush: {
type: ['rect'],
title: {
rect: 'Active Brush'
}
}
}
}
}
To enable dataZoom feature (pragmatically) in echarts toolbar I have used below method
echartInstance._componentsMap[Object.keys(echartInstance._componentsMap)[0]]._features['dataZoom'].model.iconPaths.zoom.trigger('click');
or
echartInstance._componentsMap[' - 0_toolbox']._features['dataZoom'].model.iconPaths.zoom.trigger('click');
Similarly you can enable any echarts toolbar feature using the same mechanism.
Note: If you are using latest EChart then you may have to use _componentsViews instead of _componentsMap.
Thanks to Rob Laverty for updating us for above change.
Just did this to Echarts 5:
echartInstance._componentsViews
.find(c => c._features && c._features.dataZoom)
._features.dataZoom.model.iconPaths.zoom.trigger('click')
events: {
click: function (event) {
this.lineWidth=5;
}
}
This is Highcharts series click event function. I set this series width 5 in here. It works when I do click on series but as I removed my mouse from series. Series width goes back to normal. I want this width to be stable what I set in click event. Until I don't change i.t
I think that you can use Series.update() method in case of your chart. Here you can find information about this method:
http://api.highcharts.com/highstock#Series.update
$(function() {
$('#container').highcharts({
plotOptions: {
series: {
events: {
click: function(event) {
this.update({
lineWidth: 5
})
}
}
}
},
series: [{
name: 'ADBE',
data: [1, 2, 3, 4]
}]
});
});
And here you can find simple example how it can work:
http://jsfiddle.net/5u6anyzb/3/
Best regards.
I'm looking for a way to create what come to know to be called a "bubble chart" for a website I'm building. It needs to be compatible with IE7 and above, and of course all the good browsers like Firefox, Chrome and Safari. And no flash since this thing will need to run on iOS.
The chart needs to look like this, http://www.flickr.com/photos/jgrahamthomas/5591441300/
I've browse online and tried a few things, including:
Google Scatter Charts. This doesn't work as it seems Google Charts limits the size of a point to something smaller than I need. And Venn Diagrams are limited to three circles.
Protovis Dots. Great library, but isn't compatible with IE8.
Raphael Javascript. This one might be my best bet, but there's no explicit support for bubble charts.
Thanks for your help.
It looks like Raphael javascript is the way to go. It's compatible with IE6. I found a great tutorial at http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/ and am able to get the example working on my rails site with this code:
# window.onload = function() {
# var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
# var circle = paper.circle(100, 100, 80);
# for(var i = 0; i < 5; i+=1) {
# var multiplier = i*5;
# paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)
# }
# var rectangle = paper.rect(200, 200, 250, 100);
# var ellipse = paper.ellipse(200, 400, 100, 50);
# }
You can give Protovis a chance, the library looks good for your needs: http://vis.stanford.edu/protovis/ex/
Another charting library is Highcharts, but I haven't tried it yet: http://www.highcharts.com/
Have you had a look at flot?
It's a plotting library for jQuery. While it technically doesn't have any "native" support for bubble charts it is possible to create bubble charts with it by using a few tricks, the simplest one probably being to simply put each point in its own data series (thus allowing you to control the radius of each individual point.
By defining your points similar to this you'll be able to create a bubble chart:
var dataSet = [{
color:"rgba(0,0,0,0)", // Set the color so it's transparent
shadowSize:0, // No drop shadow effect
data: [[0,1],], // Coordinates of the point, normally you'd have several
// points listed here...
points: {
show:true,
fill:true,
radius: 2, // Here we set the radius of the point (or rather, all points
// in the data series which in this case is just one)
fillColor: "rgba(255,140,0,1)", // Bright orange :D
}
},
/* Insert more points here */
];
There is a bubble chart available for flot here
Note that you need to scale your bubbles size yourself if you don't want them to coverup the graph. Documentation is here.
To use it, add the following at the beggining of your html page:
and call it from a json result or any data object like in this sample:
$.getJSON('myQuery.py?'+params, function(oJson) {
// ... Some validation here to see if the query worked well ...
$.plot('#myContainer',
// ---------- Series ----------
[{
label: 'Line Sample',
data: oJson.lineData,
color: 'rgba(192, 16, 16, .2)',
lines: { show: true },
points: { show: false }
},{
label: 'Bubble Sample',
data: oJson.bubbleData, // arrays of [x,y,size]
color: 'rgba(80, 224, 80, .5)',
lines: { show: false },
points: { show: false },
},{
label: 'Points sample',
data: oJson.pointsData,
color: 'rgba(255, 255, 0, 1)',
lines: { show: false },
points: { show: true, fillColor: 'rgba(255, 255, 0, .8)' }
},{
...other series
}],
// ---------- Options ----------
{ legend: {
show: true,
labelBoxBorderColor: 'rgba(32, 32, 32, .2)',
noColumns: 6,
position: "se",
backgroundColor: 'rgba(224, 224, 224, .2)',
backgroundOpacity: .2,
sorted: false
},
series: {
bubbles: { active: true, show: true, fill: true, linewidth: 2 }
},
grid: { hoverable: true, clickable: true } },
xaxis: { tickLength: 0 }
}); // End of plot call
// ...
}); // End of getJSON call
I tried to do the same thing with jqPlot which has some advantages but doesn't work with bubbles and other kind of series on the same graph. Also Flot does a better job to synchronise common axis scale with many series. Highchart does a really good job here (mixing bubble chart with other kind of series) but isn't free for us (government context).