Click here to Skip to main content
15,896,153 members
Search within:


Highchart context menu showing two times
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
jQuery
I am using highcharts for showing graphs. The problem is, sometimes the chart context menu is appearing two times and it is purely uncertain. It is more like a magic to me.

I am using the following code to enable exporting.

exporting { enabled : true ;}

Please help in this regard.
Posted
Updated 6-Dec-13 1:22am
v2
Add a Solution

2 solutions

HighCharts - Support[^] would be a better place to ask for help on this specific product.
 
Share this answer
 
Posted
Comments
Ajay.Agrawal888 6-Dec-13 7:10am    
Ok.Thanks.
The sample solution using High Chart withy C# is as follows:

.ASPX File:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<%@ Register Assembly="Highchart" Namespace="Highchart.UI" TagPrefix="highchart" %>
<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="Server" xmlns:asp="#unknown">
<style>
body
{
margin: 0;
background-color: #FFF; /*#369*/
overflow: auto;
}

#content
{
background: #FFF; /*369*/
height: 880px;
width: 950px;
position: relative;
top: 1200px;
z-index: 0;
}

#caption
{
position: relative;
top: -60px;
color: #FFF;
font-size: 25px;
font-family: "Lucida Sans Unicode" , "Lucida Grande" , sans-serif;
}

#pagecaption
{
position: relative;
top: -60px;
color: #FFF;
font-size: 25px;
font-family: "Lucida Sans Unicode" , "Lucida Grande" , sans-serif;
}
</style>

<!--buttons-->



High Chart Samples

<asp:label id="Label1" runat="server" text="Line Chart">



<highchart:linechart id="hcLinechart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />
<asp:label id="Label2" runat="server" text="Column Chart">



<highchart:columnchart id="hcColumnChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />

<asp:label id="Label3" runat="server" text="Pie Chart">



<highchart:piechart id="hcPieChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />
<asp:label id="Label4" runat="server" text="Area Spline Chart">



<highchart:areasplinechart id="hcAreaSplineChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />

<asp:label id="Label5" runat="server" text="Line Chart">



<highchart:linechart id="hcLineChartTheme" runat="server" width="300" height="300" xmlns:highchart="#unknown" />
<asp:label id="Label6" runat="server" text="Scatter Chart">



<highchart:scatterchart id="hcScatterChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />




Code Behind File (.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Highchart.Core;
using Highchart.Core.Data.Chart;
using Highchart.Core.PlotOptions;
using Highchart.Core.Appearance;
using System.IO;

public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
try
{
#region Line chart
// Title
hcLinechart.Title = new Title("Rating Details");
//Defining Axis
hcLinechart.YAxis.Add(new YAxisItem { title = new Title("Ratings") });
hcLinechart.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });

//New data collection
//var series = new Collection<serie>();
var series = new List<serie>();
series.Add(new Serie { data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 } });

//bind data to chart
hcLinechart.DataSource = series;
hcLinechart.DataBind();
#endregion

#region Column chart
hcColumnChart.Title = new Title("Rating Details");
hcColumnChart.SubTitle = new SubTitle("Source: AiMedia Live");

// Axis
hcColumnChart.YAxis.Add(new YAxisItem { title = new Title("Ratings") });
hcColumnChart.XAxis.Add(new XAxisItem
{
categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" }
});


// Data
series = new List<serie>();
series.Add(new Serie
{
name = "Items",
data = new Object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 }
});

hcColumnChart.PlotOptions = new PlotOptionsColumn { borderColor = "#dedede", borderRadius = 4 };
hcColumnChart.Tooltip = new ToolTip("''+ this.series.name +'
' + this.x + ': '+ this.y +''");

// Bind
hcColumnChart.DataSource = series;
hcColumnChart.DataBind();
#endregion

#region Pie chart
hcPieChart.Title = new Title("Rating Details");

//Data
series = new List<serie>();
series.Add(new Serie
{
size = 130,

data = new object[] {
new object[] { "ACVM2908U", 9.28 },
new object[] { "ACVM4998U", 6.21 },
new object[] { "ACVS3109W", 11.73 },
new object[] { "ACVS3308W", 10.18 },
new object[] { "ACVS3509W", 12.51 },
new object[] { "ACVM2808U", 10.37 },
new object[] { "ACVM4908U", 10.18 },
new object[] { "ACVM4708U", 10.18 },
new object[] { "ACVS4109W", 10.24 },
new object[] { "ACVS3107W", 9.12 }
}
});

hcPieChart.PlotOptions = new PlotOptionsPie
{
allowPointSelect = true,
cursor = "pointer",
dataLabels = new DataLabels { enabled = true }
};

hcPieChart.Tooltip = new ToolTip("''+ this.point.name +': '+ this.y +' %'");
hcPieChart.Theme = "pink-floral";

// Bind
hcPieChart.DataSource = series;
hcPieChart.DataBind();
#endregion

#region Area Spline chart
//Title
hcAreaSplineChart.Title = new Title("Rating Details");

//definining axis
hcAreaSplineChart.YAxis.Add(new YAxisItem { title = new Title("Rating Details") });
hcAreaSplineChart.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });

//Data
series = new List<serie>();
series.Add(new Serie { name = "Ratings", data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 } });

hcAreaSplineChart.PlotOptions = new PlotOptionsAreaSpline { stacking = Stacking.normal, fillOpacity = 0.3 };

//customizing the tooltip
hcAreaSplineChart.Tooltip = new ToolTip("this.x +': '+ this.y +''");

//customizing the legend
hcAreaSplineChart.Legend = new Legend
{
layout = Layout.horizontal,
borderWidth = 3,
align = Align.center,
verticalAlign = Highchart.Core.VerticalAlign.bottom,
shadow = true //,
//backgroundColor = "#e3e6be"
};

//bind
hcAreaSplineChart.DataSource = series;
hcAreaSplineChart.DataBind();
#endregion

#region Line chart - theme
hcLineChartTheme.Title = new Title("Rating Details");
//hcLineChartTheme.SubTitle = new SubTitle("Gross Revenue");

//Defining Axis
hcLineChartTheme.YAxis.Add(new YAxisItem { title = new Title("Ratings") });
//hcLineChartTheme.XAxis.Add(new XAxisItem { categories = new[] { "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002" } });
hcLineChartTheme.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });

//New data collection
//var series = new Collection<serie>();
series = new List<serie>();
series.Add(new Serie { data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 }, name = "Ratings" });
//series.Add(new Serie { data = new object[] { 254, 402, 576, 85, 257, 684, 601, 410, 543 }, name = "Clothing" });
//series.Add(new Serie { data = new object[] { 125, 471, 247, 120, 397, 451 }, name = "Sports" });

hcLineChartTheme.Theme = "gray";
hcLineChartTheme.Legend = new Legend { align = Align.center, layout = Layout.horizontal, verticalAlign = Highchart.Core.VerticalAlign.bottom, borderWidth = 0 };
//hcLineChartTheme.Appearance = new Appearance { marginBottom = 30, marginRight = 130, borderRadius = 15 };

//bind data to chart
hcLineChartTheme.DataSource = series;
hcLineChartTheme.DataBind();
#endregion

#region Scatter chart - theme
hcScatterChart.Title = new Title("Rating Details)");
//hcScatterChart.SubTitle = new SubTitle("Gross Revenue");

//Defining Axis
hcScatterChart.YAxis.Add(new YAxisItem { title = new Title("Rating Details") });
hcScatterChart.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });

//New data collection
//var series = new Collection<serie>();
series = new List<serie>();
series.Add(new Serie { data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 }, name = "Ratings" });
series.Add(new Serie { data = new object[] { 400, 435, 446, 479, 554, 634, 687, 750, 831 }, name = "Rating 2" });


hcScatterChart.Theme = "gray";
hcScatterChart.Legend = new Legend { align = Align.center, layout = Layout.horizontal, verticalAlign = Highchart.Core.VerticalAlign.bottom, borderWidth = 0 };
//hcLineChartTheme.Appearance = new Appearance { marginBottom = 30, marginRight = 130, borderRadius = 15 };

//bind data to chart
hcScatterChart.DataSource = series;
hcScatterChart.DataBind();
#endregion
}
catch (Exception)
{

}
finally
{
DeleteImages();
}
}
}

// Method to delete temporary png files
private void DeleteImages()
{
string str = "";
try
{
str = AppDomain.CurrentDomain.BaseDirectory;
if (!String.IsNullOrEmpty(str))
{
DirectoryInfo d = new DirectoryInfo(str);//Assuming Test is your Folder
FileInfo[] Files = d.GetFiles("*.png"); //Getting Text files
foreach (FileInfo file in Files)
{
string temp = str + file;
if (temp.EndsWith("png"))
{
File.Delete(temp);
}
}
}
}
catch (IOException ee)
{

}
}
}
 
Share this answer
 
Posted
Updated 6-Dec-13 0:49am
v2
Comments
Ajay.Agrawal888 6-Dec-13 7:14am    
Data is getting populated. Everything is working fine. Only that chart context menu is appearing two times that too not always. I am using the following code for enabling exporting.

exporting
{ enabled : true;}
MukeshSagar 6-Dec-13 7:36am    
Provide me the code so that i can review the root cause.
Ajay.Agrawal888 9-Dec-13 1:08am    
function LoadStudentStandardPerformanceReportWheel(result, container, width, height) {

var dataObj = new Array();
var varDistance = 30;
var varDataLabelDistance1 = 0;
var varDataLabelDistance2 = -50;
var varDataLabelDistance3 = -10;
var size1 = '5%';
var innersize1 = '40%';
var size2 = '60%';
var innersize2 = '25%';
var size3 = '75%';
var innersize3 = '50%';

var spacingTop = 0;
var spacingRight = 25;
var spacingLeft = 25;
var spacingBottom = 0;
height = "360";
width = "450";

var dataObj = new Array();
$(result[0].ObjectiveCode).each(function (index, data) {
var strO = result[0].ObjectiveCode[index].strObjectives.split(":");

var obj = new Object();

obj.name = strO[1] + ': ' + strO[2] + '%';
obj.y = Number(strO[3]);
obj.color = strO[4];
dataObj.push(obj);
});

var dataSubObj = new Array();

$(result[0].SubObjectiveCode).each(function (index, data) {
var strO = result[0].SubObjectiveCode[index].strObjectives.split(":");
var obj = new Object();
obj.name = strO[1] + ': ' + strO[2] + '%';
obj.y = Number(strO[3]);
obj.color = strO[4];
dataSubObj.push(obj);
});

var dataQuestion = new Array();

$(result[0].QuestionNo).each(function (index, data) {
var strO = result[0].QuestionNo[index].strObjectives.split(":");

var obj = new Object();
obj.name = strO[1] + ': ' + strO[2] + '%';
obj.y = Number(1);
obj.color = strO[4];
dataQuestion.push(obj);
});

new Highcharts.Chart({
chart: {
renderTo: container,
type: 'pie',
height: height,
width: width
,
spacingTop: spacingTop,
spacingRight: spacingRight,
spacingLeft: spacingLeft,
spacingBottom: spacingBottom
},
plotOptions: {
pie: {
borderWidth: 1//,

},
series: {
pointPadding: 0,
groupPadding: 0,
states: {
hover: {
enabled: false
}
}
}
},
credits: {
enabled: false
},
title: {
text: null
},
tooltip: {
formatter: function () {
return '' + this.point.name + ''// + this.point.y.toFixed(2);
}
},
series: [{
name: 'Browsers',
data: dataObj,
size: size1,
innerSize: innersize1,
dataLabels: {
enabled: true,
distance: varDataLabelDistance1,
// rotation: -10,
style: {
fontSize: '7px',
fontFamily: 'verdana',
color: '#000'
},
formatter: function () {
var varName = this.point.name.split(":");
varName = varName[0].split(" ");
return '' + varName[0] + ''
}
}
}
, {
name: 'Versions',
data: dataSubObj,
size: size2,
innerSize: innersize2,
dataLabels: {
enabled: true,
distance: varDataLabelDistance2,
// rotation: 270,
style: {
fontSize: '7px',
fontFamily: 'verdana',
color: '#000'
},
formatter: function () {
var varName = this.point.name.split(":");
return '' + varName[0] + ''
}
}
}
, {
name: 'Versions',
Ajay.Agrawal888 9-Dec-13 1:17am    
data: dataQuestion,
size: size3,
innerSize: innersize3,
dataLabels: {
enabled: true,
distance: varDataLabelDistance3,
style: {
fontSize: '7px',
fontFamily: 'verdana',
color: '#000'
},
formatter: function () {
var varName = this.point.name.split(":");
return '' + varName[0] + ''
}
}
}
]
});
}
Ajay.Agrawal888 9-Dec-13 1:19am    
I have posted the whole code in two comments. For exporting, I am using the downloaded js files. Some of the codes may be unnecessary. Please tell if they affect to the rest code.
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
RMB Context Menu
How to create a submenu items for context menu item in vb6
How to show real-time chart via ASP.NET highcharts
How to create a context menu which contains menu items in a gridviewcolumn.celltemplate?
treeview with context menu strip problem
Create the context menu at run time
context menu on treeview
Global context menu with externally customizable menu items?
Is it possible to show context menu for range of items selection in datagridview using C#
Context Menu for TextBoxes Of SyncFusion Controls Type

Advertise
Privacy
Cookies
Terms of Use
Last Updated 6 Dec 2013
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web01 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900