I just discovered the DotNetHighCharts dll to make charts:
http://dotnethighcharts.codeplex.com/
I added the dll to my project and put a sample code to get a pie in my Page_Load event ( i'm not working with MVC right now, so i just took what was in the controller of the demo )
protected void Page_Load(object sender, EventArgs e)
{
Highcharts chart = new Highcharts("chart")
.InitChart(new Chart { PlotShadow = false })
.SetTitle(new Title { Text = "Browser market shares at a specific website, 2010" })
.SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
.SetPlotOptions(new PlotOptions
{
Pie = new PlotOptionsPie
{
AllowPointSelect = true,
Cursor = Cursors.Pointer,
DataLabels = new PlotOptionsPieDataLabels
{
Color = ColorTranslator.FromHtml("#000000"),
ConnectorColor = ColorTranslator.FromHtml("#000000"),
Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
}
}
})
.SetSeries(new Series
{
Type = ChartTypes.Pie,
Name = "Browser share",
Data = new Data(new object[]
{
new object[] { "Firefox", 45.0 },
new object[] { "IE", 26.8 },
new DotNet.Highcharts.Options.Point
{
Name = "Chrome",
Y = 12.8,
Sliced = true,
Selected = true
},
new object[] { "Safari", 8.5 },
new object[] { "Opera", 6.2 },
new object[] { "Others", 0.7 }
})
});
}
}
}
the problem is that northing appears in my page with this
Is there anything to add ?
Thanks in advance
I'm not familiar with the library but all this code appears to be doing is creating an object in the code behind. You will need to do something to cause this to render in to the page.
Looking at their example code behind code there is a line
ltrChart.Text = chart.ToHtmlString();
This is the bit you are missing. You need to call ToHtmlString() on your chart object and assign this string to a literal or placeholder in the page.
To create the literal just add this code somewhere on the page....
<asp:Literal ID="ltrChart" runat="server"></asp:Literal>
...and your chart should appear there.
Based on their example you need to send the HTML to the client side with the line
Response.Write(result);
It works to me, though it prints it at the top of the screen and I wish I could set the position for it.
Related
I wrote the following code to disable the series animation :
Animation = new Animation{Enabled = false},
But after runing my application , the problem still persists.
My code to display the treemap is as follows:
#{ var chartOptions =
new Highcharts
{
Title = new Title
{
Text = ""
},
Credits = new Credits
{
Enabled = false
},
Series = new List<Series>
{
new TreemapSeries
{
Animation = new Animation{Enabled = false},
LayoutAlgorithm = TreemapSeriesLayoutAlgorithm.Squarified,
AlternateStartingDirection = true,
Levels = new List<TreemapSeriesLevels>
{
new TreemapSeriesLevels
{
Level = 1,
LayoutAlgorithm = TreemapSeriesLevelsLayoutAlgorithm.Squarified,
DataLabels = new TreemapSeriesDataLabels()
{
Enabled = true,
Align = TreemapSeriesDataLabelsAlign.Left,
VerticalAlign = TreemapSeriesDataLabelsVerticalAlign.Top
}
}
},
Data = #ViewBag.resultGreen
,
}
}
};
chartOptions.ID = "chart";
chartOptions.PlotOptions.Series.Animation.Enabled = false;
var renderer = new HighchartsRenderer(chartOptions);
}
#Html.Raw(renderer.RenderHtml())
How can i solve this problems?
I tried to solve this problem by the link below:
How to disable animations on Highcharts Dotnet C# MVC?
The provided answer in the mentioned thread looks to be related to DotNet.Highcharts. If you use the official Highcharts .NET wrapper use the AnimationBool option:
new TreemapSeries
{
AnimationBool = false,
...
}
API Reference:
https://dotnet.highcharts.com/Help/Highcharts/html/class_highsoft_1_1_web_1_1_mvc_1_1_charts_1_1_treemap_series.html#a3b53a65560c6917e7ee52e1779335b2e
This question is an extension of my previous question.
(How can I put "AdaptiveActionSet" in "AdaptiveColumn"?)
At the time, I didn't know much about the customization of adaptive cards and the WebChat.html file.
The image above is the layout of the adaptive card I want.
The Reserve button on the right is Action.OpenUrl button.
To place a button like that, I need to put an ActionSet in a Column. However, typical Adaptive Cards do not show ActionSet in Column as in the image above.
The content type is shown below.
ContentType = "application/vnd.microsoft.card.adaptive"
(In web chat)
To solve this, I have to customize Adaptive Cards, but I'm not sure how.
(Ashamed,
I referred to the link below but still I can't customize the card.
Bot Connector service is not using latest Adaptive Cards #87
Can you show me a way to solve this or show a simple customized card example? Please.
Below is the code I wrote.
My Adaptive Cards Code :
card.Body.Add(new AdaptiveColumnSet()
{
Columns = new List<AdaptiveColumn>()
{
new AdaptiveColumn()
{
//(~Date, No problem)
},
new AdaptiveColumn()
{
//(~Price, No problem)
},
new AdaptiveColumn()
{
Items =
{
new AdaptiveActionSet()
{
Actions =
{
new AdaptiveOpenUrlAction()
{
Url = new Uri("https://www.SomeUrl.com"),
Title = "Reserve",
Style = "positive",
}
}
}
},
Width = "auto",
}
},
});
var reply = turnContext.Activity.CreateReply();
reply.Attachments = new List<Attachment>
{
new Attachment()
{
ContentType = "application/vnd.microsoft.card.custom",
Content = card
}
};
My webChat.html :
const attachmentMiddleware = () => next => card => {
if (card.attachment.contentype === 'application/vnd.microsoft.card.custom'){
card.attachment.contentType = 'application/vnd.microsoft.card.adaptive'
}
return next(card)
};
window.WebChat.renderWebChat({
directLine: botConnection,
styleOptions,
adaptiveCardHostConfig,
attachmentMiddleware
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
As above, ContentType = "application/vnd.microsoft.card.custom"
If I assign custom to contentType,
I get an error called No renderer.
Using AdaptiveColumn's SelectAction solved the problem.
And it by using AdaptiveTextBlock and SelectAction together and specifying Width.
ex)
Items =
{
new AdaptiveTextBlock()
{
HorizontalAlignment = AdaptiveHorizontalAlignment.Center,
Color = AdaptiveTextColor.Light,
Text = "Reserve",
Weight = AdaptiveTextWeight.Bolder,
}
},
SelectAction = new AdaptiveOpenUrlAction()
{
Url = new Uri($"{someurl}"),
Title = "rsv",
Id = "bb" + cnt,
},
Width = "50px"
I'm using asp.net for generating pdf file. In pdf i must show plot. I decided using oxyplot with exporting it in png and inserting in pdf. The documentation says using PlotModel, filling it with series and axes and simply export by using PngExporting object. But when I'm trying generate it, nothing is presented except the axes.
The code I'm using:
var _plotModel = new OxyPlot.PlotModel()
{
PlotAreaBorderColor = OxyPlot.OxyColors.Transparent,
LegendBorder = OxyPlot.OxyColors.Transparent,
TitleToolTip = "Temperature",
Culture = new System.Globalization.CultureInfo("ru-Ru"),
Series =
{
new OxyPlot.Series.LineSeries()
{
ItemsSource = new List<SimplePointModel>
{
new SimplePointModel { Date = DateTime.Now, Temperature = 36.6f },
new SimplePointModel { Date = DateTime.Now.AddDays(1), Temperature = 42.6f },
new SimplePointModel { Date = DateTime.Now.AddDays(2), Temperature = 48.6f },
},
MarkerFill = OxyPlot.OxyColor.Parse("#A9CF9C"),
MarkerType = OxyPlot.MarkerType.Circle,
MarkerSize = item.ListSegments[0].Count() == 1 ? 2 : 1,
DataFieldX = "Date",
DataFieldY = "Temperature",
XAxisKey = "Date",
YAxisKey = "Temperature",
Color = OxyPlot.OxyColor.Parse("#A9CF9C"),
}
},
Axes =
{
new OxyPlot.Axes.DateTimeAxis()
{
Position = OxyPlot.Axes.AxisPosition.Bottom,
Key = "Date",
ToolTip = "Temperature",
AbsoluteMinimum = OxyPlot.Axes.Axis.ToDouble(DateTime.Now.Date),
AbsoluteMaximum = OxyPlot.Axes.Axis.ToDouble(DateTime.Now.AddDays(10000))
},
new OxyPlot.Axes.LinearAxis()
{
Position = OxyPlot.Axes.AxisPosition.Left,
Key = "Temperature",
ToolTip = "Temperature",
IsZoomEnabled = false,
IsPanEnabled = false,
}
}
};
using (var stream = System.IO.File.Create(Path.Combine(folder, "temp.png")))
{
PngExporter.Export(_plotModel, stream, 800, 400, OxyPlot.OxyColors.Transparent);
}
What can I do?
I found solution: we must load data to Points list parameter in Series object instead of ItemSource parameter. ItemSource parameter used in mobile version of library.
var Javascriptxvalue= $.parseJSON($("#hdnXaxis").val());
var Javascriptyvalue= $.parseJSON($("#hdnYaxis").val());
$(document).ready(DrawMyGraph1);
function DrawMyGraph1() {
chart = new Highcharts.Chart(
{
chart: {
type: 'column',
renderTo: 'container3',
defaultSeriesType: 'area'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: Javascriptxvalue,
labels: {
enabled: false
}
},
yAxis: {
title: {
text: 'No of Patients'
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return this.series.name + ' - ' + Highcharts.numberFormat(this.y, 0);
}
},
series: Javascriptyvalue
});
}
c# code
void FastMovingStocksBarChart(string date1, string date2, string selperiod, string sql)
{
DataSet dschart = new DataSet();
dschart = _obj_MIS.DoctorpatientreportChart(date1, date2, selperiod,sql);
List lstXaxis = new List();
List lstcolors = new List();
lstcolors.Add("#3366DD");
//lstcolors.Add("#FFEE22");
//lstcolors.Add("#33BBCC");
lstcolors.Add("#CC0022");
//lstcolors.Add("#FF0000");
lstcolors.Add("#339900");
lstcolors.Add("#FF7700");
lstcolors.Add("#33BBCC");
lstcolors.Add("#99EEEE");
lstcolors.Add("#6699FF");
lstcolors.Add("#9966BB");
lstcolors.Add("#99BB66");
lstcolors.Add("#FF7700");
lstcolors.Add("#FFEE22");
lstcolors.Add("#FFCBB9");
lstcolors.Add("EAEC93");
lstcolors.Add("D7FBE6");
lstcolors.Add("FFCACA");
for (int i = 0; i < dschart.Tables[0].Rows.Count; i++)
{
lstXaxis.Add(dschart.Tables[0].Rows[i]["Doctor Name"].ToString());
}
List<ChartEx> lstseries = new List<ChartEx>();
int count = 0;
for (int i = 0; i < dschart.Tables[0].Rows.Count; i++)
{
ChartEx oEx = new ChartEx();
oEx.name = dschart.Tables[0].Rows[i]["Doctor Name"].ToString();
//oEx.data.Add(Convert.ToInt32(dschart.Tables[0].Rows[i]["Patients"]));
oEx.data = new List<int>() { Convert.ToInt32(dschart.Tables[0].Rows[i]["Patients"]) };
oEx.color = lstcolors[count];
lstseries.Add(oEx);
count++;
if (count >= lstcolors.Count)
count = 0;
}
//Convert X axis data to JSON
JavaScriptSerializer oSerializer1 = new JavaScriptSerializer();
hdnXaxis.Value = oSerializer1.Serialize(lstXaxis);
//Convert Y axis data to JSON
JavaScriptSerializer oSerializer2 = new JavaScriptSerializer();
hdnYaxis.Value = oSerializer1.Serialize(lstseries);
}
I am not getting the values for "Javascriptxvalue" and "Javascriptyvalue" inside the chart function
can anyone help me
Regards
Prabhu
Presumably, 'hdnXaxis' is the id of a HiddenFieldControl server control? Perhaps the id is not what you think
var Javascriptxvalue= $.parseJSON($("#"+ <%= hdnXaxis.ClientId %>).val());
Instead of passing strings via an input, you could use server tags to directly inject the values into the page. Like this:
<%= "alert('" + MyPublicProperty + "')" %>
This should alert you to the value of the property defined in your code behind. You could then set it to a js variable like so:
<%= "var Javascriptxvalue = '" + xProperty + "';" %>
You will need to run this bit of code directly in an aspx/ascx/razor page to set the variables though, I think it's better than relying on a control with a particular id though.
I need to populate a pie with data which are the result of a query (LINQ To SQL)
The problem is i cannot manage to add a foreach inside this code to insert my data instead of the static Firefox,Chrome,IE ect ...
protected void Page_Load(object sender, EventArgs e)
{
//RepeaterVersionsForPie.DataSource = DAaccess.LibDataVersion.LibDataVersion.GetNumberOfCompaniesUsingEachVersions();
//RepeaterVersionsForPie.DataBind();
var test = DAaccess.LibDataVersion.LibDataVersion.GetNumberOfCompaniesUsingEachVersions();
Highcharts chart = new Highcharts("chart")
.InitChart(new Chart { PlotShadow = false })
.SetTitle(new Title { Text = "Browser market shares at a specific website, 2010" })
.SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
.SetPlotOptions(new PlotOptions
{
Pie = new PlotOptionsPie
{
AllowPointSelect = true,
Cursor = Cursors.Pointer,
DataLabels = new PlotOptionsPieDataLabels
{
Color = ColorTranslator.FromHtml("#000000"),
ConnectorColor = ColorTranslator.FromHtml("#000000"),
Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
},
Point = new PlotOptionsPiePoint
{
Events = new PlotOptionsPiePointEvents
{
Click = "function() { alert (this.category +': '+ this.y); }"
}
}
}
})
.SetSeries(new Series
{
Type = ChartTypes.Pie,
Name = "Browser share",
Data = new Data(new object[]
{
new object[] { "Firefox", 45.0 },
new object[] { "IE", 26.8 },
new DotNet.Highcharts.Options.Point
{
Name = "Chrome",
Y = 12.8,
Sliced = true,
Selected = true
},
new object[] { "Safari", 8.5 },
new object[] { "Opera", 6.2 },
new object[] { "Others", 0.7 }
})
});
ltrChart.Text = chart.ToHtmlString();
}
Actually , i need to be able to insert something like this:
foreach ( var item in test )
{
new object[] { item.name, item.count}
}
But VS doesn't allow me to do such thing
Thanks in advance for your help ...
You could create an extension method for whatever type DAaccess.LibDataVersion.LibDataVersion.GetNumberOfCompaniesUsingEachVersions() returns and have it return the results in the Pie-shaped Series format.
public static class DotNetHighChartsExtensions
{
public static object[] ToPieChartSeries(this WhateverThatTypeIs data)
{
var returnObject = new List<object>();
foreach ( var item in data )
{
returnObject.Add(new object[] { item.name, item.count});
}
return returnObject.ToArray();
}
}
Then in your code where you have your static code, you'd just replace it with:
Data = new Data(test.ToPieChartSeries())
Alternatively, you could have the ToPieChartSeries method return the Data object that is being sought for by the Series object.
While I haven't worked with this DotNet.HighCharts project, I have worked with and built my own HighCharts objects for a couple of MVC projects. On the face of it, it looks like this are ultimately doing the same thing I did: Create a .NET object that could be serialized as JSON and recognized by the HighCharts javascript library.
SetSeries(new Series {
Type = ChartTypes.Pie,
Data = new Data(test.Select(d => new { Name = d.name, Y = d.count }).ToArray())
})