I started playing with highcharts for a project I am doing. Highcharts was displaying properly when I dumped a massive array of data into it, but now that I am trying to parse through groups of data that I retrieved through MongoDB I can't get it to display.
Here is my angular
$scope.retrieveData = function(){
$http.get('/calldata').then(function(response){
$scope.toneDatas = response.data
var idArray = []
angular.forEach($scope.toneDatas, function(value, key) {
idArray.push({id: value._id, social_tone_data: value.social_tone_data})
for (var i = 0; i < idArray.length; i++) {
if (idArray[i].id === value._id) {
console.log(idArray[i].id)
var socialToneName = []
var socialToneScore = []
angular.forEach(value.social_tone_data, function(value, key) {
socialToneScore.push(value.tone_score)
socialToneName.push(value.tone_type)
})
$("#" + value._id).highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: socialToneName
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
data: socialToneScore
}]
});
};
};
})
});
};
When the page loads a get request calls the database and gets the data to be served to the web page, and I am trying for now to get the data group social_tone_data to display on a chart. I have 19 documents in my mongo database and want it so that each time the loop completes, one chart is generated and served to my webpage. I should have 19 charts. I am still playing around with the code but any help is appreciated.
UPDATE
I refactored my code through an angular directive and used the element argument to display on the page.
Some good info using NG-Highcharts.
as others have said, use a directive to modify dom elements, not controller & def not jQuery as updates fall outside of angulars digest loop.
Your example needs the supplemental template/html code to be relevant.
Related
Let me start off by saying I am fairly new to this.
So what I'm currently doing is I'm playing around with the live feed chart using a js function that produces and stringifies random numbers.
window.feed = function(callback) {
var tick = {};
tick.plot0 = parseInt(10+900*Math.random(), 10);
callback(JSON.stringify(tick));
};
The first issue I'm trying to tackle is being able to switch charts with the click of a button without the feed restarting, essentially having the feed function running in the back and (I'd assume) storing the data into an array? Would that be the correct approach? But currently, when I click the button it just restarts the feed. Here's the code:
$('#chartButton').bind('click', function(){
zingchart.exec('chart', 'setdata',{
'data': {
'type': 'bar',
"refresh":{
"type":"feed",
"transport":"js",
"url":"feed()",
"interval":200
},
'series':[
{
'values':[]
//[11,26,7,44,11]
},
{
'values':[]
//[42,13,21,15,33]
}
]
}
});
});
$('#lineButton').bind('click', function(){
zingchart.exec('chart', 'setdata',{
'data': {
'type': 'line',
"refresh":{
"type":"feed",
"transport":"js",
"url":"feed()",
"interval":200
},
'series':[
{
'values':[]
// [11,26,7,44,11]
},
{
'values':[]
// [42,13,21,15,33]
}
]
}
});
});
$('#areaButton').bind('click', function(){
zingchart.exec('chart', 'setdata',{
'data': {
'type': 'area',
"refresh":{
"type":"feed",
"transport":"js",
"url":"feed()",
"interval":200
},
'series':[
{
'values':[]
// [11,26,7,44,11]
},
{
'values':[]
// [42,13,21,15,33]
}
]
}
});
});
And lastly, I'm trying to make it so it has two different "values" being displayed on the chart, but I can't seem to figure out how I would do that. The tutorial says if you're going to use two values inputs create the objects, but doesn't extrapolate on how to get the different values transmuted.
My hunch is that I create the feed function, but store all the values being created into an array, one for each function. Then assign those arrays to be the values of the chart, but I've been having trouble figuring out exactly how to increment through an array in javascript so you can keep adding more and more data to it as it is created. Any help would be much appreciated.
So I am using the library ECharts to create some charts and graphs for various data that I have on a website. This is my first time using the library and I am fairly new to Javascript/jQuery. What I am trying to do is set the xAxis data to the results from a local page which will return a JSON Object with an array containing the days of the week. After I can do this, I then plan to load the Series data in the same way.
The jSON that is returned is this
When I am trying to set the data for xAxis, I am doing it as shown
xAxis: [{
type: 'category',
boundaryGap: false,
data: function(){
$.ajax({
type: "POST",
url: "ajax/getData.php?test=t&graph_last_days=d&days=7",
cache: false,
success: function(result){
return result.data;
//console.log(result.data);
}
});
}
}],
However, I keep getting the error Uncaught TypeError: o.slice is not a function and this error is only being outputted when I try and use this method of setting the data. In addition to this, if I try and make a function to return the data from the external page and set a variable to that, whenever I try and print it to the console it says undefined
If I do not use my method of trying to load the external data and I predefine the data like so
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
]
}]
Then there are no errors and it works just fine
Can anyone see the problem?
Seems that after speaking with some people, the only example usage or documentation available is this example they have which is closely related to my question here.
If anyone else wants some examples related to ajax or dynamic data loading with ECharts then here are some (in English) *
Line + Bar
Scatter + Candlestick
Pie + Radar
Helpful tip
If you do not speak Chinese and you are using some sort of translator for their code examples; be aware that it's common for websites such as Google Translate and Bing Translator to incorrectly translate the punctuation used in JS by doing things such as,
Translating arrays with single quotes into arrays with single quotes and double quotes: thus causing syntax errors.
Removing commas (,) from objects.
Changing Semi-colon's (;) into Colon's (:) or even removing them.
complete example for echarts pushing data from Ajax call
data.importPorts -> Array of strings
data.importBD -> Array of Objects { clientanem : [4,5,6,7,3]}
$.get("/Home/Graph1", { clients: "403,300", years: "2012" })
.done(function (data) {
var option = {
tooltip: {
show: true
},
legend: {
data: (function () {
var res = [];
for (var name in data.importBD) {
res.push(name);
};
return res;
})()
},
xAxis: [
{
type: 'category',
data: (function () {
var res = [];
data.importPorts.forEach(function (i) {
res.push(i);
});
return res;
})()
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
}
]
};
for (var name in data.importBD) {
var obj = {
name: name,
type: "bar",
data: data.importBD[name]
};
option.series.push(obj);
}
// Load data into the ECharts instance
imprtChart.setOption(option);
});
I have two C# lists that contain and x-axis and y-axis points.
List<string> xaxis = xAxisData(url);
List<string> yaxis = yAxisData(url);
I want to pass points to my jqPlot script chart so that I can plot them.
Below is my code for .aspx page.
<script type="text/javascript">
$(document).ready(function () {
var x = $('.lclass').html();
var xaxis = ???;
var yaxis = ???;
var plot2 = $.jqplot('chart1', [xaxis], {
title: x,
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
seriesDefaults: {
rendererOptions: {
smooth: false
}
},
axes: {
xaxis: {
label: "Date",
numberTicks: 4,
tickOptions: {
formatString: '%MM:%DD'
},
pad: 0
},
yaxis: {
label: "GB"
}
}
});
});
</script>
Any help or guidance is appreciated. Thanks.
there are two general ways to solve this problem
Include the data as part of the rendered ASP.NET page. This is assuming the data will not change while the page is displayed for the user. The exact code to do it depends on technology you use and there is more than one way to do it. E.g. in razor that can be done like this
#Html.Raw(ViewBag.DataAsJson)
where you put the JSON represneation of your data as a string in your ViewBag.To turn your data to a JSON object, you can use NewtonSoft's library
You fetch the data from a RESTful service because you want the data to refresh without needing to refresh the page. Again there is more than one way to do this. One is to implement an ApiController and then in the client side use a AngularJS and $http service to fetch and use the data.
Hello I have already asked a question on Highcharts Point Click not working. Further to that what I have found is my click function works in google chrome but not in IE 8. Can you please help me with this? I am not getting any responses on my earlier question hence I am posting this again -
Below is my code -
var columnoptions = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Exposure Details - Column Chart'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Exposure'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('here');
}
}
}
}
},
series: []
};
and below is the function which draws column chart -
function displayColumnChart(){
columnoptions.series = [];
columnoptions.xAxis.categories = [];
var seriesOptions = {
name: 'chart',
data: [],
};
for(index = 0; index < categoryArray.length; index++){
columnoptions.xAxis.categories.push(categoryArray[index]);
seriesOptions.data.push(valueArray[index]);
}
columnoptions.series.push(seriesOptions);
chart = new Highcharts.Chart(columnoptions);
}
Is it because the way I am dynamically creating this chart? Please guide me regarding this. I am getting error - Object doesnt support this property or method. Highcharts.js line 25. Code 0. Char 55. I wish to implement chart drill down. Hence need to get this working. And IE is standard browser in the company. Please help me.
Object doesnt support this property or method
This is the Javascript error generated mostly in IE.
Always check for extra comma,single quote in your code when you encounter such JS error.
I can see such one in your code snippet.
var seriesOptions = {
name: 'chart',
data: [],
};
This should be
var seriesOptions = {
name: 'chart',
data: []
};
Firefox ignores such error but IE does not let you go. :)
I just used latest highcharts files 2.2.5 and that solved it. Works in IE8. And I feel overall performance is also improved..smooth. Thanks. :)
I'm writing a simple application storing and displaying timestamped messages. Messages are JSON objects containing, say 2 main fields like:
{
"emitted": "2011-12-08 12:00:00",
"message": "This is message #666"
}
I have a model to describe these messages:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' }
]
});
I have no problem displaying these messages in a grid. However, i would now like to display these messages in a chart. For instance, I would be able to grab numbers (like the #666 in the above example) and display a line chart.
Ideally, i don't want to create a new store for the chart, i would like to reuse the same message store, but apply a filter on the fields to grab the proper value. I don't know, something that might look like:
var chart = {
xtype: 'chart',
...
series: [{
type: 'line',
axis: ['left', 'bottom'],
xField: 'emitted',
yField: {fieldName:'message', fieldGrabber: function(v) {
new RegExp("This is message #(\d+)$", "g").exec(v)[1]
}}
}]
};
Does this kind of thing is possible in ExtJS ?
I just tried to explain what I'm trying to do, i have no idea where to find such a feature: in the chart class, in the store class, or using a kind pf proxy to the store.
Side note:
I cannot ask the data to be properly formatted to the server. The messages I receive are not backed up anywhere, they are just live events streamed to the client via socketIO.
Any advices greatly appreciated!
You should extract the value inside you model to a separate field:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' },
{ name: 'nr', convert: function(v, r){
return r.get('message').replace(/^.*#/, '');
} }
]
});
Or you might be better off just having the 'nr' field and using a renderer in Grid that displays it as "This is message #{nr}".
Then you can use the 'nr' field directly in you chart.
I switched to Highcharts and threw ExtJS out to the trash :P