Highchart: addSeries vs. chart.options.series - javascript

I have inherited a project that is using Highcharts.
The previous dev used the .addSeries method to add all of the series to each chart that was being rendered. From what I've read of Highcharts, it seems like .addSeries is really for adding data dynamically.
The data that is being used to populate the charts are coming from an AJAX request. The old dev's approach was to get the data, render the chart, and then add a series using .addSeries. I was thinking that it might be better to update options.series and then pass the whole thing along to new Highcharts.Chart() for rendering, taking the .addSeries out of the equation.
However, since I'm new with Highcharts, I was hoping to get some feedback on what the better method would be.

You're on a good path, though your question suggests you may simply be looking for preference over a strict right/wrong answer.
From what I've seen, unless you have interactions on the page that would trigger a need to update your chart after it's been drawn, the benefit to using addSerie would be to add some visual flare. Using addSerie, your charts will visually draw themselves in front of the visitor - vs them already being drawn. (I believe HighCharts demo site has some good examples of this.)
I also recently inherited a HighCharts project and am generating a new Highcharts.Chart() using dynamic data by parsing the AJAXed data on the fly. The good news is that all of the charts still have nice visual flare (flare is important) since they don't draw until the AJAXed data is fully loaded. This snippet illustrates how I've been loading dynamic charts, parsing the JSON data on the fly:
$(function () {
var visitsChart;
$(document).ready( function() {
$.getJSON('/json-data-url', function(json){
var visitsChart = new Highcharts.Chart({
chart: {
renderTo: 'visitsContainer',
type: 'spline',
},
title: {
text: 'Test Widget'
},
series: [{
name: 'Speed',
data: [parseInt(json.visits)],
}],
...
});
});
});
});
I won't lie ... I had a few minutes of hair pulling when I got started but now I wish I had more time to work with Highcharts as it's quite fun once you get on a roll. Hope this helps.

Related

Multiple brush charts with Apexcharts in VueJs

I'm developing an application where I'm using apex charts to create a brush chart. However, I want my brush to control multiple charts instead a single one, as the example shows.
Before I start working with callbacks I'm wondering if there is an easy-way of make this work with that library, for example by passing an array of targets:
brush:{
target: 'chart2',
enabled: true
},
Thanks in advance,
I think this might be undocumented, but apparently apexcharts lets you define this:
brush: { enabled: true, targets: ['candles', 'candles_2nd'] },
I found in the lib-code that it actually handles it like this:
var targets = w.config.chart.brush.targets || [w.config.chart.brush.target]; // retro compatibility with single target option
Regards,
Jim

How to get charts and reports in html5 dynamically?

I'm working on an android tablet application using phonegap in which i need to get a report chart which diagrammatically explains the status of different things, something like as shown in the picture below.
I want to generate these kind of charts or reports dynamically which varies as the data changes.Can anyone help me providing some examples using html5, js and css which has some similar functionality?
Did you check out RGraph: HTML5 & Javascript charts?
RGraph is a charts library written in Javascript that uses HTML5 to draw and supports over twenty different types of charts. Using the new HTML5 canvas tag, RGraph creates these charts inside the web browser using Javascript, meaning quicker pages and less web server load. This leads to smaller page sizes, lower costs and faster websites - everybody wins!
If you see a basic code, it goes this way:
<script>
window.onload = function ()
{
// The data to be shown on the Pie chart
var data = [564,155,499,611,322];
// Create the Pie chart. The arguments are the canvas ID and the data to be shown.
var pie = new RGraph.Pie('myPie', data);
// Configure the chart to look as you want.
pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']);
pie.Set('chart.linewidth', 5);
pie.Set('chart.stroke', 'white');
// Call the .Draw() chart to draw the Pie chart.
pie.Draw();
}
</script>
See a live example of Pie charts!
Yours is a Radar Chart. See one here: Radar Charts. Source code:
<script>
window.onload = function ()
{
// The data to be represented on the Radar chart.
var data = [3, 3, 41, 37, 16];
// Create the Radar chart. The arguments are the canvas ID and the data to be shown on the chart.
var radar = new RGraph.Radar('myRadar', data);
// If you want to show multiple data sets, then you give them like this:
// var radar = new RGraph.Radar('myRadar', [3,5,6,8], [4,5,2,6]);
// Configure the Radar chart to look as you wish.
radar.Set('chart.background.circles', true);
radar.Set('chart.color', 'rgba(255,0,0,0.5)');
radar.Set('chart.circle', 20);
radar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)');
radar.Set('chart.labels', ['Safari (3%)', 'Other (3%)', 'MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)']);
radar.Set('chart.key', ['Market share', 'A made up figure']);
// Now call the .Draw() method to draw the chart.
radar.Draw();
}
</script>
Check the below link.It really has some good examples.
http://www.highcharts.com/
Let me know if you still have any issues
A possible solution is to map CSS3 transitions to the graph. Here is a basic example demonstrating what you can do without using any javascript.
Here are some static examples produced with css (no javascript), I'm having a hard time finding interactive examples but as demonstrated in one of the previous links it is possible.

Graphael documentation, recent samples, etc

I'm working on an implementation of a live-updating line graph using gRaphael which is a graphic extension of the Raphael SVG library.
I can't seem to find any examples of somebody doing this as a near-realtime updating project, which is fine. I'm assuming there's a way to call refresh on the graph with a new data set (without the need to re-initialize a whole new Raphael object each time!), but therein lies the problem:
There doesn't seem to be accurate documentation anywhere. I discovered this StackOverflow question: Graphael line chart which in turn led to this documentation project: https://github.com/kennyshen/g.raphael/tree/master/docs , but the results were cold. Using the examples provided, I ran into some errors:
the syntax r.g.linechart() used in the examples was no longer valid (where r is the Raphael object and I assume g is a gRaphael property within). Somewhere along the way somebody must have switched to properly extending the Raphael object so that r.linechart() worked.
The parameters passed into linechart() were incorrect, resulting in an undefined error again. If I passed in only the #x, #y, width, height, arrayX, arrayY parameters and dropped the chart labels, etc., I could render a plain line. But of course I need to be able to label my axes and provide a legend, etc.
Needless to say, a library without an API document isn't going to do anybody much good, but there are stalwarts out there who are willing to learn based strictly on reading the code itself. I'm not one of those. I would probably do OK with a well-commented example, preferably using live updates.
So I guess the questions are:
Does anybody know better documentation than the one I linked to?
Can someone point me to examples, documentation failing?
Can someone provide a proper itemization of the parameters that linechart() will accept?
Thanks!
For the record, here's how far I am so far:
var r = Raphael('line-chart');
// did NOT work -->
var linechart = r.g.linechart(
10,10,300,220,[1,2,3,4,5],[10,20,15,35,30],
{"colors":["#444"], "symbol":"s", axis:"0 0 1 1"}
);
// worked in a limited way, rendering a plain line with no visible labels/graph -->
var linechart = r.linechart(
10,10,300,220,[1,2,3,4,5],[10,20,15,35,30]
);
I am still trying to learn Raphael myself, but here are the primary resources I have been using: http://g.raphaeljs.com/reference.html and the same sans the "g."
here is a fiddle that pretty much pulls off an updating linechart with knockout/gRaphael, prob not the best solution, but its an idea: http://jsfiddle.net/kcar/mHG2q/
Just a note, I didn't start learning it until I combined reading with trial/error (with a lot of error), so play with the fiddle and see how things change.
but the basic code for it is like:
//constructor
var lines = r.linechart(10, 10, width, height, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true })
.hoverColumn(function () { //this function sets the hover tag effect
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
}
}, function () {
this.tags && this.tags.remove();
});
lines.symbols.attr({ r: 3 }); //this adjusts size of the point symbols
There is a fork in GitHub that is working on the documentation and examples.
You will need to download the code and view it from you computer. It is a work in progress but it's more than you can find in the official g.Raphael page.
I also found this small post with some examples.

loading chart from data fetched using ajax call

I am using jqPlot javascript library ( http://www.jqplot.com/ ) for graphs and charts in one of my application.
In my application, there are 5-6 pages where this library is used. But I would like to discuss one particular case here.
On 1 of page, I am loading 3 charts. Data for these 3 charts is populated from database tables.
There is different set of queries for each chart. So, populated data for each chart is different too.
Once I have populated data, I have to process it, before providing its input to chart.
What is the problem then:
Problem that I am facing is it takes lots of time for page to render on browser (which is quiet obvious, as first it will form query, then fire that query against database tables, get the data, process on data and give to chart)
One of my friend suggested to implement following thing using ajax. I really liked his solution.
This is what I intend to do:
I would create a page, which will load all the required js/css files for jqPlot library.
There will be 3 sections on that page, where I would put some GIF images indicating that some process is going on (say ajax-loader.gif)
Once page is loaded, it will fire 3 ajax call, one at a time, to fetch each chart.
My Question Is how can I load chart from data received from ajax-call?
jqplot puts data and creates chart in following way (look at example below)
<script class="code" type="text/javascript">
$(document).ready(function(){
var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {
// Give the plot a title.
title: 'Plot With Options',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
label: "X Axis",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Y Axis"
}
}
});
});
</script>
Since you're using jQuery, you'd use the jQuery Ajax method to fetch the chart data after the page has loaded.
In your success function, your JS code (on the browser) receives the data from your server. Once you have the data, make the call to $.jqplot -- passing in the data you've just received.
To initially show the busy gif, just use the img element as the static content of the chart2 div which will later be the graph's container.
Some tips:
Some browsers don't do well at handling an animated gif while running a js program. So you may want to try a text message ("Loading chart...") in addition to the rotating gif. -- Or update the text messages. Eg start with "Fetching chart data from server" then update to "Processing chart data" once your success function has been called.
Rather than starting all 3 Ajax calls at once, experiment with having the success function for the first chart initiating the second Ajax call. (In addition to it charting the data.)
If you have problems with your Ajax calls, Google for examples and ask a separate question on SO if you still have problems.

Ajax pattern to update javascript chart data?

I'm using Highchart API to display charts. There are many chart type to display and the idea is let the user choose a chart from a dropdown, make an ajax request and partially update the chart. The good is i can output a custom response, with custom chart options, layout and data.
The problem here is that chart layout and data are inside the script tag in head. An empty div is then populated by the API.
Which pattern should i use to partially update the chart? Sorry for the very noob question, but i'm feeling a bit confused when dealing with something different from updating div with plain text/html as server response.
i was working a little with hightchart, and what i was doing to change the type of chart is calling a function that go's to a php ajax source and create the chart with a table's db result.
each chart's need a diferente table layout, i think.
and that's why i create separeted files for this.
like:
piechart.ajax.php
and a div get the return of ajax call and after that, i call the Highcharts to display the div's result's into a chart.
dont know if this will help you, but may be clear your 'mind'
edit:
html:
<div id="grafic"></div>
js:
$.post("ajax/piechart.ajax.php",
{
cache: false,
},
function(data){
$("#grafic").html(data);
var table = document.getElementById('datatable'),
options = {
chart: {
renderTo: 'grafic',
zoomType: 'xy',
defaultSeriesType: 'pie'
}
};
Highcharts.visualize(table, options);
}
)
Answer myself: make chart a global javascript variable, initialize charts options (not necessary) send an ajax request and return a JSON object that represent the entire chart object, overriding chart global. No need to call redraw. Limitations: as you can't serialize function you can't dynamically override formatters function (e.g. for tooltips).
If you just want to update data call addSeries, setSize, setTitle (and others) methods.
All explained very well here (section 4) and here.

Categories