I made a dual_stacked_column chart.
Unfortunately the chart shows 2 different y axis. What do I have to set so that the y-axis get the same value? (vizscale?)
I searched for a long time and found the solution. The maxValues are just an example, but the glossy effect is cool.
HTML:
vizProperties="{ plotArea : { drawingEffect : 'glossy',
primaryScale : { fixedRange : true, minValue : 0, maxValue : 6000 },
secondaryScale : { fixedRange : true, minValue : 0, maxValue : 6000 } } }"
JS:
// set the scales
var oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame1");
// get manual input
var oYAxis = this.getView().byId("idYAxis");
var sYAxisValue = oYAxis.getValue();
oVizFrame.setVizProperties({
plotArea: {
primaryScale: {fixedRange : true, minValue: 0, maxValue: sYAxisValue },
secondaryScale: {fixedRange : true, minValue: 0, maxValue: sYAxisValue }
}
});
I faced a similar problem wir a dual bar chart.
I dont know if you can apply the same logic but its worth a try.
Change the chart type to stacked column and give the measure deklaration both columns.
example:
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="values1,values2" />
now they should render on the same scale.
Hope it helps!
Related
I have a line graph that receives and displays real-time data. I would like to have the last point of the line be a circle that blinks slowly to reinforce the idea that the graph is real-time. Note that the showSymbol attribute of the series is false.
Is there any way to do this on echarts?
To display a point on the last point of your data, you can use a markPoint.
But it doesn't have an option to make it blink so you can instead use a trick like changing its itemStyle.opacity periodically.
Here is an example : (you can copy the following code at the end of this echart example to try it out)
var v = 0
setInterval(function () {
v = v + 0.01
if(v >= 1) {
v = 0.2
}
myChart.setOption({
series: [
{
markPoint: {
animation: false,
symbol: 'circle',
data: [
{
xAxis: data[data.length-1].value[0],
yAxis: data[data.length-1].value[1],
symbolSize: 10,
itemStyle: {
opacity: v
},
}
]
},
}
]
});
}, 20);
There you have a blinking point on the last point of a real-time graphe. You can easily change the way the markPoint looks (shape, color, position ...) : see markPoint doc.
I'm trying to create an interactive and real-time graph using flot library. It's very similar to the real-time example in Flot site but with some additional options.
This is a part of my code:
var bars = false;
var lines = true;
var steps = false;
var xAxisInterval = 5;
var xAxisUnit = "minute";
var plot = 0;
var dataChart = [
{
label : "Consumo",
data : input1_data, //history
threshold : {below : threshold},
color : input1_color, //'#00B800',
lines : {show : input1_show, fill : input1_fill}
},
{
label : "Consumo Previsto",
data : input2_data, //forecast data
threshold : {below : threshold},
//stack : null,
color : input2_color,//'#66E066',
lines : {show : input2_show, fill : input2_fill}
}
];
var plotOptions = {
lines:{
show: lines,
steps: steps
},
bars: {
show: bars,
barWidth: 0.6
},
yaxis:{ min:0, max: 65000 },
xaxis: { mode : "time", tickSize : [ xAxisInterval, xAxisUnit ] },
zoom: { interactive : gridZoom },
pan: { interactive : gridPan },
points: { show: showPoints },
grid: { hoverable: gridHoverable, color: gridColor },
legend: { backgroundColor:legendBackgroundColor, backgroundOpacity:legendBackgroundOpacity, position: legendPosition }
};
if (plot == 0) {
plot = $.plot("#" + divId, dataChart, plotOptions);
}
else {
jQuery.each(dataChart , function(index, value) {
plot.setData([value.data]);
});
plot.setupGrid();
plot.draw();
}
If i only use the code line $.plot("#"+divId, dataChart, plotOptions), it works well.
But to improve performance, instead of construt an entire new plot in every time increment, i tryed to use the code in if/else statement. But the ploted chart loss some options, like series colors and legend, and is painted with color defined in grid options (gridColor) ..., as shown in figure below.
Is this a bug or am I doing something wrong?
You are replacing the all the series options with just the data piece. Also, setData replaces all the data in the chart, so I don't think calling it multiple times in a loop is correct (you'll only end up with the last series).
I usually follow this pattern to replace just the data:
var series = plot.getData();
for (var i = 0 i < dataChart.length; i++){
series[i].data = dataChart[i].data;
}
plot.setData(series);
plot.setupGrid();
plot.draw();
I have a date data series with uneven periods between data points. I want to have a label for each data point in the series. Any ideas how to archieve it?
Fiddle link is here
Just to promote my comment to an answer, one way to accomplish your mission would be to employ d3 axis to more rigidly control the axis. I updated John's jsfiddle here to demonstrate how we can do this. The full standalone code is below and in this gist.
<div id="volumeReport">
<script>
var svg = dimple.newSvg("#volumeReport", 590, 500);
var data = [
{"Date": "22/7/2014", "Volume" : 0},
{"Date": "15/11/2014", "Volume" : 1000},
{"Date": "5/01/2015", "Volume" : 2000},
{"Date": "5/2/2015", "Volume" : 3000},
{"Date": "31/3/2015", "Volume" : 4000}
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addTimeAxis("x", "Date", "%d-%m-%Y %H:%M:%S:%L", "%d-%m-%Y");
x.addOrderRule("Date");
x.timeField = "Date";
x.dateParseFormat = "%d/%m/%Y";
myChart.addMeasureAxis("y", "Volume");
var s = myChart.addSeries(null, dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.lineMarkers = true;
myChart.draw();
myChart.axes[0].shapes.call(
d3.svg.axis()
.orient("bottom")
.scale(myChart.axes[0]._scale)
.tickValues(data.map(function(d,i){
return d3.time.format("%d/%m/%Y").parse(d.Date)
})
)
.tickFormat(d3.time.format("%d-%m-%Y"))
)
</script>
</html>
A category axis will evenly space the dates along the axis:
myChart.addCategoryAxis("Date");
It also looks like you were trying to use a step area chart which requires version 2.1 of dimple. I've updated the version in the fiddle:
http://jsfiddle.net/tf3Sk/1/
I try to do something that should be super easy, I try to draw a chart with monthly data. I just whant to show the last 12 or 24 month in the past with it's data. I get the data from a MSSQL server so I can twist the date to meet highstock format (I tried the number of second from 1/1/1970 with no success).
data='[';
<cfloop query="maquery">
data = data + '#mois_annee#, #nb#,';
</cfloop>
data = data.slice(0, -1);
data = data + ']';
$(function() {
chart = new Highcharts.StockChart({
chart : {
renderTo : 'div_graph',
width : 600,
height : 300
},
series : [{
type : 'column',
name : 'Acheteurs Uniques',
data : eval(data),
tooltip: {
valueDecimals: 2
}
}],
rangeSelector: {
enabled: false
}
});
});
way simplier to explain with JSFIDDLE : http://jsfiddle.net/#&togetherjs=PIqVEj8qnp
Is there any way we can enable highcharts to display marker value at all the times ?
I got it working. Posting for reference of others
plotOptions : {
line : {
dataLabels : {
enabled : true,
formatter : function() {
return this.y + '%';
}
}
},
series : {
name : 'Team Briefing',
shadow : false,
marker : {
lineWidth : 2,
radius : 6,
symbol : 'circle'
}
}
},
Check the Point Marker reference guide. What I remember about Highcharts is that still it does not provide anything such as.
when you initiate the chart with an object (as your first argument) : ' ...new Highcharts.Chart( { ... } )'
one of this object properties you can use is the plotOptions.series.marker
this marker is an object itself:
marker:{
enabled:true,
lineWith:0.0,
radius:0.0,
// more attributes...
}
those are the default setting. meaning: It is enabled by default, but the radius is also zero by default, and that is the reson you don't see the points .
make a long story short: you need to set the raduis (to be bigger than zero)
read more at http://api.highcharts.com/highcharts#plotOptions.series.marker.radius