I am using TreeChart to make an indicator as shown in the picture. But I have a problem I can not make the three-color gradient to that gauge. This is my code
Steema.TeeChart.TChart tChart = new Steema.TeeChart.TChart(this);
tChart.Panel.Transparent = false;
Steema.TeeChart.Styles.Gauges gauges = new Steema.TeeChart.Styles.Gauges(tChart.Chart);
Steema.TeeChart.Drawing.Gradient g = new Steema.TeeChart.Drawing.Gradient(gauges.Chart);
gauges.bBrush.Gradient.Direction = Steema.TeeChart.Drawing.GradientDirection.DiagonalUp;
gauges.bBrush.Gradient.StartColor = System.Drawing.Color.Red;
gauges.bBrush.Gradient.MiddleColor = System.Drawing.Color.Black;
gauges.bBrush.Gradient.EndColor = System.Drawing.Color.Blue;
gauges.bBrush.Gradient.Visible = true;
gauges.Pen.Color = System.Drawing.Color.FromArgb(5,56,73);
gauges.TotalAngle = 180; // circular arc
gauges.RotationAngle = 180; // arc rotation angle
gauges.HandStyle = Steema.TeeChart.Styles.HandStyle.Triangle; // pointer style
gauges.Center.Style = Steema.TeeChart.Styles.PointerStyles.Circle; // SPHERE center circle style
gauges.Center.HorizSize = 5; // center circle level size
gauges.Center.VertSize = 5; // center circle vertical size
gauges.ShowInLegend = false; // display the legend
gauges.HandDistance = 23; // pointer length
//---------------------------------------------------
gauges.Value = 80;
gauges.Minimum = 0; // minimum;
gauges.Maximum = 100; // maximum value
//----------------------------------------------------
gauges.MinorTickDistance = 0;
gauges.Pen.DashWidth = 23;
gauges.Chart.Axes.Left.AxisPen.Width = 65; // brush width;
gauges.Chart.Axes.Left.AxisPen.Color = System.Drawing.Color.Red;
gauges.Chart.Axes.Left.MinorTickCount = 5; // the scale value scale line number
gauges.Chart.Axes.Left.MinorTicks.Length = 10; // the scale value scale line length of
gauges.Chart.Axes.Left.Ticks.Length = 20; // display the value scale line length of
gauges.Chart.Axes.Left.Increment = 3000; // the scale value of interval size
SetContentView(tChart) ;
I also tried the following lines of code
gauges.CircleGradient.Direction = Steema.TeeChart.Drawing.GradientDirection.DiagonalUp;
gauges.CircleGradient.Visible = true;
gauges.CircleGradient.StartColor = System.Drawing.Color.Green;
gauges.CircleGradient.EndColor = System.Drawing.Color.Red;
gauges.CircleGradient.UseStandardGradient = true;
I hope I help
regards
You should use Steema.TeeChart.Styles.CircularGauge instead of Steema.TeeChart.Styles.Gauges which is a much simpler gauge version. For example, using the code snippet below, you get a similar gauge to the image in your link:
Is this similar to what you are looking for?
tChart1.Header.Visible = false;
Steema.TeeChart.Styles.CircularGauge circularGauge1 = new Steema.TeeChart.Styles.CircularGauge(tChart1.Chart);
circularGauge1.Frame.Visible = false;
circularGauge1.FaceBrush.Visible = false;
circularGauge1.DisplayTotalAngle = 180;
circularGauge1.TotalAngle = 180;
circularGauge1.Value = 200;
circularGauge1.Ticks.Visible = false;
circularGauge1.Minimum = 0;
circularGauge1.Maximum = 1000;
circularGauge1.Axis.AxisPen.Visible = false;
circularGauge1.Axis.Increment = 500;
circularGauge1.RedLine.Visible = false;
circularGauge1.GreenLineStartValue = 0;
circularGauge1.GreenLineEndValue = 1000;
circularGauge1.GreenLine.Gradient.Direction = Steema.TeeChart.Drawing.GradientDirection.LeftRight;
circularGauge1.GreenLine.Gradient.UseMiddle = true;
circularGauge1.GreenLine.Gradient.StartColor = Color.Orange;
circularGauge1.GreenLine.Gradient.MiddleColor = Color.Yellow;
circularGauge1.GreenLine.Gradient.EndColor = Color.Green;
circularGauge1.GreenLine.Pen.Visible = false;
Related
I am trying to translate an old flash animation with animate. On the original flash animation the map image is draggable and zoomable but the map ´s borders always stick to the sides of the stage if you pan it or zoom it all the way.
On my test i grabbed some code that allows panning and zooming but the map crosses the stage boundaries if you pan all the way, in fact you can make the map dissapear of the stage.
I think there should be a way to draw like a secondary outer stage and not let the map image go beyond it.
This is the code I have.
var that = this;
var clickedX;
var clickedY;
var isDragging = false;
var friction = 0.85;
var speedX = 0;
var speedY = 0;
var mapOriginalX = this.map.x;
var mapOriginalY = this.map.y;
var mapNudge = 5;
var minScale = 0.25;
var maxScale = 3;
function onMouseWheel(e)
{
var delta;
if (e == window.event)
delta = -10 / window.event.wheelDeltaY;
else
delta = e.detail / 30;
var zoomFactor = delta;
scaleMap(zoomFactor);
}
function mouseDown(e)
{
clickedX = stage.mouseX;
clickedY = stage.mouseY;
isDragging = true;
console.log(stage.mouseX);
console.log(stage.mouseY);
}
function stageMouseUp(e)
{
isDragging = false;
}
function update(e)
{
if (isDragging)
{
speedX = stage.mouseX - clickedX;
speedY = stage.mouseY - clickedY;
}
speedX *= friction;
speedY *= friction;
// saber el tamaño actual del mapa en este punto.
that.map.x += speedX;
that.map.y += speedY;
console.log(that.map.y);
console.log(that.map.x);
clickedX = stage.mouseX;
clickedY = stage.mouseY;
//
}
function resetMap()
{
that.map.x = mapOriginalX;
that.map.y = mapOriginalY;
that.map.scaleX = that.map.scaleY = 1;
}
function zoomMap(e) //control visual
{
if (e.currentTarget == that.plusButton)
scaleMap(-0.1);
if (e.currentTarget == that.minusButton)
scaleMap(0.1);
}
function moveMap(e) //control visual
{
if (e.currentTarget == that.upButton)
speedY -= mapNudge;
else if (e.currentTarget == that.rightButton)
speedX += mapNudge;
else if (e.currentTarget == that.downButton)
speedY += mapNudge;
else if (e.currentTarget == that.leftButton)
speedX -= mapNudge;
}
function scaleMap(amount)
{
var map = that.map; // we will scale de map so this goes first.
map.scaleX -= amount; // same as map.scaleX = map.scaleX - amount
map.scaleY = map.scaleX;
if (map.scaleX < minScale)
map.scaleX = map.scaleY = minScale;
else if (map.scaleX > maxScale)
map.scaleX = map.scaleY = maxScale;
}
// listeners
this.map.on("mousedown", mouseDown.bind(this));
this.resetButton.on("click", resetMap.bind(this));
this.plusButton.on("click", zoomMap.bind(this));
this.minusButton.on("click", zoomMap.bind(this));
this.upButton.on("click", moveMap.bind(this));
this.rightButton.on("click", moveMap.bind(this));
this.downButton.on("click", moveMap.bind(this));
this.leftButton.on("click", moveMap.bind(this));
stage.on("stagemouseup", stageMouseUp.bind(this));
document.getElementById('canvas').addEventListener('mousewheel', onMouseWheel.bind(this));
document.getElementById('canvas').addEventListener('DOMMouseScroll', onMouseWheel.bind(this));
createjs.Ticker.addEventListener("tick", update.bind(this));
resetMap();
One trick I usually use is to create a "fence" procedure that checks bounds and corrects them. It will take some setup though.
To use this method, first set up these variables based on your own scene. Perhaps this is what you meant by defining a "second stage?"
var stageLeft = 0;
var stageRight = 500;
var stageTop = 0;
var stageBottom = 500;
this.map.setBounds(0,0,1462, 1047); // Set the values to match your map
var mapBounds = this.map.getBounds();
Then, add this procedure, or a variation of it based on how your map coordinates are set.
// procedure to correct the map x/y to fit the stage
function fenceMap() {
var map = that.map;
var ptTopLeft = map.localToGlobal(mapBounds.x,mapBounds.y);
var ptBotRight = map.localToGlobal(mapBounds.width,mapBounds.height);
if ((ptBotRight.x - ptTopLeft.x) > (stageRight-stageLeft)) {
if (ptTopLeft.x > stageLeft) {
map.x -= ptTopLeft.x - stageLeft;
speedX = 0;
} else if (ptBotRight.x < stageRight) {
map.x -= ptBotRight.x - stageRight;
speedX = 0;
}
}
if ((ptBotRight.y - ptTopLeft.y) > (stageBottom-stageTop)) {
if (ptTopLeft.y > stageTop) {
map.y -= ptTopLeft.y - stageTop;
speedY = 0;
} else if (ptBotRight.y < stageBottom) {
map.y -= ptBotRight.y - stageBottom;
speedY = 0;
}
}
}
Then, just add to the end of your update(), zoomMap(), moveMap(), and scaleMap() functions:
fenceMap();
As you can see here http://allopensensors.com/profile/andreas/
the date on x-axis is nonreadable. I'd like to add a line break. How can i solve this?
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://allopensensors.com/amcharts/images/";
chart.dataProvider = chartData;
chart.marginLeft = 10;
chart.categoryField = "year";
chart.dataDateFormat = "YYYY-MM-DD JJ:NN:SS";
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
// categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "200"; // our data is yearly, so we set minPeriod to YYYY
categoryAxis.dashLength = 3;
categoryAxis.minorGridEnabled = true;
categoryAxis.minorGridAlpha = 0.1;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.inside = true;
valueAxis.dashLength = 3;
chart.addValueAxis(valueAxis);
// GRAPH
graph = new AmCharts.AmGraph();
graph.type = "smoothedLine"; // this line makes the graph smoothed line.
graph.lineColor = "#d1655d";
graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
graph.bullet = "round";
graph.bulletSize = 8;
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 2;
graph.lineThickness = 2;
graph.valueField = "value";
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "JJ:NN:SS";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
chart.creditsPosition = "bottom-right";
// WRITE
chart.write("chartdiv");
});
// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
// chart.zoomToDates(new Date(1972, 0), new Date(2200, 0));
chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
}
To make it readable, you can rotate the labels with custom angle. Try categoryAxis.labelRotation : 45
For Reference: http://www.amcharts.com/demos/column-with-rotated-series/
Hope it helps!
I currently have this working in a desktop browser but not on touch devices because I update the variables I need on mouseover. So to get around this I am trying to check for collision detection between two containers and then update the needed variables. The items should snap to the placeholder positions when a collision between the two is detected. The catch is that items and placeholders are placed dynamically any item must be able to snap to any placeholder.
var placeholders,items,selectedItem,collision,startX, startY, snapX, snapY, xpos, ypos;
var stage = new createjs.Stage("canvas");
createjs.Touch.enable(stage);
createjs.Ticker.addEventListener("tick", tick);
function init(){
xpos = 0;
ypos = 120;
container = new createjs.Container();
stage.addChild(container);
placeholders = new createjs.Container();
placeholders.name = "placeholders"
stage.addChild(placeholders);
items = new createjs.Container();
stage.addChild(items);
for(i=0;i<2;i++){
placeholder = new CustomContainer(i, "#ff0000", 100,100);
placeholder.setBounds(0,0,100,100);
placeholder.cursor = "pointer";
placeholder.x = xpos;
placeholder.name = "placeholder"+i
container.addChild(placeholder)
xpos+= (placeholder.getBounds().width + 10);
}
xpos = 0;
for(j=0;j<2;j++){
item = new CustomContainer(j, "#0000ff", 100,100);
item.active = false;
item.setBounds(0,0,100,100);
item.name = "item"+j;
item.x = xpos;
item.y = ypos;
item.startX = xpos;
item.startY = ypos;
container.addChild(item)
item.addEventListener("mousedown", selectItem);
xpos+= (item.getBounds().width + 10);
}
stage.addChild(placeholders,items);
}
function selectItem(evt) {
selectedItem = evt.target.parent;
selectedItem.mouseEnabled = false;
evt.addEventListener("mousemove", function(ev) {
moveItem(ev);
})
evt.addEventListener("mouseup", function(ev) {
selectedItem.mouseEnabled = true;
if(collision){
//New position based on the hitTest
//selectedItem.x = ;
//selectedItem.y = ;
}else{
selectedItem.x = selectedItem.startX;
selectedItem.y = selectedItem.startY;
}
})
}
function moveItem(evt){
pt = placeholders.globalToLocal(stage.mouseX, stage.mouseY);
obj = evt.target.parent;
obj.x = pt.x - 50;
obj.y = pt.y - 50;
//selectedItem collision with placeholder
collision = obj.hitTest(pt.x,pt.y)
}
function tick(evt) {
stage.update();
}
$(document).ready(init());
I am just not getting the hitTest right. You can see the working code below.
http://jsfiddle.net/non_tech_guy/2d68W/4/
The hittest will test pixel-perfect hit. I believe you're looking for a collision test.
Try this: https://github.com/olsn/Collision-Detection-for-EaselJS
i have a working program where i can add an array to a Zedgraph and show this in a form.
Now i only want to change the display of the x-axis from points (0..400) to frequency (9e3..6e9 Hz).
Here are my currently working functions:
public void AddGraph(double[] Values, string LegendName)
{
int i = 0;
PointPairList list = new PointPairList();
for (i = 0; i < Values.Length; i++)
{
list.Add(i, Values[i]);
}
if (i > MaxXAxis)
MaxXAxis = i;
SList.Add(list);
SListColor.Add(Color.Black);
}
SListName.Add(LegendName);
}
public void ShowDiagram(string Title, string XAxisName, string YAxisName,
int Timeout_ms)
{
ZedGraph.ZedGraphControl zgc = new ZedGraphControl();
GraphPane myPane = zgc.GraphPane;
LineItem myCurve = null;
// Set the titles and axis labels
myPane.Title.Text = Title;
myPane.XAxis.Title.Text = XAxisName;
myPane.YAxis.Title.Text = YAxisName;
for (int i = 0; i < SList.Count(); i++)
{
myCurve = myPane.AddCurve(SListName[i], SList[i], SListColor[i],
SymbolType.None);
myCurve.Line.Width = 2;
}
// Add gridlines to the plot, and make them gray
myPane.XAxis.MinorGrid.IsVisible = true;
myPane.YAxis.MinorGrid.IsVisible = true;
myPane.XAxis.MinorGrid.Color = Color.LightGray;
myPane.YAxis.MinorGrid.Color = Color.LightGray;
myPane.XAxis.MinorGrid.DashOff = 0;
myPane.YAxis.MinorGrid.DashOff = 0;
myPane.XAxis.MajorGrid.IsVisible = true;
myPane.YAxis.MajorGrid.IsVisible = true;
myPane.XAxis.MajorGrid.Color = Color.Gray;
myPane.YAxis.MajorGrid.Color = Color.Gray;
myPane.XAxis.MajorGrid.DashOff = 0;
myPane.YAxis.MajorGrid.DashOff = 0;
// Move Legend to bottom
myPane.Legend.Position = LegendPos.Bottom;
zgc.AxisChange();
myPane.XAxis.Scale.Max = MaxXAxis;
zgc.Location = new Point(0, 0);
zgc.Size = new Size(panel_diagramm.ClientRectangle.Width, panel_diagramm.ClientRectangle.Height);
panel_diagramm.Controls.Add(zgc);
}
How can i change the above two functions that they display the frequency in the x-axis?
I already tried to change the AddGraph-function to pass the needed parameters and to calculate the list to have the correct values. But what then...?
public void AddGraph_Frequency(int **Points**, double **StartFrequency**,
double **StopFrequency**, double[] Values, string GraphColor, string LegendName)
{
...
double frequency = StartFrequency; //der erste Punkt
double Intervall = (StopFrequency - StartFrequency) / Points;
for (i = 0; i < Points; i++)
{
list.Add(frequency, Values[i]);
frequency = frequency + Intervall;
}
....
}
Thanks for any help
best regards
Solved.
Missing was:
myPane.XAxis.Scale.Max = Stopfrequency;
myPane.XAxis.Scale.Min = Startfrequency;
The output of my graph is really small, I can't really see the values at the x and y axis. Is there a way to change this, so the graph is bigger?
My code to output the graph is:
ZedGraphControl zc = new ZedGraphControl();
GraphPane pane = zc.GraphPane;
PointPairList list1 = new PointPairList();
LineItem curve1;
pane.Title.Text = title;
pane.XAxis.Title.Text = xAxisTitle;
pane.XAxis.Scale.Min = 0;
pane.XAxis.Scale.Max = 11;
pane.YAxis.Scale.Min = 1;
pane.YAxis.Scale.Max = 12;
pane.YAxis.Title.Text = yAXisTitle;
Int32 totalCount = ds.Tables[objectName].Rows.Count;
double[] xVals = new double[totalCount], yVals = new double[totalCount];
for (int i = 0; i < totalCount; i++)
{
xVals[i] = Convert.ToDouble(ds.Tables[objectName].Rows[i]["ntotal"]);
yVals[i] = Convert.ToDouble(ds.Tables[objectName].Rows[i]["isomonth"]);
}
list1.Add(xVals, yVals);
curve1 = pane.AddCurve("Temp curve", list1, Color.Green, SymbolType.Circle);
for (int i = 0; i < totalCount; i++)
{
TextObj t = new TextObj("Teest", curve1.Points[i].Y, curve1.Points[i].X);
t.FontSpec.Border.IsVisible = false;
pane.GraphObjList.Add(t);
}
curve1.Line.Width = 1.0F;
pane.GetImage().Save(outPutDestination, ImageFormat.Png);
pane.AxisChange();
GetImage() function gets the current size of the pane, so we just have to increase the size of the entire pane(i.e: dock & maximize the window & then use the method to get the image).
DockStyle currentStyle = zedGraphControl1.Dock;
var currentWindowState = this.WindowState;
zedGraphControl1.Dock = DockStyle.Fill;
this.WindowState = FormWindowState.Maximized;
zedGraphControl1.GetImage ().Save ( #"c:\Image_1.png" );
this.WindowState = currentWindowState;
zedGraphControl1.Dock = currentStyle;