javascript,json,angularjs,highcharts
interesting question, I normally use either angular.forEach or a library called underscore to handle data processing in angularJS. Here is the forEach version. data = $http.get(); // suppose you have the data result = []; angular.forEach(data.models, function(item) { // simple way is to take item as the original form result.push(item);...
Not a perfect solution, but should be good starting point: (function(H) { H.wrap(H.seriesTypes.columnrange.prototype, 'drawPoints', function(p) { var s = this, chart = s.chart, xAxis = s.xAxis, yAxis = s.yAxis, path, x, y, r = chart.renderer, radius = s.barW / 2; p.call(this); H.each(this.points, function(p) { if(p.options.avg) { y = yAxis.toPixels(p.options.avg *...
To answer my own question, I found that I needed the code: header("Content-type: text/json"); At the top of my .php file....
I don't think there is an easy way to do it. Or rather easier than: making unique array of categories manually filling up array with 0 values, when category is missing For example: // union without diplicates: // taken from: // http://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items Array.prototype.unique = function() { var a = this.concat();...
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> Try to make id value different for each include, e.g. $divId = 'container_' . mt_rand( 1, 1000 ); $('#<?php echo $divId;?>').highcharts... <div id="<?php echo $divId;?>" style="min-width: 310px; height: 400px; margin: 0 auto"></div>...
Are m and l params constant? Or can you change them? If yes, then see: http://jsfiddle.net/TFhd7/373/ In short: Categories reserves a place from -0.5 to 0.5 with category index. For example Year7 -> 4 means x-values from 3.5 to 4.5. So according to this information let's change that values: var...
You can use the legend labelFormatter function to accomplish this. legend: { labelFormatter: function () { return '<span style="color:'+this.color+';">'+this.name+'</span>'; } } Reference: http://api.highcharts.com/highcharts#legend.labelFormatter Example: http://jsfiddle.net/jlbriggs/mcffqo1x/ ...
Wouldn't be easier to control that title using $(".highcharts-legend-title text") ? Then set new transform attribute. But be careful with IE8 - it's using VML, not SVG. Or in a Highcharts way: var title = chart.legend.title; title.translate(x, y); // translate legend's title Demo: http://jsfiddle.net/rum1rcum/...
I would just manipulate the JSON data before injecting it into Highcharts. Assuming your JSON API returns the array of series data... // var series = getSeriesDataViaAjax(); var showTheseIndexes = [0,2,4]; for (var i = 0; i < series.length; i++) { if (showTheseIndexes.indexOf(i) === -1) { series[i].visible = false; }...
sql,ruby-on-rails,activerecord,charts,highcharts
Some heavy thinking and @Agazoom help and I've done this. Code: @top_count = 5 @size = CountChatLine.group(:channel)[email protected]_count @data_top = CountChatLine.group(:channel).order("count_all").reverse_order.limit(@top_count).count @data_other = CountChatLine.group(:channel).order("count_all").limit(@size).count @data_other_final = {"others" => 0} @data_other.each { |name, count| @data_other_final = {"others" => @data_other_final["others"]+count }} @sum_all_data = @data_top.reverse_merge!(@data_other_final) IDK if there is a...
javascript,jquery,charts,highcharts
You can disable events for dataLabels in CSS: .highcharts-data-labels { pointer-events: none; } And demo: http://jsfiddle.net/gdkazb9q/4/ Full solution for the above case by @Gags : events:{ mouseover: function() { $(".highcharts-data-labels").css("pointer-events","none") }, mouseout: function() { $(".highcharts-data-labels").css("pointer-events","visibleStroke") } } } ...
Yes, there is one thing which is redundant in your case - it's about filling up zeros. Instead provide index category and change data format a bit. For example: name: 'S2', data: [0, 5, 0] Can be changed into: name: 'S2', data: [ [1, 5] ] And number 5 will...
javascript,jquery,highcharts,highstock
Just add click events to your flag series, for example: point: { events: { click: function() { alert("clicked!"); } } } And example here. Just click on any "B" flag....
I would do this way: For every doctor do a query like this: /* get all pregrant women for a doctor, group by month and count records */ SELECT MONTH( p.reg_date ), COUNT(*) FROM nurse_dets n INNER JOIN preg_reg_other p ON n.nurse_id = p.nurse_id WHERE n.doctor_id = 1301 AND n.reg_date...
Well, this is not part of the API, but as you noticed, to drill up, you need to call chart.drillUp(). To drilldown, it's a bit different and depends where you want drilldown. In short call method: chart.xAxis[0].drilldownCategory(category_index);, see: http://jsfiddle.net/vncnwd66/2/ However, there is one limitation: you can't drilldown from second level...
Got it working. Here is a demo of dates going upwards and the dataset is timestamped data, dateformat is weekday and no categories used: http://jsfiddle.net/ryfssm1u/ $('#container').highcharts({ chart: { type: 'spline', inverted: true }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -150, y: 100, floating: true, borderWidth: 1 },...
http://json.org/ From Objects An object structure is represented as a pair of curly brackets surrounding zero or more name/value pairs (or members). A name is a string. and from Strings A string begins and ends with quotation marks. So I would say that according to the standard: yes, you should...
javascript,angularjs,highcharts
well as a roundabout to your problem you could try something like this plotOptions: { .... series: { cursor: 'pointer', dataGrouping: { enabled: false }, marker: { radius: 4, states: { hover: { fillColor: function(){ return true; } } } }, turboThreshold: 1000000 } }, ...
Try out the following plotOptions: { column: { colorByPoint: true } }, colors: [ '#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1' ], Fiddle link :) Update 1: Dynamic series fiddle:) Update 2: Use the following code to have specific color for specific bar chart.series[0].addPoint({y: Math.random() * 100,...
This can be done by scanning you data in the events.load: events: { load: function () { var points = [] this.series.forEach(function (entry) { entry.data.forEach(function (theData) { points.push(theData.y); }); }); this.yAxis[0].update({ max: Math.max.apply(Math, points) }); } } This is a very verbose way to do it and you could probably...
javascript,jquery,highcharts,geojson
Use setVisible method from default map series. Like this: http://jsfiddle.net/4mabw6zr/3 (function (H) { H.seriesTypes.mappoint.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; H.seriesTypes.mappoint.prototype.pointClass.prototype.setVisible = H.seriesTypes.map.prototype.pointClass.prototype.setVisible; // use the same setVisible method as map type. H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) { p.call(this); H.seriesTypes.mappoint.prototype.translateColors.call(this); });...
javascript,jquery,ember.js,highcharts
Just go ahead and initialize the graph when you load the component: component.js import Ember from "ember"; export default Ember.Component.extend({ confirmed: false, actions: { confirm: function() { var component = this; component.set("confirmed", true); } }, initializeGraph: function() { var component = this; // code to initialize highcharts graph here }.on('didInsertElement')...
javascript,jquery,angularjs,charts,highcharts
All you need to do is to replace array form of your data to object. This case you can set your color explicitly for (x = 0; x < 5; x++) { var item = $scope.jsondata[x]; newdata.push({name:setName(item.name), y:item.data, color: getColor(item.data)}); } Here's my update to your plunker http://plnkr.co/edit/UaW6RqM4PsGoy5IdpXDR...
I resolved the issue . All I changed is I assigned "from": 1 for all the varialbes data in arraylist and it starts from bottom of the chart till to reach to the end point to:... Here is jsfiddle Thanks...
How about changing format fo data to array of objects? For example: [{y: 300, suffix: ""}, {y: 700, suffix: " remaining" }] Then in tooltip set add suffix info: return 'Daily KB: <b>'+ this.point.y +'</b>' + this.point.options.suffix; ...
You need to store symbol property. For example: options.marker.symbol = this.symbol; Demo: http://jsfiddle.net/ax3o8uf3/22/...
javascript,angularjs,highcharts,boxplot
okay, problem was related to declaring the chart-type as a boxplot. in native highcharts it's done like this (as can be seen in the fiddle): chart: { type: 'boxplot' }, However, when using angularjs highcharts-ng module, we need to use the following code: options: { chart: {type: 'boxplot'} }, That's...
javascript,highcharts,visualization
Basically, you can combine any kind of chart type. See their demo of a scatter plot with a regression line. As an example of a scatter plot combined with a stacked area chart, see the following code and fiddle: var Y_MAX = 6; var X_MAX = 5; $(function () {...
You can use no-data module which allows do that. Ref: http://code.highcharts.com/modules/no-data-to-display.js Example: http://jsfiddle.net/6o8o03fe/1/...
They may be selected randomly by default, but to set them explicitly, try something like this: series: [{ name: 'Predefined symbol', data: [316.4, 294.1, 195.6, 154.4], marker: { symbol: 'triangle' } }], Where the symbol attribute can specify a shape or link to an icon. There are some pretty cool...
jquery,javascript-events,highcharts
You could try this: you create an event to catch keydown. If it is shift key code, you set a reactive variable to true. Don't use a session variable, get reactive dict if you can. (you add var pageSession = new ReactiveDict(); at the beginning of your js file) you...
javascript,jquery,html,css,highcharts
You can use plotOptions.series.point.events.click function to tell the chart exactly what to do after the click of a slice: series: { point: { events: { click: function () { var index = this.x; $('.highcharts-series-group g path').toggle(); $('.highcharts-series-group g path:nth-child(' + (index+1) + ')').toggle(); $('.highcharts-data-labels path').toggle(); $('.highcharts-data-labels path:nth-child(' + (index+1) +...
I installed Highcharts using following command using Package manager console of Visual Studio, this install new version of DotNet.Highcharts - 4.0.0 Install-Package DotNet.Highcharts Then I Created following view (Don't forget to include JS Files). @{ ViewBag.Title = "Sample"; } @using DotNet.Highcharts; @using DotNet.Highcharts.Options; @using DotNet.Highcharts.Helpers; <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"...
I see two solutions for your case: display button in front of the series: http://jsfiddle.net/uy05zby3/7/ events: { load: function() { if(!this.options.chart.forExport) { this.exportSVGElements[0].toFront(); } } } make space for the button: http://jsfiddle.net/uy05zby3/5/ "chart": { "type": "bar", "zoomType": "x", "marginTop": 30 // make more space on top edge }, ...
javascript,jquery,highcharts,click
You can use the point.select() function. So in your case, either in the chart load event, or externally after loading the chart, use: chart.series[0].data[0].select(); Example: http://jsfiddle.net/jlbriggs/j8m8d9vd/ References: Chart Load Event: http://api.highcharts.com/highcharts#chart.events.load Point Select Function: http://api.highcharts.com/highcharts#Point.select ...
Since this is a broad question and there are multiple API calls I will just point you to the series options changes you can do via series\[N\].update(). It depends on what you are trying to update. Your issue with the marker on the line not showing is a syntax error:...
It's the filter in the markup that is causing your $digest() errors.You can work around it by e.g. filtering the data in your controller. So you could have the following template. <select data-ng-model="gender" ng-change="genderChanged()" class="form-control"> <option value=""> - Select all -</option> <option value="m">Male</option> <option value="f">Female</option> </select> <salary-chart data="filtered"></salary-chart> And in...
javascript,php,arrays,json,highcharts
Use foreach to loop through one of the properties, and build an associative array using that element and the values from the corresponding element in the other property. $result = array(); foreach ($input['name'] as $i => $name) { $result[] = array('name' => $name, 'data' => array_map('intval', array_values($input['data'][$i]))); } ...
javascript,jquery,canvas,svg,highcharts
The problem is you that created backgrounds are not part of the chart. In fact, add them in the chart.events.load event, and will be included in the exported SVG: http://jsfiddle.net/9eqh0xrj/5/ chart: { polar: true, renderTo: 'container', events: { load: modelMe } }, And example for function: function modelMe() { var...
javascript,css,charts,highcharts,typescript
Pie center can be calculated using pie series center array (x and y coordinates), plotLeft and plotTop. Using renderer.text it is possible to add text. In redraw event additionally rendered text should be adjusted to stay in the center of pie. Example: http://jsfiddle.net/1917s4pL/ $(function () { var chart = new...
javascript,jquery,css,highcharts
Figured it out. Returning false instead of null is working tooltip: { formatter:function() { if(this.y != 0) { return this.point.name + ':' + this.point.sizeText; } else { return false; } } } ...
If you want to manage labels yourself you might want to use plain HTML for them labels: { formatter: function () { return '<a href="http://www.google.com?q=' + this.value + '" target="_blank">' + this.value + '</a>'; }, useHTML: true } However this case you'll have to manage your styles youself as well...
Now simply add radius option: http://jsfiddle.net/gc323yu6/2/ series: [{ data: [83], innerRadius:'120%', radius: '110%' }, { data: [50], innerRadius:'110%', radius: '100%' }, { data: [19 ], innerRadius:'90%', radius: '80%' }] ...
javascript,jquery,css,charts,highcharts
You can extract that information from xAxis object, by translationSlope param. chart.xAxis[0].translationSlope Example: http://jsfiddle.net/y5Lob9f3/...
javascript,jquery,r,highcharts,rcharts
This forum seems not really many active users. : ) I managed to solve my own problem after did some further study on the behavior of the rcharts and highcharts for both method above. Here is the approach for the benefits of everyone who interested to do the same thing....
You need to use pointPlacement option with number value. For example: http://jsfiddle.net/9phfzewj/34/ Play around with values, which in my case are -0.1 for lefts and 0.1 for rights. As long as series.grouping is enabled, pointPlacement refers to the previous series position....
css,angularjs,highcharts,highstock
It's possible to set extremes without rangeSelector using xAxis.setExtremes() method: http://plnkr.co/edit/bRnV1lyJHmmx7YURTggq?p=preview chart: { renderTo: 'container', height: 600, events: { load: function() { var max = this.xAxis[0].max, range = 24 * 3600 * 1000; // one day this.xAxis[0].setExtremes(max - range, max); } } }, ...
javascript,html,charts,highcharts
I was looking for pointInterval, which not only set the value of the tick but also of the value.
you can use xAxis-> labels -> formatter function to foramt the date as you want. Here in your case since you have not mentioned the start of the time and interval for those value , Library started the plotting from its default values. now the same way as you did...
in the chart object which you got i.e var chart = new Highcharts.Chart(options); you have every aspect about the chart in it Here is the part where you can find the plotted data chart.series[0].data ...
javascript,jquery,charts,highcharts
Have a look at axis.update(). This will let you modify just about anything about an axis. To get which axis to update you can specify by the index (the order in which you added he axis starting at 0).
Yes, you can do this. In the series options for the data element you do not want to show set the visible property to false. series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], visible: false }, { data: [144.0, 176.0, 135.6, 148.5, 216.4,...
Add endOnTick:false (http://api.highcharts.com/highcharts#yAxis.endOnTick) to your axis. For example yAxis: { min: 0, max: 666772, title: { text: 'Quarter 1' }, endOnTick:false } Here's the working sample http://plnkr.co/edit/Vbn1lpMIv8qvSfs65jL4...
javascript,jquery,highcharts,highmaps
Use following libraries in the following order <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.2.min.js'></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script> ...
You can manage your x-values for arearange series: data: [ [-0.5, min, max], // 0 = index for the first category, so start before [2.5, min, max] // 2 = index for the last category, so end after ], Now just set min and max for xAxis: xAxis: { type:...
try this, you can change the time interval of setTimeout function based on the number of for loops or iteration. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> Diameter: <input type="number" id="TreeDiameter" value=""> <button onclick="myFunction()">Calculate</button> <p id="demo"></p> <div...
Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category. Demo with all labels: https://jsfiddle.net/p55t0bmf/1/...
javascript,highcharts,requirejs
Finally, I have solved the problem by merging all Highcharts files I needed to draw my Bubble map chart, as suggested by @PawełFus, and enclosed the code with a condition on Highcharts variable : if (typeof Highcharts == 'undefined') { /* Optimized merge files containing both highstock.js, highcharts-more.js and map.js...
I set ordinal:false in xAsix and the problem was resolve
It's another option to colorAxis. Documentation Make your colorAxis object in options like this: colorAxis: { min: 0, max: 100, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] }, Full fiddle...
It seems like this is a (solvable and unknown?) bug indeed. Somehow a logarithmic y-axis is not compatible with a negativeColor attribute. Go to line 594 of your meteogram example and remove the negativeColor: '#48AFE8' attribute: 592| zIndex: 1, 593| color: '#FF3333', 594| negativeColor: '#48AFE8' << remove this line Now...
javascript,php,highcharts,phantomjs
So I've figured it out. To anyone having the same issue here's the answer: in php file calling myscript.js use the following format for passing arguments through exec(): exec('/usr/bin/phantomjs myscript.js param1 param2',$op,$er); Then in the js file do the below to get the parameters passed: var args = require('system').args; var...
All you need is to place your dataLabels in correct plotOptions and use point plotOptions: { pie: { dataLabels: { enabled: true, format: '{point.name}:{point.y}', } } } You can see a working sample here http://plnkr.co/edit/5VI6cAqVoIibhAJ8pYfP UPDATE Formatting can also work with {y} format: '{y}', but if you want more advanced...
javascript,json,charts,highcharts,highstock
You cannot load form filesystem (security reasons in browsers) so you need to have a webserver. Please check our article how to load data and process
javascript,jquery,charts,highcharts
http://jsfiddle.net/2j1g200g/29/ var options = { chart: { type: 'line', renderTo: 'chart_example' }, title: { text: 'Traffic' }, xAxis: { categories: ['November', 'December', 'January'] }, yAxis: { title: { text: 'Views' } }, series: [{ name: 'Hello', data: [50, 30, 60] }] }; chart = new Highcharts.Chart(options); options.chart.type = 'bar'; chart...
Highcharts default behavior will show the category even if there is no data, unless it is the first or last category. You can just change your input array to have an empty intervals array in your case: http://jsfiddle.net/jlbriggs/2xkfm87e/1/ If you need the first or last category to be empty, you'll...
You are trying to use features of two Highcharts type of charts - solidgauge and gauge. It is possible to place both of them in one chart and set same (or almost the same) values for both series. Example: http://jsfiddle.net/2L1bmhb5/ $(function () { $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBackgroundImage: null,...
javascript,jquery,charts,highcharts
It should be already fixed on the master branch: http://jsfiddle.net/2xkfm87e/14/ And fix will be included in the next release. URL to the branch's CDN: <script src="http://github.highcharts.com/highstock.js"></script> ...
In general, it's not supported, but you can try to add such functionality from maps to the standard charts: http://jsfiddle.net/w9nuha8n/ (function (H) { // add colorAxis H.seriesTypes.line.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; H.seriesTypes.line.prototype.optionalAxis = 'colorAxis'; // draw points and add setting colors H.wrap(H.seriesTypes.line.prototype, "translate", function (p) { p.call(this); H.seriesTypes.heatmap.prototype.translateColors.call(this); }); //...
javascript,highcharts,highstock
Three things to mention: rangeSelector.selected option prevents min, remove that one xAxis.min is not enough, add also xAxis.max to see the change it won't work until you will set xAxis.ordinal to false. Ordinal option displays points equally on the available space, so there is no place for "empty space" And...
I see two options, both are based on load event. One is to check chart.options.chart.forExport flag. When flag is set to true, then add extra elements on the chart using chart.renderer. See demo and more info about the Renderer. Second option, is to do the same, but in exporting.chartOptions.chart.events.load callback....
Although you have a solution for doing it server side, I took a few minutes to convert my PHP solution to a Javascript solution, to address the initial question. step 1) function to calculate percentiles: //get any percentile from an array function getPercentile(data, percentile) { data.sort(numSort); var index = (percentile/100)...
The stack is a separate entity from the series or the point, so doesn't have direct access to the same properties. But with a little digging, you can make the link from the stack to the x axis categories (I always just do a console.log(this) within the formatter to see...
You can set pointInterval / pointStart, like here. plotOptions:{ series:{ pointStart: Date.UTC(2015,4,1), pointInterval: 24 * 3600 * 1000 } }, Example: http://jsfiddle.net/978svgc9/2/...
javascript,jquery,angularjs,highcharts
To do this on your xAxis use the labels.formatter function: labels: { formatter: function() { return Highcharts.dateFormat('%H:%M:%S', parseInt(this.value, 10)); } } You can use this same formatting in your tooltip as well using tooltip.formatter....
The "make the div height of the chart an absurd size" is why the truncated view was added. If you hover over the xAxis labels the full text is shown. If you want to increase the available size for the xAxis labels you can. Another recommendation would be to use...
php,jquery,html,mysql,highcharts
Look at this example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/ with 12 column names categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] and 12 points of data data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, { y: 26.5, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } }, 23.3, 18.3, 13.9, 9.6] if you...
javascript,charts,highcharts,overlap
You can set allowOverlap: true, like this: plotOptions: { series: { dataLabels: { allowOverlap: true } } } See this updated JSFiddle demonstration....
That line is the culprit: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2) splice modifies array. So after first call, menuItems isn't the same. So use slice() instead: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.slice(2) ...
javascript,html,charts,highcharts
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.
javascript,jquery,arrays,highcharts
Set your arr3 var as an array and push elements into it : var expense_name = amounts.expense_name; var expense_amount = amounts.expense_amt; var arr3 = []; $.each(expense_name, function(i, value){ arr3.push([value,expense_amount[i]]); }); ...
Check this fiddle: http://jsfiddle.net/vwmcuvwd/1/ Combination of these 3 properties can help you: crop: false, overflow: 'none', allowOverlap: 'true' ...
Polygon series can be accessed via event.currentTarget. Example: http://jsfiddle.net/ow72qjaw/ Tooltip can be disabled by setting: tooltip: { enabled: false } Hover effects can be disabled for series by using proper settings: states: { hover: { enabled: false } } If you want to disable tooltip for selected series only you...
Live demo: http://jsfiddle.net/5joufkwa/9/ Solution is to use series.dataLabels and generate there callouts: plotOptions: { series: { stacking: 'normal', dataLabels: { align: "right", // right align for label enabled: true, useHTML: true, allowOverlap: true, overflow: "none", crop: false, y: -50, x: 145, formatter: function () { return '<div class="callout top" data-name="Jane">I...
javascript,highcharts,highstock
Looks like default options are lost when updating axis. Simple workaround: http://jsfiddle.net/33cu0o9c/3/ chart.yAxis[0].update({ labels: { align: "right", x: 0, formatter: function () { return this.value; } } }); And bug is reported here....
javascript,jquery,python,ajax,highcharts
Now sure how but changing the return method helped and also the some changes with the JSON format. Every (, ' "") matters. The corrected code is bleow: @app.get('/getmyname/<jsonstring>') def getmyname(db, jsonstring): ret = """{ "chart": { "type": "column" }, "colors": [ "#00B7DE", "#00539E" ], "title": { "text": "SALES -...
javascript,highcharts,datatable
Call drawTable function in load function, instead of reference. load: function(){ Highcharts.drawTable(this, 310, 100, 0, '', 20, 20, 2.5) } Example: http://jsfiddle.net/z9zXM/1035/...
1) There's not such option like series.tooltip.formatter. Only series.tooltip.pointFormat or other formats. For example: tooltip: { pointFormat: "{point.value}" } Example: http://jsfiddle.net/TFhd7/367/ 2) I think this is connected to the design changes between Highcharts 2.x and 4.x. See more in this ticket. And example after setting labels.x to -5: http://jsfiddle.net/TFhd7/368/ Regarding...
javascript,ios,swift,highcharts,uiwebview
UIWebView has a method called stringByEvaluatingJavaScriptFromString that you can use to run a script. I think that you can also use it to just pass and initialize any variable that you like.
That's not really how treemaps are intended to work. I would try a heatmap instead. Example: http://jsfiddle.net/jlbriggs/vk6sfdLs/ ...
Look to documentation of jQuery.get() : https://api.jquery.com/jquery.get/ First parameter of this function is URL for GET request. In Your code is data from method: MysqlDatabase->find_all_for_charts() In HighCharts package, You can find examples how to use it. Just download it from http://www.highcharts.com/download, and look for: "Ajax loaded data, clickable points" demo....
javascript,jquery,highcharts,live
In Highcharts-land, each chart needs to be its own object. It's certainly possible to have multiple charts on the same page, but you'd have to make sure that: Each chart is instantiated separately (in this case, if you're just copying/pasting the $(document).ready part, you're probably stepping on your chart variable....
The relevant code isn't included in the question, but I'll address the issue. You are using a baseSettings object and a custom settings object (lets call them customSettings) to form a chart. These two separate settings are merged using the jQuery extend function. Your problem here is that when both...
I ended up doing this by editing the SVG object and calling the redraw() method on the pies. function ChartLoad() { var chart = this, centerX = chart.plotWidth * 0.5, Pie1CenterX = centerX * 1.5; var Pie1 = chart.get('Pie1'); Pie1['chart']['plotLeft'] = Pie1CenterX; Pie1.redraw(); var Pie2 = chart.get('Pie2'); Pie2['chart']['plotLeft'] = Pie1CenterX+90;...
mappoint series doesn't work with colorAxis, but well, it's Highcharts so it's possible to extend default functionalities: (function (H) { // add colorAxis H.seriesTypes.mappoint.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; // draw points and add setting colors H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) { p.call(this); H.seriesTypes.mappoint.prototype.translateColors.call(this); }); // copy method from heatmap for color...
variables,highcharts,threshold,adaptive-threshold
You can try to mix line serie and areasplinerange, then set proper colors. series: [{ type: 'spline', data: [3, 2, 3, 5, 4, 10, 12] }, { fillColor: 'green', marker: { enabled: true }, data: [ [3, 3], [2, 5], [3, 3] ] }, { fillColor: 'red', marker: { enabled:...