I successfully loaded highcharts on iPad with static data. I want to pass dynamic data in from my ViewController to HTML file prepared for loading highcharts's script.
How can I pass the dynamic data? Please guide me for the same.
PS: I checked stackoverflow tutorials to pass dynamic data but none of them is talking about passing the data from ViewController to html file.
You can get data by ajax, like in the example:
http://jsfiddle.net/vw79L/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts({
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
Related
Regarding HighChart's cluster module:
I'm trying to figure out how to properly distinguish between a user clicking on an individual point versus clicking on a "cluster" of points. I've tried plotOptions.series.point.events.click as well as plotOptions.scatter.events.click.
I've found some other posts that recommend using the click(event)'s event.point.isCluster field, but during my testing I've observed that for clusters, event.point.isCluster is null and for points it isn't present in the event object at all.
So does this mean I should just check for isCluster's existence only via event.point.hasOwnProperty('isCluster'), such as like this?:
{
...,
plotOptions: {
scatter: {
events: {
click: function(e) {
if (!e.point.hasOwnProperty('isCluster')) {
alert('A point was clicked! Do stuff.');
}
}
}
}
},
...
im searching an example for using the exportData event in Highcharts
https://api.highcharts.com/highcharts/chart.events.exportData
I do not find any example, can someone help me?
You need to add exporting and export-data modules and click for example 'View data table' in the context menu:
chart: {
events: {
exportData: function() {
alert('export data!');
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/50vx6ad8/
Docs: https://www.highcharts.com/docs/export-module/export-module-overview
I have an MVC application with CHart.js.
Iam able to load the CHart.js on the View load event.
I want the Chart.js to be loaded on a html button click event.
On button click the controller is invoked and based on the search condition data is filtered.
I want this filtered content to be displayed on the chart.js.
How do i invoke the javascript function to load the chart on button click after the controller process is done on button click.
Flow should be
1. Enter the filter conditions
2. click button
3. controller fetches the data from the database based on filters
4. then the javascript function in the view is invoked to load the chart.js
Let me know how it has to be done.
For displaying data returned from your Controller in JavaScript you have two options:
The First:
using the razor syntax inside your View to refer to the model returned by the controller. This means that your JavaScript would also be written inside your View.
#model 'yourViewModel'
<div>
//your view html code
</div>
<script>
document.getElementById("button").click(function() {
var chartData= #Html.Raw(Json.Serialize(Model.'nameOfYourModel'));
var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: options
});
</script>
The Second:
Retrieve the data from your controller trough AJAX, for this I would recommend using the jQuery library. As it makes the syntax easier to write and understand.
var chartData;
$('.button').click(function() { //your button
$.ajax({ // Invoke controller action to retrieve data
url: "path to your controller and its action",
type: 'GET',
success: function(data){
chartData = data;
}
});
var ctx = $("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: options
});
}
With this approach you call the controller action that returns your chart data in JSON format.
The datatable has a select method, which selects a given row.
The pager also has a select method, which scrolls to a given page.
However, I cannot find a way to tell the pager to scroll to a page which contains a given row.
Namely, I want to select a row in the datatable, but also show it if the view is on a different page.
There's no specific method that can both select and show the needed row at a time, but the combination of the following methods will do the job well:
datatable.select(35); //selects row
datatable.showItem(35); //scrolls or pages to make the row visible
See at this example in the Snippets
webix.ui({
rows:
[
{ view:"button", type:"iconButton",icon:"fa fa-bolt",label:"Go 52", width:100,on:
{
'onItemClick': function()
{
$$("dTable").select(52);
$$("dTable").showItem(52);
}
}
},
{
view:"datatable",name:"dTable",id:"dTable",select:true,
columns:[
{ id:"rank", header:"", css:"rank", width:50},
{ id:"title", header:"Film title",width:200},
{ id:"year", header:"Released" , width:80},
{ id:"votes", header:"Votes", width:100}
],
autowidth:true,
data: big_film_set
},
]
});
big_film_set it is a variable with a JSON.
var big_film_set = [{"id":1,"title":"The Shawshank Redemption","year":"1994","votes":"678.79","rating":"9.2","rank":"1"} /*...*/ ];
I'm trying to pass data from Series Point on Click
I have 2 examples first one is not working, that what i'd like to use.
But second one is working.
[{"name":"Unknown","data":38.0,"DrillDown":{"Callback":"getActivityStatusReport","Arg":"0"},"selected":0},{"name":"Resolved","data":15.0,"DrillDown":{"Callback":"getActivityStatusReport","Arg":"-99"},"selected":0},{"name":"Open","data":255.0,"DrillDown":{"Callback":"getActivityStatusReport","Arg":"2"},"selected":0}]
Here's jsFiddle
I'm not sure if it's because of the latest Highcharts but the chosen answer doesn't work for me. For Highcharts v3.0.6 I got the right information from the following:
series: {
cursor: 'pointer',
events: {
click: function (ev) {
console.log(ev.point.options.id);
}
}
}
Hope the helps!
In your first example you are passing an array of series objects to options.series. In the second you are passing an array of point objects to the first series. The "this" in the click callback is the point object getting clicked on. In the first, your custom option is stored in the series object, and not that point.
What you need in the first is (fiddle here):
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert(this.series.options.DrillDown.Callback); // get the series for the point
}
}
}
}