Chart DataPerformance !!!Bar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
Event 'data' parameter contains:
This sample shows the DataPoint touch events supported by jqChart:
- dataPointTouchStart - dataPointTouchMove - dataPointTouchEnd For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<SamplesBrowser.Models.ChartData>>" %> <%@ Import Namespace="JQChart.Web.Mvc" %> <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" /> <link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" /> <script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script> <body> <div> <table> <tr> <td> <%= Html.JQChart() .Chart(Model) .ID("jqChart") .Width(400) .Height(300) .Title("DataPoint Touch Event") .Animation(TimeSpan.FromSeconds(1)) .Legend(false) .Series(series => { series.Column().Title("Column") .XValues(el => el.Label) .YValues(el => el.Value1) .Cursor("pointer"); } ) .Render()%> </td> <td> <b>Events:</b><br /> <div id="eventsDiv" class="box" style="width: 160px; height: 250px; overflow: auto; border: 1px solid #E2EFDE; padding: 10px"> </div> </td> </tr> </table> </div> <div> <b>Event 'data' parameter contains:</b> <ul id='listBlock'> </ul> </div> <script lang="javascript" type="text/javascript"> $(document).ready(function () { var eventsDiv = document.getElementById('eventsDiv'); $('#jqChart').bind('dataPointTouchStart', function (e, data) { $(eventsDiv).append('<div>dataPointTouchStart</div>'); eventsDiv.scrollTop = eventsDiv.scrollHeight; displayDataOptions(data); }); $('#jqChart').bind('dataPointTouchMove', function (e, data) { $(eventsDiv).append('<div>dataPointTouchMove</div>'); eventsDiv.scrollTop = eventsDiv.scrollHeight; }); $('#jqChart').bind('dataPointTouchEnd', function (e, data) { $(eventsDiv).append('<div>dataPointTouchEnd</div>'); eventsDiv.scrollTop = eventsDiv.scrollHeight; }); }); function displayDataOptions(data) { var list = $('#listBlock'); list.children().remove(); list.append('<li>data.chart=' + data.chart + '</li>'); list.append('<li>data.series=' + data.series + '</li>'); list.append('<li>data.dataItem=[' + data.dataItem + ']</li>'); list.append('<li>data.index=' + data.index + '</li>'); list.append('<li>data.x=' + data.x + '</li>'); list.append('<li>data.y=' + data.y + '</li>'); list.append('<li>data.shape=' + data.shape + '</li>'); } </script> </body> </html> @model IEnumerable<SamplesBrowser.Models.ChartData> @using JQChart.Web.Mvc <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" /> <link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" /> <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.jqChart.min.js")" type="text/javascript"></script> <body> <div> <table> <tr> <td> @(Html.JQChart() .Chart(Model) .ID("jqChart") .Width(400) .Height(300) .Title("DataPoint Touch Event") .Animation(TimeSpan.FromSeconds(1)) .Legend(false) .Series(series => { series.Column().Title("Column") .XValues(el => el.Label) .YValues(el => el.Value1) .Cursor("pointer"); } ) .Render() ) </td> <td> <b>Events:</b><br /> <div id="eventsDiv" class="box" style="width: 160px; height: 250px; overflow: auto; border: 1px solid #E2EFDE; padding: 10px"> </div> </td> </tr> </table> </div> <div> <b>Event 'data' parameter contains:</b> <ul id='listBlock'> </ul> </div> <script lang="javascript" type="text/javascript"> $(document).ready(function () { var eventsDiv = document.getElementById('eventsDiv'); $('#jqChart').bind('dataPointTouchStart', function (e, data) { $(eventsDiv).append('<div>dataPointTouchStart</div>'); eventsDiv.scrollTop = eventsDiv.scrollHeight; displayDataOptions(data); }); $('#jqChart').bind('dataPointTouchMove', function (e, data) { $(eventsDiv).append('<div>dataPointTouchMove</div>'); eventsDiv.scrollTop = eventsDiv.scrollHeight; }); $('#jqChart').bind('dataPointTouchEnd', function (e, data) { $(eventsDiv).append('<div>dataPointTouchEnd</div>'); eventsDiv.scrollTop = eventsDiv.scrollHeight; }); }); function displayDataOptions(data) { var list = $('#listBlock'); list.children().remove(); list.append('<li>data.chart=' + data.chart + '</li>'); list.append('<li>data.series=' + data.series + '</li>'); list.append('<li>data.dataItem=[' + data.dataItem + ']</li>'); list.append('<li>data.index=' + data.index + '</li>'); list.append('<li>data.x=' + data.x + '</li>'); list.append('<li>data.y=' + data.y + '</li>'); list.append('<li>data.shape=' + data.shape + '</li>'); } </script> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SamplesBrowser.Models { public class ChartData { public static List<ChartData> GetData() { var data = new List<ChartData>(); data.Add(new ChartData("A", 46, 78)); data.Add(new ChartData("B", 35, 72)); data.Add(new ChartData("C", 68, 86)); data.Add(new ChartData("D", 30, 23)); data.Add(new ChartData("E", 27, 70)); data.Add(new ChartData("F", 85, 60)); data.Add(new ChartData("D", 43, 88)); data.Add(new ChartData("H", 29, 22)); return data; } public static List<ChartData> GetLineAreaChartData() { var data = new List<ChartData>(); data.Add(new ChartData("A", 56, 62)); data.Add(new ChartData("B", 30, 70)); data.Add(new ChartData("C", 58, 68)); data.Add(new ChartData("D", 65, 54)); data.Add(new ChartData("E", 40, 52)); data.Add(new ChartData("F", 36, 60)); data.Add(new ChartData("D", 70, 48)); return data; } public static List<ChartData> GetMultipleAxesSampleData() { var data = new List<ChartData>(); data.Add(new ChartData("A", 1, 40)); data.Add(new ChartData("B", 4, 60)); data.Add(new ChartData("C", 3, 62)); data.Add(new ChartData("D", 5, 52)); data.Add(new ChartData("E", 2, 70)); data.Add(new ChartData("F", 1, 75)); return data; } public static List<ChartData> GetPieChartData() { var data = new List<ChartData>(); data.Add(new ChartData("United States", 65)); data.Add(new ChartData("United Kingdom", 58)); data.Add(new ChartData("Germany", 30)); data.Add(new ChartData("India", 60)); data.Add(new ChartData("Russia", 65)); data.Add(new ChartData("China", 75)); return data; } public static List<ChartData> GetFunnelChartData() { var data = new List<ChartData>(); data.Add(new ChartData("United States", 650)); data.Add(new ChartData("United Kingdom", 530)); data.Add(new ChartData("Germany", 440)); data.Add(new ChartData("India", 280)); data.Add(new ChartData("Russia", 150)); data.Add(new ChartData("China", 75)); return data; } public static List<ChartData> GetPyramidChartData() { var data = new List<ChartData>(); data.Add(new ChartData("United States", 200)); data.Add(new ChartData("United Kingdom", 220)); data.Add(new ChartData("Germany", 260)); data.Add(new ChartData("India", 280)); data.Add(new ChartData("Russia", 450)); data.Add(new ChartData("China", 600)); return data; } public static List<ChartData> GetCategoryAxisSampleChartData() { var data = new List<ChartData>(); data.Add(new ChartData("Category 1", 70)); data.Add(new ChartData("Category 2", 40)); data.Add(new ChartData("Category 3", 85)); data.Add(new ChartData("Category 4", 50)); data.Add(new ChartData("Category 5", 25)); data.Add(new ChartData("Category 6", 40)); return data; } public static List<ChartData> GetLogarithmicSampleChartData() { var data = new List<ChartData>(); data.Add(new ChartData("A", 5)); data.Add(new ChartData("B", 50)); data.Add(new ChartData("C", 500)); data.Add(new ChartData("D", 5000)); data.Add(new ChartData("E", 50000)); return data; } public ChartData(string label, double value1) { this.Label = label; this.Value1 = value1; } public ChartData(string label, double value1, double value2) { this.Label = label; this.Value1 = value1; this.Value2 = value2; } public string Label { get; set; } public double Value1 { get; set; } public double Value2 { get; set; } } } using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using SamplesBrowser.Models; namespace SamplesBrowser.Controllers { public class ChartController : Controller { public ActionResult DataPointTouchEvents() { return View(ChartData.GetData()); } } } |