Been stumped on this for a little bit.
I found some other help on zoomToIndexes, but I cant get the zoomToDates to work on my page.
Live page is
b2 resource urq sales
Im trying to set the initial view to show from 2000 to current.. I want to slap some original sales data from early 80's in the graph, but dont want the graph to initially show the last 30+ years..
Any help would be MUCH appreciated!
zoomToDates takes real JavaScript Date objects as parameters:
chart.zoomToDates(new Date(2005, 0, 1), new Date(2015, 11, 31));
You can use chart's rendered event to "pre-zoom" on load as well:
var chart = AmCharts.makeChart("chartdiv", {
// your chart config
// ...
});
chart.addListener("rendered", function(event) {
event.chart.zoomToDates(new Date(2005, 0, 1), new Date(2015, 11, 31));
});
Note, that months in Date() constructor parameter (second parameter) are zero-based. Meaning January is 0, February - 1, etc.
You should use valueAxis property of chart object for zoomToValues. I hope this might help you.
var chart= AmCharts.makeChart("chartdiv", {
"type": "gantt",
"theme": "black",
...
});
zoomChart();
chart.addListener("dataUpdated", zoomChart);
function zoomChart(event) {
chart.valueAxis.zoomToValues(new Date(2017, 2, 10), new Date(2017,2,12));
// or ==> event.chart.valueAxis.zoomToValues(new Date(2017, 2, 10), new Date(2017,2,12));
}
This worked for me.:
var chart = AmCharts.makeChart('chartdiv', {
type: 'serial',
...
});
chart.addListener('dataUpdated', zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToDates(new Date(2018, 2, 26), new Date(2018, 2, 28));
}
Note: The months parameter in Date() constructor are zero-based. January is 0, February is 1 and etc.
Related
First, I'm somewhat new to Mapbox. I've made some fun things work ok, but that doesn't mean I'm doing things the correct/best way. Always happy to learn how to do things better.
I'm trying to set up a page that loads a 3D model and gives you on-screen controls to manipulate the 3D model after it loads.
I've gotten x/y/z movement and rotation to work ok but scale isn't working correctly. I've tried a few different ways (detailed below) and scale just doesn't change.
I started with the standard Mapbox 3D model code example here:
https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/
And I'm using jcastro76's threebox fork from here:
https://github.com/jscastro76/threebox/
Note: Regardless of what the initial model var options scale is set to, the console.log/.dir shows 0.0262049 but changing that initial scale does affect the initial size of the model. That makes me think I'm reading the wrong scale, but none of the scale setting attempts visibly changed the model's scale either. And doing a console.dir(defaultModel) and looking through the properties, everything that looks scale related is also always set to 0.0262049 including matrix.elements 0/5/10, scale x/y/z,
Any thoughts/comments? Thanks in advance!
Code I'm using....
Adding the 3D object:
map.addLayer({
id: 'custom_layer',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, mbxContext) {
window.tb = new Threebox(
map,
mbxContext,
{
defaultLights: true,
enableSelectingObjects: true,
enableDraggingObjects: true,
enableRotatingObjects: true
}
);
var options = {
obj: 'model.glb',
type: 'gltf',
scale: 1, // I get 0.0262049 later regardless of what this is set to. Models with different initial scale set here work correctly, but still can't change it later
units: 'meters',
rotation: { x: 90, y: 0, z: 0 },
anchor: 'center'
}
tb.loadObj(options, function (model) {
defaultModel = model.setCoords(origin);
defaultModel.addEventListener('ObjectDragged', onDraggedObject, false);
tb.add(defaultModel);
})
},
render: function (gl, matrix) {
tb.update();
}
});
// Attempt #1, scale.set
scale = defaultModel.scale;
console.log('Original scale:');
console.dir(scale);
x: 0.0262049
y: 0.0262049
z: 0.0262049
defaultModel.scale.set(1, 1, 1);
scale = defaultModel.scale;
console.log('New scale:');
console.dir(scale);
x: 0.0262049
y: 0.0262049
z: 0.0262049
I also tried all of these with the same before/after results:
defaultModel.matrix.makeScale(1, 1, 1);
defaultModel.setScale(1);
defaultModel.scale.x = 1;
defaultModel.scale.y = 1;
defaultModel.scale.z = 1;
defaultModel.matrix.scale(1);
defaultModel.matrix.scale(1, 1, 1);
I saw reference to using a THREE.Vector3 object so I tried this, with the same results:
var threeV3 = new THREE.Vector3(
1,
1, // also tried -1 on some
1
);
defaultModel.scale.set(threeV3);
defaultModel.matrix.makeScale(threeV3);
defaultModel.setScale(threeV3);
defaultModel.matrix.scale(threeV3);
Need help for creating dynamic charts in a power point by using Aspose slides.
#Mohini,
I have observed your requirements and like to share that Aspose.Slides offers you to create MSO charts programmatically. I suggest you to please try using following sample code to create a Clustered Column chart.
// Instantiate Presentation class that represents PPTX file
Presentation pres = new Presentation();
// Access first slide
ISlide sld = pres.Slides[0];
// Add chart with default data
IChart chart = sld.Shapes.AddChart(ChartType.ClusteredColumn, 0, 0, 500, 500);
// Setting chart Title
// Chart.ChartTitle.TextFrameForOverriding.Text = "Sample Title";
chart.ChartTitle.AddTextFrameForOverriding("Sample Title");
chart.ChartTitle.TextFrameForOverriding.TextFrameFormat.CenterText = NullableBool.True;
chart.ChartTitle.Height = 20;
chart.HasTitle = true;
// Set first series to Show Values
chart.ChartData.Series[0].Labels.DefaultDataLabelFormat.ShowValue = true;
// Setting the index of chart data sheet
int defaultWorksheetIndex = 0;
// Getting the chart data worksheet
IChartDataWorkbook fact = chart.ChartData.ChartDataWorkbook;
// Delete default generated series and categories
chart.ChartData.Series.Clear();
chart.ChartData.Categories.Clear();
int s = chart.ChartData.Series.Count;
s = chart.ChartData.Categories.Count;
// Adding new series
chart.ChartData.Series.Add(fact.GetCell(defaultWorksheetIndex, 0, 1, "Series 1"), chart.Type);
chart.ChartData.Series.Add(fact.GetCell(defaultWorksheetIndex, 0, 2, "Series 2"), chart.Type);
// Adding new categories
chart.ChartData.Categories.Add(fact.GetCell(defaultWorksheetIndex, 1, 0, "Caetegoty 1"));
chart.ChartData.Categories.Add(fact.GetCell(defaultWorksheetIndex, 2, 0, "Caetegoty 2"));
chart.ChartData.Categories.Add(fact.GetCell(defaultWorksheetIndex, 3, 0, "Caetegoty 3"));
// Take first chart series
IChartSeries series = chart.ChartData.Series[0];
// Now populating series data
series.DataPoints.AddDataPointForBarSeries(fact.GetCell(defaultWorksheetIndex, 1, 1, 20));
series.DataPoints.AddDataPointForBarSeries(fact.GetCell(defaultWorksheetIndex, 2, 1, 50));
series.DataPoints.AddDataPointForBarSeries(fact.GetCell(defaultWorksheetIndex, 3, 1, 30));
// Setting fill color for series
series.Format.Fill.FillType = FillType.Solid;
series.Format.Fill.SolidFillColor.Color = Color.Red;
// Take second chart series
series = chart.ChartData.Series[1];
// Now populating series data
series.DataPoints.AddDataPointForBarSeries(fact.GetCell(defaultWorksheetIndex, 1, 2, 30));
series.DataPoints.AddDataPointForBarSeries(fact.GetCell(defaultWorksheetIndex, 2, 2, 10));
series.DataPoints.AddDataPointForBarSeries(fact.GetCell(defaultWorksheetIndex, 3, 2, 60));
// Setting fill color for series
series.Format.Fill.FillType = FillType.Solid;
series.Format.Fill.SolidFillColor.Color = Color.Green;
// First label will be show Category name
IDataLabel lbl = series.DataPoints[0].Label;
lbl.DataLabelFormat.ShowCategoryName = true;
lbl = series.DataPoints[1].Label;
lbl.DataLabelFormat.ShowSeriesName = true;
// Show value for third label
lbl = series.DataPoints[2].Label;
lbl.DataLabelFormat.ShowValue = true;
lbl.DataLabelFormat.ShowSeriesName = true;
lbl.DataLabelFormat.Separator = "/";
// Save presentation with chart
pres.Save(dataDir + "AsposeChart_out.pptx", SaveFormat.Pptx);
I am working as Support developer/ Evangelist at Aspose.
Many Thanks,
Kendo UI datepicker - month change event
I searched for this here & on Telerik forum too but don't have the solution for this.
Here, I want to mark few dates from month and I did it on OPEN event like below-
$.each(dates, function (index, date) {
var reformattedDate = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();
$('#datepickerId_dateview a.k-link[data-value="' + reformattedDate + '"]').parent().addClass("date-marking-class");
});
So, I am looping though all my dates and comparing it with data-value of datepicker calendar. On match found, I am applying class to mark that date.
It's working absolutely fine on datepicker OPEN event but whenever I change month, it's not marking the date at all.
So i want an event which will trigger on month change, so that I can execute that 2 lines of code to mark the dates on new month.
There does not appear to be anything documented to do this, but after looking at the DatePicker source code you can accomplish it.
The underlying Calendar widget has a navigate event that does what you want(http://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#events-navigate). The problem is getting a reference to the Calendar used by the DatePicker.
I was able to do it like this:
$(document).ready(function() {
// create DatePicker from input HTML element
var datePicker = $("#datepicker").kendoDatePicker().getKendoDatePicker();
var dateView = datePicker.dateView;
// Force calendar to initialize so we can bind to its events...otherwise, it does not exist until it is opened for the first time.
dateView._calendar();
var calendar = dateView.calendar;
calendar.bind("navigate", function () {
console.log("Do your thing here");
});
});
The DatePicker has a DateView which has a Calendar...but the Calendar doesn't exist until the DateView is opened for the first time. But once that happens, you can attach to its navigate event.
I force the Calendar to exist without an open event by calling the "private" _calendar() method that the DateView internally calls on first open...and now you can handle its navigate.
Demo: http://dojo.telerik.com/#Stephen/ekUwE
You can use the month template of the widget:
$("#date").kendoDatePicker({
month: {
content: $("#date-template").html()
}
});
It renders a template for each day if the widget is set to Month view. There you can wrap the day number with a span with the desired class.
And the template could be something like:
#
var month = data.date.getMonth() + 1;
dates = months[month],
found = false,
result = data.value;
if (dates && dates.length > 0) {
for (var i = 0, len = dates.length; i < len; i++) {
var date = dates[i],
dateSplit = data.dateString.split("/");
if (date.getDate() == dateSplit[2] &&
date.getMonth() == dateSplit[1] &&
date.getFullYear() == dateSplit[0])
{
result = "<span class='date-marking-class'>" + data.value + "</span>";
break;
}
}
}
#
#=result#
Being months an object like this:
// All months are contains an array with date objects(in this case, days 10 and 20 for each one)
var months = {
"1": [new Date(2017, 0, 10), new Date(2017, 0, 20)],
"2": [new Date(2017, 1, 10), new Date(2017, 1, 20)],
"3": [new Date(2017, 2, 10), new Date(2017, 2, 20)],
"4": [new Date(2017, 3, 10), new Date(2017, 3, 20)],
"5": [new Date(2017, 4, 10), new Date(2017, 4, 20)],
"6": [new Date(2017, 5, 10), new Date(2017, 5, 20)],
"7": [new Date(2017, 6, 10), new Date(2017, 6, 20)],
"8": [new Date(2017, 7, 10), new Date(2017, 7, 20)],
"9": [new Date(2017, 8, 10), new Date(2017, 8, 20)],
"10": [new Date(2017, 9, 10), new Date(2017, 9, 20)],
"11": [new Date(2017, 10, 10), new Date(2017, 10, 20)],
"12": [new Date(2017, 11, 10), new Date(2017, 11, 20)]
};
Or anyway you want it - that was just a suggestion - since you change the line dates = months[month] to something that gives you an array of dates.
Demo
This is a continuation of an earlier thread, that was answered by Neil- thanks Neil! I probably should have included this in the first question, but I wanted to simplify things...
Another feature that I need is to have a "dialogue box" that holds a title and some text that animates on and off next to the circle when it comes on. I achieved this in my earlier version prior to the help from Neil. I have spent some time trying to integrate it into the new and improved code and get some unexpected results. For example, if I rollover the first circle on the right, it works as it should, however, if I try to rollover the middle and right circles, they don't work. Oddly, if I refresh and start on the right circle, each will work when moving right to left, until I reach the left one, and then the middle and right don't work- but the left one continues to work. Additionally, if I click on the left circle, it works as it should, but then the others don't work. And conversely, if I click on the right one first, and then move to the middle, the middle works on click, but then the right one does not.
The behavior that I am looking for is that each circle, animate up with the rectangle next to the circle fading in with dynamic text on mouseover and animate down, with the rectangle with text fading out on mouseout. The rectangle with text should fade out on click and not fade up again if the user mousesover the clicked circle (need to remove the mouseover event as well I guess). One additional thing that needs to happen is that the rectangle needs to appear in a different place on the circle, depending where on the map it is- so that it doesn't fall off the map. I did this successfully in the earlier version, but have left that out on the previous post for better clarity. I will include it here so you get the gist of what I'm doing.
My guess is that I need to create a set() of the rectangle/text component and place it in an another set() along with the circle?
Any help on this is truly appreciated! Thanks
// JavaScript Document
var arr = [
[50, 50, "this", "Is text that is to be the abstract"],
[100, 50, "that", "Is text that I hope is here"],
[150, 50, "another thing", "Even more text"]
];
var currRect;
var currTitleTxt;
var currTeaseTxt;
var prevItem;
doMe();
function doMe() {
var paper = new Raphael(document.getElementById('canvas_container'), 696, 348);
for (var i = 0; i < arr.length; i++) {
paper.circle(arr[i][0], arr[i][1], 6).attr({
fill: '#fff',
'fill-opacity': 0.5
}).data("i", [arr[i][0], arr[i][1], arr[i][2], arr[i][3]]).click(function () {
this.unmouseout();
}).click(function () {
if (this.data('selected') != 'true') {
if (prevItem != null) {
prevItem.data('selected', '');
handleOutState(prevItem);
}
prevItem = this.data('selected', 'true');
currRect.animate({"fill-opacity":0, "stroke-opacity":0}, 150 );
currTitleTxt.animate({"fill-opacity":0}, 150 );
currTeaseTxt.animate({"fill-opacity":0}, 150 );
}
}).mouseover(function () {
handleOverState(this);
if(this.data("i")[0] <= 350){ //this is where I test for the position on the map
paper.setStart(); //create rectangle and text set
currRect =paper.rect(17, -20, 265,90).attr({fill:"#999","fill-opacity":0.5});
currTitleTxt = paper.text(25, -8, this.data("i")[2]).attr({"text-anchor":"start",fill:'#ffffff',"font-size": 14, "font-weight":"bold","fill-opacity":0});
currTeaseTxt = paper.text(25, 30).attr({"text-anchor":"start",fill:'#eeeeee',"font-size": 11, "font-weight":"bold","fill-opacity":0});
var maxWidth = 250;
var content = this.data("i")[3];
var words = content.split(" ");
var tempText = ""; //since Raphael doesn't have native word wrap, I break the line manually
for (var i=0; i<words.length; i++) {
currTeaseTxt.attr("text", tempText + " " + words[i]);
if (currTeaseTxt.getBBox().width > maxWidth) {
tempText += "\n" + words[i];
} else {
tempText += " " + words[i];
}
}
currTeaseTxt.attr("text", tempText.substring(1));
var st = paper.setFinish();
st.translate(this.data("i")[0]+10, this.data("i")[1]+0).animate({"fill-opacity":1}, 150 );
}else if(this.data("i")[0] >= 351){ //this is where I test for the position on the map
paper.setStart();
currRect = paper.rect(-280, -20, 250,50).attr({fill:"#999","fill-opacity":0.5});
currTitleTxt = paper.text(-270, -10, this.data("i")[2]).attr({"text-anchor":"start",fill:'#ffffff',"font-size": 14, "font-weight":"bold","fill-opacity":0});
currTeaseTxt =paper.text(-270, 5, this.data("i")[3]).attr({"text-anchor":"start",fill:'#cccccc',"font-size": 12, "font-weight":"bold","fill-opacity":0});
var st = paper.setFinish();
st.translate(this.data("i")[0]+10, this.data("i")[1]+0).animate({"fill-opacity":1}, 150 );
}
}).mouseout(function () {
currRect.animate({"fill-opacity":0, "stroke-opacity":0}, 150 );
currTitleTxt.animate({"fill-opacity":0}, 150 );
currTeaseTxt.animate({"fill-opacity":0}, 150 );
if (this.data('selected') != 'true') handleOutState(this);
});
}
function handleOverState(el) {
el.animate({
r: 8
}, 250).animate({
"fill-opacity": 1
}, 150);
}
function handleOutState(el) {
el.animate({
r: 6
}, 250).animate({
"fill-opacity": 0.5
}, 150);
}
}
I am using the ASP.NET MVC 3.0 Chart Helper.
Fore some reason colors scheme (e.g Rainfall) applied only for Pie and Doughnut charts and not for any another types (Bar, Column etc).
The bars/columns on all another charts has all the same color. How to fix that?
Here is my chart:
chart = new System.Web.Helpers.Chart(width: 100, height: 200)
.AddSeries(
chartType: Bar,
legend: Rainfall
xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
yValues: new[] { "20", "20", "40", "10", "10" });
}
Also i was trying to use all schemes from System.Web.Helpers public static class ChartTheme, none of these helped
I found something that works ... its not great but it works
using the old Charting
using System.Web.UI.DataVisualization.Charting;
public ActionResult GetRainfallChart()
{
Chart chart = new Chart();
chart.BackColor = Color.Transparent;
chart.Width = Unit.Pixel(1400);
chart.Height = Unit.Pixel(750);
Series series1 = new Series("Series1");
series1.ChartArea = "ca1";
series1.ChartType = SeriesChartType.Bar;
series1.Font = new System.Drawing.Font("Verdana", 11f, FontStyle.Regular);
series1.Points.Add(new DataPoint
{
AxisLabel = "A",
YValues = new double[] { 100 },
Color = Color.Green,
});
series1.Points.Add(new DataPoint
{
AxisLabel = "B",
YValues = new double[] { 324 },
Color = Color.Red,
});
series1.Points.Add(new DataPoint
{
AxisLabel = "C",
YValues = new double[] { 235 },
Color = Color.Yellow,
});
chart.Series.Add(series1);
ChartArea ca1 = new ChartArea("ca1");
ca1.BackColor = Color.Transparent;
chart.ChartAreas.Add(ca1);
var ms = new MemoryStream();
chart.SaveImage(ms, ChartImageFormat.Png);
ms.Seek(0, SeekOrigin.Begin);
return new FileStreamResult(ms, "image/png");
}
Yes he is correct. One more information
Chart Helper in System.Web.Helpers internally use 'using DV = System.Web.UI.DataVisualization.Charting;' ASP.Net chart control only but wrapped with limited access.
Its better you can use ASP.Net chart if you need more functions
Maybe you found the answer a long time ago but given the fact that I found very little on this topic when searching for a way to colorize the bars of a chart I thought it might be useful to post the solution here when it opened up to me.
It seems that the implementation of System.Web.Helpers.Chart is closely related to System.Web.UI.DataVisualization.Charting.Chart. Given this, I managed to find some clues as to how I could configure the "theme" XML properties:
public const String CHARTS_THEME = #"<Chart BackColor=""#EFEFEF"" BackGradientStyle=""TopBottom"" BorderColor=""#A0A0A0"" BorderWidth=""1"" Palette=""None"" PaletteCustomColors=""#ffcc00"" >
<ChartAreas>
<ChartArea Name=""Default"" _Template_=""All"" BackColor=""Transparent"" BackSecondaryColor=""White"" BorderWidth=""1"" BorderColor=""#A0A0A0"" BorderDashStyle=""Solid"" >
<AxisY>
<MajorGrid Interval=""Auto"" LineColor=""64, 64, 64, 64"" />
<LabelStyle Font=""Verdana, 10pt"" />
</AxisY>
<AxisX LineColor=""#000000"">
<MajorGrid Interval=""Auto"" LineColor=""64, 64, 64, 64"" />
<LabelStyle Font=""Verdana, 10pt"" />
</AxisX>
</ChartArea>
</ChartAreas>
<Legends>
<Legend _Template_=""All"" BackColor=""Transparent"" Docking=""Bottom"" Font=""Verdana, 10pt, style=Plain"" LegendStyle=""Row"">
</Legend>
</Legends>
</Chart>";
Key to this point is to define your own PaletteCustomColors (I have only one color). To make this work, the Palette property must be set to None.
Finally, just use your theme when creating an instance of your chart:
Chart chart = new Chart(width: 600, height: 200, theme:CHARTS_THEME);
Also check out the msdn documentation of System.Web.UI.DataVisualization.Charting.Chart to discover other ways to style your chart:
http://msdn.microsoft.com/en-us/library/dd467201.aspx