Hia guys,
I'm currently learning to use HighCharts in order to graph some data.
After learning to set up on a local page, it was time to load the data dynamically / though ajax.
The chart loads fine, with series defined like:
var series1=[];
var series2=[];
var series3=[];
I then have a button, which fires an ajax request, and these arrays are filled with data, pulled from an sql database, formatted, and sent back to the webpage :D
(this has taken a while)
Now - with these arrays filled, I'm looking to get HighCharts to draw this data.
I've tried to use chart.refresh(); on the end of my ajax but this seems to give the error:
Uncaught TypeError: Object #<Object> has no method 'refresh'
I'm a little stumped and struggling to make progress - a nudge in the right direction would be very much appreciated!
Edit:
chart.series[0].setData(series1);
Is what needs firing after the arrays have been filled up.
Without seeing the rest of your code here is a wild guess:
You have set up your chart with these 3 series already "created" in the HighCharts options. You are loading the page, defining your HighCharts options (including the 3 series - as empty series), then firing the ajax call to populate the three series of data.
You are not actually pushing the new data in each series to the chart, however. You are just setting the vars to new values after they have been sent to HighCharts - refreshing (if even a valid HighCharts call) HighCharts does "nothing" because it is not re-reading the 3 var values.
Also, note that chart.refresh does not appear to be a valid HighCharts call. There is chart.redraw that you can try - but I do not think this will help in your case because of how you are defining your data series elements (again, no idea because the important part - telling HighCharts there is new data in code was not presented). Have a look at the API as well for pointers on dynamically assigning data.
How are you updating the series values? How are you telling the chart there is new data? It would be helpful to see the rest of the code because 3 lines of var x=[] is not really useful.
Here is a basic way to set the data of a series using setData:
$('#button').click(function() {
chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
});
Related
I'm still relatively new to programming and I have a project I am working on. I am making a staff efficiency dashboard for a fictional pizza company. I want to find the quickest pizza making time and display the time and the staff members name to the user.
With the data charts it has been easy. Create a function, then use dc, e.g dc.barChart("#idOfDivInHtmlPage")
I suspect I might be trying to be too complicated, and that I've completely forgotten how to display any outputs of a js function to a html page.
I've been using d3.js, dc.js and crossfilter to represent most of the data visually in an interactive way.
Snippet of the .csv
Name,Rank,YearsService,Course,PizzaTime
Scott,Instore,3,BMC,96
Mark,Instore,4,Intro,94
Wendy,Instore,3,Intro,76
This is what I've tried so far:
var timeDim = ndx.dimension(function(d) {
return [d.PizzaTime, d.Name]
});
var minStaffPizzaTimeName = timeDim.bottom(1)[0].PizzaTime;
var maxStaffPizzaTimeName = timeDim.top(1)[0].PizzaTime;
}
then in the html
<p id="minStaffPizzaTimeName"></p>
<script type="text/javascript" src="static/js/graph.js">
document.write("minStaffPizzaTimeName");
</script>
You are surely on the right track, but in javascript you often have to consider the timing of when things will happen.
document.write() (or rather, anything at the top level of a script) will get executed while the page is getting loaded.
But I bet your data is loaded asynchronously (probably with d3.csv), so you won't have a crossfilter object until a bit later. You haven't shown these parts but that's the usual way to use crossfilter and dc.js.
So you will need to modify the page after it's loaded. D3 is great for this! (The straight javascript way to do this particular thing isn't much harder.)
You should be able to leave the <p> tag where it is, remove the extra <script> tag, and then, in the function which creates timeDim:
d3.select('#minStaffPizzaTimeName').text(minStaffPizzaTimeName);
This looks for the element with that ID and replaces its content with the value you have computed.
General problem solving tools
You can use the dev tools dom inspector to make sure that the p tag exists with id minStaffPizzaTimeName.
You can also use
console.log(minStaffPizzaTimeName)
to see if you are fetching the data correctly.
It's hard to tell without a running example but I think you will want to define your dimension using the PizzaTime only, and convert it from a string to a number:
var timeDim = ndx.dimension(function(d) {
return +d.PizzaTime;
});
Then timeDim.bottom(1)[0] should give you the row of your original data with the lowest value of PizzaTime. Adding .Name to that expression should retrieve the name field from the row object.
But you might have to poke around using console.log or the interactive debugger to find the exact expression that works. It's pretty much impossible to use dc.js or D3 without these tools, so a little investment in learning them will pay off big time.
Boom, finally figured it out.
function show_fastest_and_slowest_pizza_maker(ndx) {
var timeDim = ndx.dimension(dc.pluck("PizzaTime"));
var minPizzaTimeName = timeDim.bottom(1)[0].Name;
var maxPizzaTimeName = timeDim.top(1)[0].Name;
d3.select('#minPizzaTimeName')
.text(minPizzaTimeName);
d3.select('#maxPizzaTimeName')
.text(maxPizzaTimeName);
}
Thanks very much Gordon, you sent me down the right path!
I have a bit of an issue with Fabric.js. I'm loading a JSON string in to the canvas and then at some time in the future I want to load more JSON in again (possibly the same JSON). The first load seems to work fine but the second load has an issue: the foreground path object doesn't appear, even though its bounding box is clickable. I'm not sure if this is a problem relating to the backgroundImage, or the way I'm clearing the canvas before I load the JSON again, or the actual way I'm loading JSON (or all three).
I've put a simple fiddle here.
var j = { ... }; //json object (see fiddle)
var c = new fabric.Canvas( document.getElementById("c") );
c.loadFromJSON(j, function(objects, options) {
c.renderAll();
setTimeout(function(){
c.backgroundImage=0;
c.clear();
c.renderAll();
setTimeout(function(){
c.loadFromJSON(j, function(objects, options) {
c.renderAll();
c.setActiveObject(c.item(0));
});
},3000);
},3000);
});
I create the initial canvas view from the JSON object, then clear it out after 3 seconds, then load it in again after another 3 seconds (this is just to simulate clicking a button or whatever in a real app).
Would appreciate any help on this and apologies if this has been dealt with before.
Cheers
[EDIT] I've noticed that if I copy the JSON object in to a second variable so that i'm initialising two objects with the same content, and load that in the second loop, it will load again properly. Could the original JSON variable be getting modified or cached and that's causing the issue? (fiddle for this here
i checked the objects that you product and i see that when you load the svg for the second time, all the 'paths' object is missing.
you can see it too, by adding a console.log before the first load and another one just before the 2nd load.
like this:
console.log(JSON.stringify(j));
anyway, to the point,
you just need to stringify your object before you try to load it, in that way you keep all the object as one ,
i added a line that converts you svg object to json string and pass it on a temp variable
tmp = JSON.stringify( j );
take a look ,i update your code,on the fiddle: https://jsfiddle.net/5j7ejLmk/2/
if you find my answer correct please mark it as so.
good luck
i don't know what happen. i just load my data with json and applying paging with dataView. the data is displayed well but i can't scrolling to the bottom. so when i click "25" to show 25 rows, the table only display 24 rows. same if i click "50", "100" or all rows.
i check with firebug, the JSON response is complete.
i tried to inspect element in the browser, compare mine with file "examples/example-optimizing-dataview.html". and i got this:
.slick-viewport has height: 452px;
and on the example file
.slick-viewport has height: 473px;
and if i change the height in firefox with inspect element feature. i can see the bottom of data.
how do i solve this?
here is my code http://pastebin.com/vqYEW1Zg
First of all you don't need to loop through your data with a dataView object, by just binding the getJSON result data with dataView.setItems(data) is all you need. The loop is required only when not using a dataview. So remove that loop inside your getJSON and have this code at the end of your getJSON function:
$.getJSON(ajaxFileURL,ajaxUpdateURL,function(data){
// all your previous code...
// initialize the model after all the events have been hooked up
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
}); // end of getJSON
As for the rest, you should also look at your previous question, I also replied you and modified the code sample there...
I have some php scripts which esentially take a long time to retrieve data. As a result this impacts highcharts loading times as the current code I have only writes the chart once all the data is retrieved as the highcharts code is only echoed once all processing is complete.
This causes the page to basically show nothing until the data is retrieved. The goal is to have the highcharts load immedietly and then write to the series with the data returned by the php scripts.
So, what I'm looking to to is have all the graphs load immedietly and display 'loading' with no data and then use setData to pass in the data to the graph series once the php scripts have completed.
I'm just wondering if anyone had any examples of this being done? Another problem I'm having is only being able to set the data within the $(document).ready(function() function. e.g.
works:
http://preview.tinyurl.com/b724bxo
breaks:
http://preview.tinyurl.com/a7mqqkc
Many thanks and any help would be greatly appriciated.
Don't know if you're still looking for this, but to display a "loading" message, you can use the "setLoading()" method on the chart.
pipeline_by_sales_stage_highchart.setLoading("Loading...")
Check this fiddle: http://jsfiddle.net/QSfEJ/
You can't access variable out of scope, move that into that scope, or make variable global.
http://jsfiddle.net/M2jv7/33/ -inside scope
http://jsfiddle.net/M2jv7/34/ -global variable
var pipeline_by_sales_stage_highchart;
$(document).ready(function () {
pipeline_by_sales_stage_highchart = new Highcharts.Chart({
});
...
// somewhere:
pipeline_by_sales_stage_highchart.series[0].setData(data);
See my answer here: Highchart series update in javascript
Summary :
Initialise chart with empty series, then use addSeries in a loop to update chart, like this:
this.dataFromApi.forEach(function(serie) { // for each row of data, add a series
this.chart.addSeries(serie, false); // false is to prevent redrawing
}.bind(this));
this.chart.redraw(); // manually redraw
this.chart.hideLoading(); // stop loading if showLoading() was call before
jsFiddle here: https://jsfiddle.net/qyh81spb/
I have google chart on my page, but right now chart is drawn when Google Visualization library is loaded on the page load, and I have to give data dynamically through ajax, so is it possible to change the callback method, or is there any alternative?
I managed with it as i wanted, It can be helpful for someone, and if there is better solution for this please do suggest.
I removed this setOnLoadCallback function - google.setOnLoadCallback(drawChart);
This call back will call the drawChart() as soon as the visulization library is loaded,
(but I didn't wanted it, i wanted to call it on button click).
so I called drawChart(); function directily in the button click function code.
Then I faced problem with rendering the dynamic data to the datatable, when I was putting hard coded values, the chart drawn fine, but as I put variables instead of those values, it was unable to generate chart.
so i parsed the variable into integer by parseInt(doc_pre),
And it worked fine.
You can check this :
Jquery Charts