Search Results

Search found 54 results on 3 pages for 'highcharts'.

Page 1/3 | 1 2 3  | Next Page >

• Pass data in np.dnarray to Highcharts

  - by F.N.B

  I'm working with python 2.7, jinja2, flask and Highcharts. I create two numpy array (x1 and x2, type = numpy.dnarray) and I pass to Highcharts. My problems is, Highcharts don't recognize the commas in the vector. This is my jinja2 code: <script> $(function () { $('#container').highcharts({ series: [{ name: 'Tokyo', data: {{ x1 }} }, { name: 'London', data: {{ x2 }} }] }); }); And this is the error that I look with network chrome dev tools: series: [{ name: 'Tokyo', data: [1 4 5 2 3] }, { name: 'London', data: [3 6 7 4 1] }] I need change the numpy array to python list to pass to Highcharts or there is a better way to do?? Thanks

  Read the article

• How to add multiple series in highcharts synchronously

  - by leonlong

  I tried to add multiple series in highcharts synchronously, but the response time is very slow. It took almost 3-5 seconds to display the charts. Here is part of the code. while(chart.series.length>0){ chart.series[0].remove(true); } chart.addSeries(series1); chart.addSeries(series2); chart.addSeries(series3); chart.addSeries(series4); chart.addSeries(series5); When I remain only one addSeries command, it response immediately, so I realized it may be the problem of add multiple series in highcharts synchronously. Not so good at highcharts, so is there anyone could help me about this? Or maybe there is another way to do this, I am much appreciated.

  Read the article

• HighCharts : Adding Hyperlinks to the X-Axis of the chart

  - by learner

  I have been using HighCharts in my PHP website by migrating it from older charts and I am very impressed by the number of graph options and functions with this library. However I am not able provide hyperlinks to the values of the x-axis(or y-axis) in order to navigate to another URI. Code of Categories in this case xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] }, Can anyone point me to an example or documentation on Highcharts if available. Thanks

  Read the article

• Let multiple highcharts charts appear automatically from mysql data

  - by martini1993

  I have the following problem. I want to make multiple Highcharts webcharts appear automatically based on the data from the database. Let's say we have the following database: ___________________________________________________________________ | | | | | | | | Year | Month | ID | Name User | Wins | Losses | |_______|___________|______|_______________|____________|__________| | 2013 1 21 Tony Stark 3 12 | | 2013 1 52 Bruce Wayne 5 4 | | 2013 1 76 Clark Kent 9 5 | |__________________________________________________________________| (This database is an example, there are a lot more rows in the real database.) And i have the following query: SELECT a.year AS year1, a.month AS month1, a.id AS id, a.name AS nameuser, a.wins AS wins, a.losses AS losses FROM Sales a WHERE a.month = 1 AND a.year = YEAR(NOW()) With this, it is very easy to hardcode a chart with Highcharts. But what I want is that there has to be a webchart per user. So instead of a single webchart with all the users in it, I want multiple charts next to each other based on the data from the database. So instead of this: http://jsfiddle.net/CWSb6/ I want this (But then next to each other): http://jsfiddle.net/DReMD/ It has to be generated automatically with php and mysql. So if there is a new user starting this month, and the new user is saved in the database, the page automatically displays the new user with the related web chart. I find this very hard to accomplish and I need some help to get to the right direction for the solution. Many thanks in advance! (Sorry for my bad english.)

  Read the article

• Highcharts Area graph, use 2 fill colors above / below X axis

  - by Kris Chant

  In Highcharts, I'd like to fill an Area graph with 2 colors, positive values get one color, negative values get another color. I've been able to do this with a linearGradient, but this must be adjusted based upon the size of the container. Is there a more general way of doing this, e.g. setting values 0 color 1, values < 0 color 2? See my JSFiddle for more information and an example: http://jsfiddle.net/GNvur/2/

  Read the article

• How to align centre a custom label in highcharts

  - by Chrissy

  See a jsfiddle example I am trying to align the custom label in the /labels/items JSON element to hang right under the title and subtitle. Playing with firebug I can alter the SVG text element for the label and add text-align='middle' and change the x='' attribute to have the same value as the title's x attribute. This makes it perfectly align under the title and stay there when resized but I can't figure out how to make the highcharts library generate this source. Maybe there is a better way to add another label under the subtitle?

  Read the article

• FusionCharts vs GoogleCharts vs HighCharts suggestions required for commercial use

  - by Forte

  I find that FusionCharts v3 evaluation and HighCharts cannot be used for commercial purpose. Google charts is the best option but those are not as good looking as any of the above. They don't even have 3d charts although their visualization API does support 3D which i cannot find. Is there any open source graphing or charting solution available which can be used in commercial products? I even looked in to Open Flash Charts 2 but found that the developer had left the project long time a go and the currently out libs are way too buggy. I had to fix more than 50 bugs to get their 1 chart working. I tried to fix others but couldn't get Pie charts etc. working. What i'm looking for is - 1. Attractive 3d column chart. 2. 3d Pie Chart. 3. Spline Chart. 4. Geographical Chart. Does anyone knows any open source or free solution which can be used for commercial products? Cheers!

  Read the article

• highcharts correct json input

  - by Linus

  i am trying to do a basic column chart. i have looked the examples but not sure why i do not see any graph (lines). I can see the title and subtitle appear an no javascript errors in firebug. any help please $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column', events: { load: requestData } }, title: { text: 'Some title' }, subtitle: { text: 'subtitle' }, xAxis: { categories: [], title: { text: null } }, yAxis: { min: 0, title: { text: 'y-Axis', align: 'high' } }, tooltip: { formatter: function() { return ''+ this.series.name +': '+ this.y +' '; } }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -100, y: 100, floating: true, borderWidth: 1, backgroundColor: '#FFFFFF', shadow: true }, credits: { enabled: false }, series:[] }); }); function requestData() { $.ajax({ url: 'test.json', success: function(data) { options.series[0].push(data); chart.redraw(); }, cache: false }); } }); my json input file is below [ { name: 'name1', y: [32.6,16.6,1.5] }, { name: 'name2', y: [6.7,0.2,0.6] }, { name: 'name3', y: [1,3.7,0.7] }, { name: 'name4', y: [20.3,8.8,9.5] },{ name: 'name5', y: [21.5,10,7.2] }, { name: 'name6', y: [1.4,1.8,3.7] }, { name: 'name7', y: [8.1,0,0] }, { name: 'name8', y: [28.9,8.9,6.6] } ]

  Read the article

• Change color on single-series line chart using rCharts and Highcharts?

  - by Sharon

  Is it possible to change the color of a line using rCharts and Highcharts so that the line color changes depending on a factor? I've done this with ggplot2 but would like to make an interactive version if possible. I've tried h1 <- Highcharts$new() h1$chart(type="line") h1$series(data=mydf$myvalue, name="", groups = c("myfactor")) h1$xAxis(tickInterval = 4, categories = mydf$myXaxis) but that's not working, line stays the same color. Sample data myvalue <- c(16, 18, 5, 14, 10) myXaxis <- c(1,2,3,4,5) myfactor <- c("old", "old", "old", "new", "new") mydf <- data.frame(myvalue, myXaxis, myfactor) Thanks for any suggestions.

  Read the article

• HighCharts : Can I customize the colors of individual series?

  - by user1091114

  I am using HighCharts for a line graph and i am attemping to change the line color for each series. I did find this example here but the data is hard coded. My data is pulled from an Sql database and passed to the HTML page using some VB code. var chart; $(document).ready(function () { chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'column' }, title: { text: 'Chart Title' }, subtitle: { text: 'Chart subtitle' }, xAxis: { categories: [<%= GraphDate %>] , labels: { rotation: -45, align: 'right', style: { } } }, yAxis: { min: 160, title: { text: 'Temp' } }, legend: { layout: 'vertical', backgroundColor: '#FFFFFF', align: 'left', verticalAlign: 'top', x: 400, y: 0, floating: true, shadow: true }, tooltip: { formatter: function () { return '' + this.x + ': ' + this.y + ' ºC'; } }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [<%= GraphSeries %>], }); I tried to style it using the other post however it failed to generate a chart. The main problem is though, the line graph has two series, so the below method would set the color for both series i assume? So, would i maybe need to format the series in my vb code somehow? series: [{ color: 'yellow', data: [ [<%= GraphSeries %>] ]},

  Read the article

• How to troubleshoot a Highcharts script that's not rendering data when date is added and hanging the JS engine with large datasets?

  - by ylluminate

  I have a Highchart JS graph that I'm building in Rails (although I don't think Ruby has real bearing on this problem unless it's the Date output format) to which I'm adding the timestamp of each datapoint. Presently the array of floats is rendering fine without timestamps, however when I add the timestamp to the series it fails to rend. What's worse is that when the series has hundreds of entries all sorts of problems arise, not the least of which is the browser entirely hanging and requiring a force quit / kill. I'm using the following to build the array of arrays data series: series1 = readings.map{|row| [(row.date.to_i * 1000), (row.data1.to_f if BigDecimal(row.data1) != BigDecimal("-1000.0"))] } This yields a result like this: series: [{"name":"Data 1","data":[[1326262980000,1.79e-09],[1326262920000,1.29e-09],[1326262860000,1.22e-09],[1326262800000,1.42e-09],[1326262740000,1.29e-09],[1326262680000,1.34e-09],[1326262620000,1.31e-09],[1326262560000,1.51e-09],[1326262500000,1.24e-09],[1326262440000,1.7e-09],[1326262380000,1.24e-09],[1326262320000,1.29e-09],[1326262260000,1.53e-09],[1326262200000,1.23e-09],[1326262140000,1.21e-09]],"color":"blue"}] Yet nothing appears on the graph as noted. Notwithstanding, when I compare the data series in one of their very similar examples here: http://www.highcharts.com/demo/spline-irregular-time It appears that really the data series are formatted identically (except in mine I use the timestamp vs date method). This leads me to think I've got a problem with the timestamp output, but I'm just not able to figure out where / how as I'm converting the date output to an integer multipled by 1000 to convert it to milliseconds as per explained in a similar Railscasts tutorial. I would very much appreciate it if someone could point me in the right direction here as to what I may be doing wrong. What could cause no data to appear on the graph in smaller sized sets (<100 points) and when into the hundreds causes an apparent hang in the javascript engine in this case? Perhaps ultimately the key lies here as this is the entire js that's being generated and not rendering: jQuery(function() { // 1. Define JSON options var options = { chart: {"defaultSeriesType":"spline","renderTo":"chart_name"}, title: {"text":"Title"}, legend: {"layout":"vertical","style":{}}, xAxis: {"title":{"text":"UTC Time"},"type":"datetime"}, yAxis: [{"title":{"text":"Left Title","margin":10}},{"title":{"text":"Right Groups Title"},"opposite":true}], tooltip: {"enabled":true}, credits: {"enabled":false}, plotOptions: {"areaspline":{}}, series: [{"name":"Data 1","data":[[1326262980000,1.79e-08],[1326262920000,1.69e-08],[1326262860000,1.62e-08],[1326262800000,1.42e-08],[1326262740000,1.29e-08],[1326262680000,1.34e-08],[1326262620000,1.31e-08],[1326262560000,1.51e-08],[1326262500000,1.64e-08],[1326262440000,1.7e-08],[1326262380000,1.64e-08],[1326262320000,1.69e-08],[1326262260000,1.53e-08],[1326262200000,1.23e-08],[1326262140000,1.21e-08]],"color":"blue"},{"name":"Data 2","data":[[1326262980000,9.79e-09],[1326262920000,9.78e-09],[1326262860000,9.8e-09],[1326262800000,9.82e-09],[1326262740000,9.88e-09],[1326262680000,9.89e-09],[1326262620000,1.3e-06],[1326262560000,1.32e-06],[1326262500000,1.33e-06],[1326262440000,1.33e-06],[1326262380000,1.34e-06],[1326262320000,1.33e-06],[1326262260000,1.32e-06],[1326262200000,1.32e-06],[1326262140000,1.32e-06]],"color":"red"}], subtitle: {} }; // 2. Add callbacks (non-JSON compliant) // 3. Build the chart var chart = new Highcharts.StockChart(options); });

  Read the article

• Can a Highcharts range selector use non-date linear ranges?

  - by Simon

  I am using the HighStock JS lib to produce a chart that uses a linear series (not a time-series) for the xAxis. I'd still like to use the range-selector in order to zoom to pre-determined ranges within my linear series. Is this possible? For example; say my xAxis has a series: [[121,616],[122,600],[123,605],[124,585.5],[125,575.5],[126,580.5],[127,582],[128,582],[129,584],[130,583]] I'd like to use the range selector to zoom to the last n in the series.

  Read the article

• How can I populate highchart jQuery plugin dynamically from MVC action?

  - by Anders Svensson

  I'm trying out the Highcharts jQuery plugin for creating charts of data in an MVC application. But I need to get the data for the function dynamically from an Action Method. How can I do that? Taking the example from the Highcharts site (http://highcharts.com/documentation/how-to-use): var chart1; // globally available $(document).ready(function() { chart1 = new Highcharts.Chart({ chart: { renderTo: 'chart-container-1', defaultSeriesType: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }); }); How can I get the data in there dynamically from the action method? Someone suggested I might use JSon, but couldn't specify how. If this is the case, I would really appreciate a simple and specific example, because I don't know much about JSon. Any help appreciated!

  Read the article

• Highcharts removing elements

  - by Kevin Jolan

  I'm working on a new website using highchart. But i have a little issue with how it looks / is setup. I'm wondering if its possible to remove the "Tokyo, New York, Berlin, London" on the right side of the image? I would like to add a discription my self, and remove the exsisting one. Any Suggestions on how i can remove them? (But i want to keep the lines in the graph) is there any way i can modify or hide this? (it also take up unnecessary space on the website)

  Read the article

• Enormous data and PHP errors

  - by salamis

  I am currently using the following HighCharts:HighStock:Charts: http://www.highcharts.com/stock/demo/data-grouping in order to display the data returned from the server. We retrieve the data from a MySQL database and is really big. We are storing sensor metrics every 1 second. After a while we got the following error: [Wed Sep 12 00:15:56 2012] [error] [client 127.0.0.1] PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 4756882 bytes) in C:\\wamp\\www\\admin\\getTrends.php on line 156, referer: http://localhost/admin/trends.php [Wed Sep 12 00:15:56 2012] [error] [client 127.0.0.1] PHP Stack trace:, referer: http://localhost/admin/trends.php [Wed Sep 12 00:15:56 2012] [error] [client 127.0.0.1] PHP 1. {main}() C:\\wamp\\www\\admin\\getTrends.php:0, referer: http://localhost/admin/trends.php [Wed Sep 12 00:15:56 2012] [error] [client 127.0.0.1] PHP 2. getTrendsDataAI() C:\\wamp\\www\\admin\\getTrends.php:33, referer: http://localhost/admin/trends.php [Wed Sep 12 00:15:56 2012] [error] [client 127.0.0.1] PHP 3. printResults() C:\\wamp\\www\\admin\\getTrends.php:102, referer: http://localhost/admin/trends.php [Wed Sep 12 00:15:56 2012] [error] [client 127.0.0.1] PHP 4. createData() C:\\wamp\\www\\admin\\getTrends.php:230, referer: http://localhost/admin/trends.php [Wed Sep 12 00:15:56 2012] [error] [client 127.0.0.1] PHP 5. implode() C:\\wamp\\www\\admin\\getTrends.php:156, referer: http://localhost/admin/trends.php What is the best solution to return this data as JSON object to HighStocks for viewing? And how can we overcome the PHP limitation? Shall we return chunk of data each time? How do they usually present enormous amount of data to the users and creating charts and reports from this data? Another big problem that we need to overcome is that the returned JSON object is enormous. At this point is around 20-30 mbs and it will be much larger in the future. Is it ok to return this data to the user and perform everything client side? Any suggestions or thoughts welcome.

  Read the article

• using replace to produce javascript code, django

  - by durdenk

  I want to use highcharts with my django site but it requires a comlex javascript code such as below. So I wanted to get this script in my python code and replace apropriate portions then write it in my template, first question is, is this a dump way to do that for a person not knowing javascript. I can read it tough. Second question is, Why I cant replace this string. Lets say this string is a variable like this. lineChartsTemplate = """ ... ... """ if I try and do lineChartsTemplate .replace('dataCategory', dataCategory) it basically suppossed to change dataCategory text with my dataCategory variable, but no such luck. I need guidance here. thx. $(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'bar' }, xAxis: { categories: dataCategory }, yAxis: { }, legend: { layout: 'vertical', floating: true, backgroundColor: '#FFFFFF', align: 'right', verticalAlign: 'top', y: 60, x: -60 }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, plotOptions: { }, series: [{ data: dataList , name : 'Satislar'}] }); });

  Read the article

• set highchart margin

  - by user1392330

  I have built a a higcharts charts and I am displaying them one at a time on mouseover. The jquery creates a floting div (depending on the cursor) with a border line 1px solid black and then the highchart method is being called to draw the chart. The thing is that highcharts exceed and left and bottom border is not shown. I tired 'margin' : chart: { renderTo: 'graph', defaultSeriesType: 'line', zoomType: 'x', margin: [ 10, 10, 10, 10] }, and still it does the same thing.

  Read the article

• Strange result of highchart

  - by user1612334

  I use http://highcharts.com and there is really strange result. So, my data looks like: Value | Date 1507 2013-02-03 734 2013-02-02 0 2013-02-01 225 2013-01-31 *Graphic miss* 672 2013-01-30 *Graphic miss* 692 2013-01-29 *Graphic miss* <--- This value gone to 1 february 910 2013-01-28 314 2013-01-27 I miss three days (29 January, 30, 31). When i get data from database, i convert it so: var lines = []; try { jQuery.each(data, function(i, line) { var dateArr = line.date.split('-'); lines.push([ Date.UTC(dateArr[0],dateArr[1],dateArr[2]), parseInt(line.num_chips) ]); }); } catch(e) { } Why could it be so? =\

  Read the article

• Large Y-axis tickInterval in high charts does not work

  - by ckovacs

  I have a chart at this JSFiddle to demonstrate a problem where our charts are not respecting the y-axis tick interval for large values: http://jsfiddle.net/z2cDu/1/ var plots = {"usBytePlots":[[1362009600000,143663192997],[1362096000000,110184848742],[1362182400000,97694974247],[1362268800000,90764690805],[1362355200000,112436517747],[1362441600000,113563368701],[1362528000000,139579327454],[1362614400000,118406594506],[1362700800000,125366899935],[1362787200000,134189435596],[1362873600000,132873135854],[1362960000000,121002328604],[1363046400000,123138222001],[1363132800000,115667785553],[1363219200000,103746172138],[1363305600000,108602633473],[1363392000000,89133998142],[1363478400000,92170701458],[1363564800000,86696922873],[1363651200000,80980159054],[1363737600000,97604615694],[1363824000000,108011666339],[1363910400000,124419138381],[1363996800000,121704988344],[1364083200000,124337959109],[1364169600000,137495512348],[1364256000000,136017103319],[1364342400000,60867510427]],"dsBytePlots":[[1362009600000,1734982247336],[1362096000000,1471928923201],[1362182400000,1453869593201],[1362268800000,1411787942581],[1362355200000,1460252447519],[1362441600000,1595590020177],[1362528000000,1658007074783],[1362614400000,1411941908699],[1362700800000,1447659369450],[1362787200000,1643008799861],[1362873600000,1792357973023],[1362960000000,1575173242169],[1363046400000,1565139003978],[1363132800000,1549211975554],[1363219200000,1438411448469],[1363305600000,1380445413578],[1363392000000,1298319283929],[1363478400000,1194578344720],[1363564800000,1211409679299],[1363651200000,1142416351471],[1363737600000,1223822672626],[1363824000000,1267692136487],[1363910400000,1384335759541],[1363996800000,1577205919828],[1364083200000,1675715948928],[1364169600000,1517593781592],[1364256000000,1562183018457],[1364342400000,681007264598]],"aggregatedTotalBytes":43476367948896,"aggregatedUsBytes":3150320403841,"aggregatedDsBytes":40326047545055,"maxTotalBytes":328186292129,"maxTotalBitsPerSecond":30387619.641574074} ; $('#container').highcharts({ yAxis: { tickInterval: 53687091200 // 500 gigabytes. Maximum y-axis value is approx 1.8TB }, series : [ { color: 'rgba(80, 180, 77, 0.7)', type: 'areaspline', name : 'Downstream', data : plots.dsBytePlots, total: plots.aggregatedDsBytes }, { color: 'rgba(33, 143, 197, 0.7)', type: 'areaspline', name : 'Upstream', data : plots.usBytePlots, total: plots.aggregatedUsBytes }] }); In this example we are charting bandwidth utilization in bytes. The chart has a maximum value of about 1.8TB. We set the y-axis tick interval to exactly 500GB but the rendered y-axis ticks don't make any sense for the given interval.

  Read the article

• Highstock Chrome/Firefox/Opera

  - by Matthias

  Is there any particular reason that this HighStock chart: var chart; $(function() { chart = new Highcharts.StockChart({ chart: { renderTo: 'container' }, title: { text: 'Total balance over time' }, xAxis: { type: 'datetime', maxZoom: 7 * 24 * 3600000, // one week title: { text: null } }, yAxis: { title: { text: 'Balance' }, startOnTick: false, showFirstLabel: false }, tooltip: { shared: true }, series: [{ type: 'area', name: 'Account balance', pointInterval: 14 * 3600 * 1000, pointStart: Date.UTC(2012, 3, 11), data: [ 0.7809, 0.7827, 0.7848, 0.785, 0.7873, 0.7894, 0.7907, 0.7909, 0.7947, 0.7987, 0.799, 0.7927, 0.79, 0.7878, 0.7878, 0.7907, 0.7922, 0.7937, 0.786, 0.787, 0.7838, 0.7838, 0.7837, 0.7836, 0.7806, 0.7825, 0.7798, 0.777, 0.777, 0.7772, 0.7793, 0.7788, 0.7785, 0.7832, 0.7865, 0.7865, 0.7853, 0.7847, 0.7809, 0.778, 0.7799, 0.78, 0.7801, 0.7765, 0.7785, 0.7811, 0.782, 0.7835, 0.7845, 0.7844, 0.782, 0.7811, 0.7795, 0.7794, 0.7806, 0.7794, 0.7794, 0.7778, 0.7793, 0.7808, 0.7824, 0.787, 0.7894, 0.7893, 0.7882, 0.7871, 0.7882, 0.7871, 0.7878, 0.79, 0.7901, 0.7898, 0.7879, 0.7886, 0.7858, 0.7814, 0.7825, 0.7826, 0.7826, 0.786, 0.7878, 0.7868, 0.7883, 0.7893, 0.7892, 0.7876, 0.785, 0.787, 0.7873, 0.7901, 0.7936, 0.7939, 0.7938, 0.7956, 0.7975, 0.7978, 0.7972, 0.7995, 0.7995 ] }] }); }); is rendered without any problems in Opera, but not working in Chrome or Firefox? I'm also using some HighChart pie charts. Those are rendered without any issues on all browsers. All of the demos on the HighStock Demo Gallery are working without problems.

  Read the article

• Highlighting a piechart slice from an HTML element (mouseover)

  - by nickhar

  I have a series of HTML table cells with data - an example of which is: <tr id="rrow1"> <td> <a href="/electricity" class="category">Electricity</a> </td> <td> 901.471 </td> </tr> <tr id="rrow2">... <tr id="rrow3">... etc In this case, each <tr> (or hypathetically for the wider community a div/span/tr/td) is assigned a sequential id based on $rrow++; in a while loop (in PHP). I also have a Piechart using the highcharts library, where i'd like to highlight the slice (sliced: true) based upon onmouseover of particular div/span/tr/td element - in this case #rrow1 as above, but multiple/iterative elements as required and (sliced: false) onmouseout... As a simple example, I've tried accessing various derivatives of the following, but failed: $('#rrow1').mouseover(function() { chart.series[0].graph.attr('sliced', true); }); $('#rrow1').mouseout(function() { chart.series[0].graph.attr('sliced', false); }); The nearest I've found is this but bastardised at most and without success: plotOptions: { series: { mouseOver: function() { if( $('#rrow1').mouseover ) series.x = sliced: true; }, mouseOut: function() { if( $('#rrow1').mouseout ) series.x = sliced: false; } } } These are far from approaching correct and despite searching I can't find a valid/helpful example to work from or draw direction. You can view the pie chart in question on jsfiddle here.

  Read the article

• Alter highchart output to display start - end date

  - by php_d

  I currently have the following highchart which display a start date and outputs the values for the next 31 days of data. Does anyone know how I may improve on this to include and end date so that I can filter the data by smaller specific amounts? On the x-axis I am also trying to only display labels that have data attached to them and hide any others. Any help is appreciated. My code is as follows: <script type="text/javascript"> var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: '<?php echo $type ?>', x: -20 //center }, xAxis: { categories: [ <?php $start = $_POST["dateStart"]; $dates = array(); for ($i = 0, $days = date('t', strtotime($start)); $i < $days; ++$i) { $dates[] = date('Y-m-d', strtotime($start . ' + ' . $i . ' day')); } echo "'" . implode("', '", $dates) . "'"; ?> ] }, yAxis: { title: { text: 'Total Amount' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [ <?php foreach ($array as $legend => $data) { echo '{'; echo "name: '" . $legend . "',"; $values = array(); for ($i = 0; $i < $days; ++$i) { $date = date('Y-m-d', strtotime($start . ' + ' . $i . ' day')); $values[] = isset($data[$date]) ? $data[$date] : 0; } echo 'data: [' . implode(', ', $values) . '],'; echo '},'; } ?> ] }); }); Thanks

  Read the article

• Line graph disappears after new line is added

  - by tonystinge

  I am having trouble uploading a large .csv file to my HIGHCHART graph. I've been able to graph an 85KB up to 1486 lines by 9 (I) columns. Here is an example: TimeStamp Temp_1_01 Temp_1_02 Temp_2_01 Temp_2_02 Temp_3_01 Temp_3_02 Temp_4_01 Temp_4_02 5/15/2014, 3:25 408 487 63 84 67 91 63 78 5/15/2014 3:30 408 487 63 84 67 91 63 78 5/15/2014 3:35 407 489 63 84 67 91 63 78 5/15/2014 3:40 408 488 63 84 67 91 63 78 5/15/2014 3:44 408 488 63 84 67 91 63 78 ... 5/22/2014 9:40 483 421 0 93 76 95 72 89 When I add a new line the line graph disappears. Any suggestions? Here is the javascript: $.get('Dropbox/geo/sites/GC_Room/loveland.csv', function(data) { // Split the lines var lines = data.split('\n'); var i = 0; var csvData = []; // Iterate over the lines and add categories or series $.each(lines, function(lineNo, line) { csvData[i] = line.split(','); i = i + 1; }); var columns = csvData[0]; var categories = [], series = []; for(var colIndex=0,len=columns.length; colIndex<len; colIndex++) { //first row data as series's name var seriesItem= { data:[], name:csvData[0][colIndex] }; for(var rowIndex=1,rowCnt=csvData.length; rowIndex<rowCnt; rowIndex++) { //first column data as categories, if (colIndex == 0) { categories.push(csvData[rowIndex][0]); } else if(parseFloat(csvData[rowIndex][colIndex])) // <-- here { seriesItem.data.push(parseFloat(csvData[rowIndex][colIndex])); } }; //except first column if(colIndex>0)series.push(seriesItem); } // Create the chart var chart = new Highcharts.Chart( { chart: { alignTick: false, renderTo: 'LANE_METALS', type: 'line' }, title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: LANE METALS', x: -20 }, xAxis: { categories: categories, labels: { step: 200, text: 'Time', }, tickWidth: 0 }, yAxis: { title: { text: 'Temperature (\xB0C)' }, min: 0 }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'\xB0C'; } }, legend: { layout: 'vertical', //backgroundColor: '#FFFFFF', //floating: true, align: 'left', //x: 100, verticalAlign: 'top', //y: 70, borderWidth: 0 }, plotOptions: { area: { turboThreshold: 0, stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } }, series: series }); });

  Read the article

• C#JSON serialization

  - by Bridget the Midget

  I'm trying out the HighStock library for creating stock charts. To fill the chart with data, their example specifies this source. The first parameter is unixtime in milliseconds and the second parameter is the stock closing price. I don't know if this is valid json, but I would argue that the following would be a more appropriate way of writing json. [{"Closing":63.15000,"Date":1262559600000},{"Closing":64.75000,"Date":1262646000000}, ... I guess that I have no other option than to adapt to HighStocks syntax. I could solve this by looping and add correct syntax to a string, but that seems rudimentary. Would it be more wise to serialize C# objects to create my json, and if that's the case - how can I reach the syntax specified in the example? Lets just say this is my c# object: public class Quote { public double Date { get; set; } public decimal Closing { get; set; } } Am I making it unnecessary complex? Should I just format a json string?

  Read the article

• Highstock set different colors for different markers

  - by user1651804

  I am tryting to develop a chart in Highstock where each marker got an individual color. When i push my Data in an Array like this : series.data.push([ parseInt(Math.round(myDate.getTime())), parseInt(Math.round(myDate.getHours())) ]); The Data is shown correctly, but when i try to set the color within each data-object like this, it doesn't work to show points. series.data.push([ { x: parseInt(Math.round(myDate.getTime())), y: parseInt(Math.round(myDate.getHours())), marker:{fillColor: 'red'}} ]); What am i missing? Update: When i inspect it with firebug i can see that the series is set correctly within the chart object. so why does it now show up? :/

  Read the article

1 2 3  | Next Page >