HighChart New Update
HighChart New Updates in .Net Core
Currently there is some issue in HightChart it is not working properly when run old application it through an exception. I describe the error in following image.
Highchart is not a constructor
at createChartchart ((index):48:1524)
at HTMLDocument.<anonymous> ((index):48:198)
So I have found this issues in many website but I did not get any solution finally I got the solution.
so I have share code and suggestion about this issues please refer my Code.
-------------------------------------Home Controller---------------------------------------------
using HighChartDemoTest.Models;
using Highsoft.Web.Mvc.Charts;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
namespace HighChartDemoTest.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
public HomeController(ILogger<HomeController> logger)
{
_logger = logger;
}
public IActionResult Index()
{
List<double> tokyoValues = new List<double> { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 };
List<double> nyValues = new List<double> { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 };
List<double> berlinValues = new List<double> { 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1 };
List<double> londonValues = new List<double> { 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2 };
List<ColumnSeriesData> tokyoData = new List<ColumnSeriesData>();
List<ColumnSeriesData> nyData = new List<ColumnSeriesData>();
List<ColumnSeriesData> berlinData = new List<ColumnSeriesData>();
List<ColumnSeriesData> londonData = new List<ColumnSeriesData>();
tokyoValues.ForEach(p => tokyoData.Add(new ColumnSeriesData
{
Y = p
}));
nyValues.ForEach(p => nyData.Add(new ColumnSeriesData
{
Y = p
}));
berlinValues.ForEach(p => berlinData.Add(new ColumnSeriesData
{
Y = p
}));
londonValues.ForEach(p => londonData.Add(new ColumnSeriesData
{
Y = p
}));
ViewData["tokyoData"] = tokyoData;
ViewData["nyData"] = nyData;
ViewData["berlinData"] = berlinData;
ViewData["londonData"] = londonData;
return View();
}
public IActionResult Privacy()
{
return View();
}
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}
---------------------------------Views--------------------------------------------------------------
@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering;
@using System.Text;
@*<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>*@
@*<script src="https://code.highcharts.com/highcharts.js"></script>*@
@*<script src="https://code.highcharts.com/modules/exporting.js"></script>*@
<script src="~/js/highcharts.js"></script>
<script src="~/js/modules/exporting.js"></script>
<script src="~/js/modules/export-data.js"></script>
<script src="~/js/modules/accessibility.js"></script>
@{
Highcharts chartOptions = null;
}
<h3 style="text-align:center;">HighChart Demo </h3>
<div id="chart"></div>
@{
chartOptions = new Highsoft.Web.Mvc.Charts.Highcharts
{
Title = new Title
{
Text = "Monthly Average Rainfall"
},
Subtitle = new Subtitle
{
Text = "Source: WorldClimate.com"
},
XAxis = new List<XAxis> {
new XAxis {
Categories = new List <string> {"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"}
}
},
YAxis = new List<YAxis> {
new YAxis {
Min = 0,
Title = new YAxisTitle {
Text = "Rainfall (mm)"
}
}
},
Tooltip = new Tooltip
{
HeaderFormat = "<span style='font-size:10px'>{point.key}</span><table style='font-size:12px'>",
PointFormat = "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>{point.y:.1f} mm</b></td></tr>",
FooterFormat = "</table>",
Shared = true,
UseHTML = true
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
BorderWidth = 0
}
},
Series = new List<Series>
{
new ColumnSeries
{
Name="New York",
Data=new List<ColumnSeriesData>
{
new ColumnSeriesData { Name = "Microsoft Internet Explorer", Y = 56.3, Drilldown = "Microsoft Internet Explorer" },
new ColumnSeriesData { Name = "Chrome", Y = 24.03, Drilldown = "Chrome" },
new ColumnSeriesData { Name = "Firefox", Y = 10.3, Drilldown = "Firefox" },
new ColumnSeriesData { Name = "Sfari", Y = 4.77, Drilldown = "Safari" },
new ColumnSeriesData { Name = "Opera", Y = 0.91, Drilldown = "Opera" },
new ColumnSeriesData { Name = "Proprietary or Undetectable", Y = 0.2, Drilldown = null }
}
}
}
};
chartOptions.ID = "chart";
StringBuilder stringBuilder = new StringBuilder();
var renderer = new Highsoft.Web.Mvc.Charts.Rendering.HighchartsRenderer(chartOptions).RenderHtml();
(Note: these are the changes for displaying graph)
var mydata = renderer.Replace("new Highcharts.chart", "Highcharts.chart");
stringBuilder.Append(renderer);
}
@Html.Raw(mydata)
<!--Test-->
@*<script type="text/javascript">
$(document).ready(function () {
createChartchart();
});
function createChartchart() { var ChartOptions = { "chart": { "renderTo": "chart" }, "plotOptions": { "column": { "pointPadding": 0.2, "borderWidth": 0.0 } }, "xAxis": [{ "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }], "series": [{ "name": "New York", "data": [{ "name": "Microsoft Internet Explorer", "drilldown": "Microsoft Internet Explorer", "y": 56.3 }, { "name": "Chrome", "drilldown": "Chrome", "y": 24.03 }, { "name": "Firefox", "drilldown": "Firefox", "y": 10.3 }, { "name": "Sfari", "drilldown": "Safari", "y": 4.77 }, { "name": "Opera", "drilldown": "Opera", "y": 0.91 }, { "name": "Proprietary or Undetectable", "drilldown": null, "y": 0.2 }], "type": "column" }], "yAxis": [{ "title": { "text": "Rainfall (mm)" }, "min": 0.0 }], "subtitle": { "text": "Source: WorldClimate.com" }, "tooltip": { "useHTML": true, "pointFormat": "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>{point.y:.1f} mm</b></td></tr>", "shared": true, "headerFormat": "<span style='font-size:10px'>{point.key}</span><table style='font-size:12px'>", "footerFormat": "</table>" }, "title": { "text": "Monthly Average Rainfall" } }; new Highcharts.chart("chart", ChartOptions); }
</script>*@
<!--End-->
---------------------------------------------Final Output------------------------------------ ------------------------
Comments
Post a Comment