w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
How can I add more time-series data after drawing a D3 line chart?
The new data you're pushing on to the end of the array is from an earlier time than the data that was there originally. Here are 10 values you push on along with the last 2 that were there previously: Thu Sep 12 2013 13:18:03 GMT-0700 (Pacific Daylight Time) Thu Sep 12 2013 13:18:04 GMT-0700 (Pacific Daylight Time) Thu Sep 12 2013 13:17:10 GMT-0700 (Pacific Daylight Time) Thu Sep 12 2013 13:17:11 GMT-0700 (Pacific Daylight Time) Thu Sep 12 2013 13:17:12 GMT-0700 (Pacific Daylight Time) Thu Sep 12 2013 13:17:13 GMT-0700 (Pacific Daylight Time) Thu Sep 12 2013 13:17:14 GMT-0700 (Pacific Daylight Time) Thu Sep 12 2013 13:17:15 GMT-0700 (Pacific Daylight Time) Thu Sep 12 2013 13:17:16 GMT-0700 (Pacific Daylight Time) Thu Sep 12 2013 13:17:17 GMT-0700 (Pacific Daylight Time) Thu Sep 12 2013 1

Categories : Javascript

d3.js Line Chart -- Need to load an arbitrary number of data series
To just process the data and assuming that date will always be present (otherwise, what will be used for the x-axis?): d3.tsv("data2.tsv", function(error, data) { //create array of all the none date keys var keyArray = d3.keys(data[0]).filter(function(key){ return key != 'date'; }); //iterate over every row from the tsv data.forEach(function(row) { //cast date as a datetime row.date = parseDate(row.date); //cast everything else as a number keyArray.forEach(function(key){ row[key] = +row[key]; }); }); ... }); To graph and color several lines w/o hard coding column names: https://gist.github.com/mbostock/3884955

Categories : Javascript

Flag a line chart series if it is over another series
This seemed to work fine for me. Sub tester() Dim co As ChartObject For Each co In ActiveSheet.ChartObjects CheckChart co.Chart Next co End Sub Sub CheckChart(cht As Chart) Dim s As Series, sForecast As Series, sShould As Series Dim i As Long 'see if we can find the required series on this chart For Each s In cht.SeriesCollection Debug.Print s.Name If s.Name = "forecast spendings" Then Set sForecast = s If s.Name = "spendings should-be" Then Set sShould = s Next s 'series located? If sShould Is Nothing Or sForecast Is Nothing Then MsgBox "required series not found!" Else 'found the series, so compare the point values 'assumes same # of points in both lines ' and same start/en

Categories : Excel

Issue with Highchart tooltips and line for series for Line Chart
Unfortunately it is known bug reported to our developers https://github.com/highslide-software/highcharts.com/issues/1687 / https://github.com/highslide-software/highcharts.com/issues/946

Categories : Highcharts

Create line chart for many series
Select ColumnsA:C, Insert > Tables - PivotTable, Pivot Chart and choose New Worksheet or Existing Worksheet to suit. Drag Day to Axis Fields (Categories), Area to Legend Fields (Series) and AVG(Time) to Σ Values. If required, left click on the contents of Σ Values and select Value Field Settings... and Sum. Right click the chart (presumably a pie) and select chart of choice via Change Chart Type... To remove references to (blank) restrict you input to the PT by clicking on the PT and PivotTable Tools > Options > Data, Change Data Source.

Categories : Excel

Add hide all series to line chart
add a button or something you like. follow the example fiddle from highcharts own. http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-hide/ var chart = $('#container').highcharts(), $button = $('#button'); $button.click(function() { var series = chart.series[0]; if (series.visible) { series.hide(); $button.html('Show series'); } else { series.show(); $button.html('Hide series'); } }

Categories : Highcharts

Highcharts column + line combination chart with multiple series. Issue aligning line over the column
What about setting the x values for those lines? http://jsfiddle.net/qPqCW/ , { name: "Revenue", data: [ {x:-0.2, y:49}, {x:0.8, y:71.5}, {x:1.8, y:106.4}], type: "line" }, , { name: "Operating Expenses", data: [ {x:.2,y:48.9}, {x:1.2, y:38.8}, {x:2.2, y:39.3}], type: "line" } To calculate the X values, I looked to the source code. The following assumes you are using the default values of groupPadding .2, and pointPadding .1. I modified the getColumnMetrics function to get the general solution. Here's what I came up with: var columnMetrics = []; for (j=0;j<index;j++) { var categoryWidth = 1, groupPadding = categoryWidth * .2,

Categories : Javascript

How to set and get line series color from WinRT XAML Toolkit chart
Trying to Bing for silverlight toolkit chart custom line color yields some potentially useful pages, like this. It should work mostly the same with the WinRT XAML Toolkit, but where they customize the Silverlight-based templates - you would need to customize the WinRT XAML Toolkit-based ones that you can either try to extract with Blend/Visual Studio designer or get the original templates from the source that you can grab from CodePlex.

Categories : Xaml

Create line chart using Google Chart API and JSON for DataTable
The problem is a very small typo. In the JSON, row should be rows. Eg, changing the example JSON to var result = { "cols":[ {"type":"string"}, {"type":"number"}], "rows":[ {"c":[{"v":"20-01-13"}, {"v":22}]}, {"c":[{"v":"21-01-13"}, {"v":24}]}, {"c":[{"v":"22-01-13"}, {"v":27}]} ]}; and your code works : Update Look at Format of the Constructor's JavaScript Literal data Parameter You need to wrap each "c"-section into brackets and also misses "v" (value indicator) for the first column. Your updated test JSON is "cols": [ {"type":"string"},{"type":"number"} ], "rows":[ {"c":"20-01-13"},{"v":35}, {"c":"21-01-13"},{"v":30} ] } giving a "can't read 0 of undefined", becuase it should be { "cols":[ {"type":"string"},{"type":"number"} ], "rows":[

Categories : Javascript

Highcharts Combination Chart: Column covering line series marker
JSFiddle Just change the order of the charts. I think thats what decides whats on top. function fill_series() { nu_series = { name: "NU", type: "column", data: nu_data, stack: 0 }; all_series[0] = nu_series; dau_series = { name: "DAU", type: "column", data: dau_data, stack: 0 }; all_series[1] = dau_series; accu_series = { name: "ACCU", type: 'spline', data: accu_data, yAxis: 1, marker: { lineWidth: 2, lineColor: Highcharts.getOptions().colors[3], fillColor: 'white' } }; all_series[2] = accu_series; }

Categories : Javascript

With nvd3.js/d3.js, how can you have a scatter or line chart with discrete/non-numeric/non-time-series X-Axis values?
The key is to use an ordinal sale for the x axis. Ordinal scales are constructed by calling d3.scale.ordinal(). The domain would be an array of your titles (you can use the native map method on your array of data to pull out the titles dynamically). The range needs to by an array of the same length as the domain array, specifying each xcoordinate in pixels that will correspond to the titles. See this example here: http://tributary.io/inlet/5788637 You can fork it and try adding a yScale (in this case it will be constructed by d3.scale.linear since it is a continous number scale) and making a y axis following a similar pattern as the x axis.

Categories : D3 Js

0 fill null values with d3 series data
D3 and NVD3 don't have a function to do this. Your best bet is to insert your missing values. Some CoffeeScript that uses some Underscore utilities, but d3 had many of the same functions, so you shouldn't need to necessarily depend on Underscore if you don't need it. First you get the list of domain values, then you insert your missing values. The method getDomainValues takes data and a dimensions (a key) and pulls all the values to get the set of domain values. If you had data like: key : a values : [ {x: 4, y:1}, {x: 5, y:1}, {x: 7, y:1} ] key : b values : [ {x: 1, y:10}, {x: 2, y:5}, {x: 3, y:0} ] It would return: [1,2,3,4,5,7] getDomainValues = (data, dimension) -> _.uniq _.flatten _.map data, (item) -> _.pluck(item.values, dimension) The method ins

Categories : Javascript

using java script to select Google chart data to change the data's series
What you want to do, is to set all zeros equal to nulls, and set the interpolateNulls:true parameter in your options when you draw your chart: // Set all zeros in our dataTable to null. var rows = data.getNumberOfRows(); var cols = data.getNumberOfColumns(); for (var i = 0; i < rows; ++i) { for (var j = 0; j < cols; ++j) { if (data.getValue(i, j) == 0) { data.setCell(i, j, null); } } } // etc.. var element = document.getElementById('visualization'); var chart = new google.visualization.LineChart(element); chart.draw(data, { interpolateNulls: true });

Categories : Javascript

Margin in chart with x, y data series
The problem is with calculated pointRange for first series - when you have only two points, for x=11 and x=31 it is assumed that minimum interval between points in that series is 20, so Highcharts will try to set interval something about 20. For such cases you need to use pointRange for example set it to 1, see: http://jsfiddle.net/ymyrA/5/

Categories : Highcharts

how to add values from a database output to the data field in Line Chart of Chart.js
First thing first You need to replace data : [0,9,0,8,56,55,40] with data : [data_array1] data_array1 is an data_string came from database, all you need to do is just convert that data array into highchart acceptable format. For that you need to fetch the data from database, implode it with comma(,), that it will return a string which will be something like this 0,9,0,8,56,55,40 Just echo it data : [data_array1]

Categories : Javascript

Series Data for column high chart
chart.addSeries({ data: [32, 43, 42], index: 0, zIndex:1 }); Live Demo

Categories : Javascript

Bar chart in pandas on time series data
You can plot a bar-plot of a time-series. Not that useful IMHO though. ts = Series(randn(20),date_range('20130101',periods=20)) ts.plot() A time-series line-plot A Bar Plot

Categories : Python

how to get tow series data in highchart guage chart
Your second series contains no data, so your cpu_chart.series[1].points is an empty array. You must use setData if data.lenght === 0, like this: var secondSeries = chart.series[1]; if (secondSeries.data.length === 0) { secondSeries.setData([newValue]); } else { secondSeries.points[0].update(newValue); } I hope that will help you.

Categories : Javascript

Google Chart API: One data series, two vertical axes
There is no way to make it happen with just one series of data. The easy way to get the two lines to align is to set the max value of the income-level axis as the income target used for the percentage (so it corresponds to 100%), and set the min value equal to the min percentage of that income level that you want to show (0% is the easiest to make work, generally). Something like this: function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Year'); data.addColumn('number', 'Income'); data.addRows([ [2000, 35000], [2001, 38000], [2002, 42000], [2003, 44000], [2004, 47000], [2005, 51000], [2006, 55000], [2007, 60000], [2008, 61000], [2009, 65000],

Categories : Javascript

Highcharts: Stacked bar chart display categories data, not series
Why don't you just use shared tooltip? Just set tooltip.shared = true and everything will work fine. See example how to format shared tooltip here.

Categories : Highcharts

High chart -fill pie data with xlst
Could you show example of your XML? Or setup jsFiddle sample? In general, your data shouldn't contain any NaN's or strings. Also, here you are setting one series: series: [{ name: 'Allowed', data:[] }] and then adding one more: options.series.push(seriesOptions); So you are covering one series by another.

Categories : Xslt

Matplotlib fill blank image line by line, when I receive data from socket
It's unnecessary to create a new image every time new data arrives from the socket. You can create a single image on initialisation, then update the values in the array from the data you are receiving: # on initialisation self.im = imshow(np.zeros((x,y)),cmap='gray',interpolation='nearest', origin='lower') ... # on update self.im.set_data(self.values) self.im.set_clim(self.values.min(),self.values.max()) self.im.figure.canvas.draw()

Categories : Python

How to read and plot time series data files as candlestick chart?
To read in this data set from the clipboard do from pandas import read_clipboard from matplotlib.dates import date2num names = ['date', 'open', 'close', 'high', 'low'] df = read_clipboard(sep=',', names=names, parse_dates=['date']) df['d'] = df.date.map(date2num) The top-level pandas.read_csv function works similarly to pandas.read_clipboard, if you have this data sitting in a CSV or some other type of character-delimited file. Now on to plotting: from matplotlib.pyplot import subplots, draw from matplotlib.finance import candlestick seconds_per_day = 60 * 60 * 24 fig, ax = subplots() candlestick(ax, df[['d', 'open', 'close', 'high', 'low']].values, width=1.0 / seconds_per_day) ax.xaxis_date() draw() gives

Categories : Python

Dashed line google chart json
Dashed lines can be achieved using the certainty role. Depending on how you want your lines dashed, you just need to add an appropriate "true/false" column with a value for each point, with the column role assigned as 'certainty' as in the below example. google.load('visualization', '1.1', {'packages':['corechart']}); google.setOnLoadCallback(drawChart_C7); function drawChart_C7() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Year'); data.addColumn('number', 'Sales'); data.addColumn({type: 'boolean', role: 'certainty'}); data.addColumn('number', 'Expenses'); data.addColumn({type: 'boolean', role: 'certainty'}); data.addRows([ ['2004', 1000, false, 400, true], ['2005', 1170, true, 460, true], ['2006', 660,

Categories : Json

Format time series data and create grouped barplot
Use this: structure(as.matrix(x[,-1]), dimnames=list(as.character(x[,1]),names(x)[-1])) Result: London New_York Moscow 31.01.2013 400 750 390 01.02.2013 350 700 300 02.02.2013 330 730 250 03.02.3013 300 650 250 OBS: using input: x <- read.table(header=TRUE,text=" Date London New_York Moscow 31.01.2013 400 750 390 01.02.2013 350 700 300 02.02.2013 330 730 250 03.02.3013 300 650 250 ")

Categories : R

Highcharts Pie chart data Format via php
The problem is your are passing your data as a String when you are using chart.series[0].setData("["+graphData+"]"); You need to set your data as an Array. You could do that by converting your String using eval: chart.series[0].setData(eval("["+graphData+"]")); You could also use jQuery to convert your String to JSON, but in that case you must use double quotes to open and close Strings: $.parseJSON("[["www.quora.com", 0.23],["www.slideshare.net", 0.25],["me", 99.52]]");

Categories : Javascript

Series Hidden when Dynamically Updating Series Type from Column to Line [Highcharts 3.0]
Just adjust the zIndex for each of the series just like you said: series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5], zIndex: 10 },{ name: 'Cleveland', data: [10, 4, 11, 14.5, 18.2, 21.5], zIndex: 20 }] See it running here.

Categories : Highcharts

Best Implementation for using Centralized Data Aggregator and WPF Toolkit Line Series
Finaly I implemented it as a Collection that is triggered by another Property which is bound to the ComboBox. The Update is just triggered when the SourceAddress corresponds to the currently displayed. It finally works like this but the major restriction is of course only having a single Source to be viewable.

Categories : Wpf

chart library to display data in a web page in given format
I'd recommend a custom made solution based on SVG. Look at jquery svg http://keith-wood.name/svg.html for a good library to have svg generated on the fly. you simply "draw" on a svg canvas... var svg = $('#svgcanvas').svg('get'); svg.circle(130, 75, 50, {fill: 'none', stroke: 'blue', strokeWidth: 3});

Categories : Javascript

How to fetch data from MySQL database table and draw a line chart on that data using Google Charts Tool?
you can't set the Google Chart data directly from the database (unless your database has a DataSource interface). Here is a question that was recently asked on our mailing list that is similar to yours, and here is an enormous thread on the same topic.

Categories : PHP

Generate (multilevel) flare.json data format from flat json
Here's one implementation, in Javascript: http://jsfiddle.net/9FqKS/ You start by creating a name-based map for easy lookup. There are a few different ways to do this - in this case, I use a .reduce method, which starts with an empty object and iterates over the data array, adding an entry for each node: // create a {name: node} map var dataMap = data.reduce(function(map, node) { map[node.name] = node; return map; }, {}); This is equivalent to: var dataMap = {}; data.forEach(function(node) { dataMap[node.name] = node; }); (I sometimes think the reduce is more elegant.) Then iteratively add each child to its parents, or to the root array if no parent is found: // create the tree array var tree = []; data.forEach(function(node) { // find parent var parent = dataMa

Categories : Javascript

Highcharts display date as series label from JSON data?
How many points do you have? If there is only a couple (~10?) you can use categories, and then result should be: new Highcharts.Chart({ xAxis: { categories: ['June', 'July' ... ] }, series: [{ data: [123, 124 ...] }, { data: [123, 124 ...] }] }); If you have more points, so it wouldn't be possible to display all categories, you need to change format from 'Week 24' or 'June' to timestamp, so something like this: new Highcharts.Chart({ xAxis: { type: 'datetime' }, series: [{ data: [[timestamp, 123], [timestamp, 124] ...] }, { data: [[timestamp, 123], [timestamp, 124] ...] }] }); Where timestamp is in milliseconds.

Categories : Highcharts

How to parse the JSON Date format from the below given json data using jquery?
The object returned is an associative array so you can access the property as follows: $.getJSON("json_data.json",function(jd){ var dates = jd["2013/02/05"][0].colour; alert(dates); }); JS Fiddle: http://jsfiddle.net/DLKfK/ On a side note, that is a pretty nasty object. I'm not sure why it needs to assign an array to the date property. If you have control over the object I would refactor it. One thing you should definitely refactor is the extra common after the array since this make the JSON invalid. { "2013/02/05": [ { "id": "84eb13cfed01764d9c401219faa56d53", "colour": "#000000", "category": "custom" } ], //this comma is invalid }

Categories : Jquery

Plot data labels in a line chart
First lets prepare the data prices<- c(100,101,102,103,104,105,108,107,106,105,104,100,98,97,94,90,88,89,89,90,91,90,92,90,94,95,90,89,84,89,80,91,94,94,95,98,103,110,112,70,65) date<- Sys.Date() -41:1 library(quantmod) data<- xts(prices,date) colnames(data) <- "price" Now we want to find local maxima minima. We'll use the ZigZag overlay to smooth the graph chart_Series(data) data$n <- 1:nrow(data) data$z <- ZigZag(data$price , change = 2 , percent = T) add_TA(data$z , on = 1 ,col = 'red' , lty = 3 , type = 'l') ex <- data[c(findPeaks(data$z) , findValleys(data$z)) - 1 , ] add_TA(ex$z , on = 1 , col = 'red' , cex = 2 , type = 'p') Now all we have left is to add the labels text(x = ex$n , y = (ex$z) * 0.99 , label = ex$price) And the result

Categories : R

Line chart alignment with different data sets
The graph is actually correct. Thanks to Lars for pointing out. December mark is beginning of December. There are data points from December 1 to 31. So the graph is drawn beyond December mark on x-axis.

Categories : D3 Js

How to structure c# poco so that it works with time series json data in Highcharts?
Because this is not proper JSON, use jsonlint or something similar before. For example proper JSON: [{ "name": "Winter 2007-2008", "data": [ [25833600000, 0 ], [27043200000, 0.6 ], [27734400000, 0.7 ], [28944000000, 0.8 ], [29548800000, 0.6 ] ] }] As you can see, changed are: name -> "name" 'Winter 2007-2008' -> "Winter 2007-2008" all Date.UTC() functions to proper numbers These numbers are values returned by Date.UTC(), so are number of milliseconds since 1970.01.01 00:00:00:000 in UTC time.

Categories : Json

How to implement tooltip for D3 line chart with data from 2 arrays?
I had a problem that might have been similar to yours, I needed to select a time based on the mouse position, this is what I did (might give you some ideas): var timeScale = d3.scale.linear() .domain([startTime.getTime(), endTime.getTime()]) .range([30, r + 10]) .clamp(true); axisOverlay.on("mousemove", mousemove) .on("touchmove", mousemove); function mousemove() { selectedTime = new Date(timeScale.invert(d3.mouse(this)[1])); }

Categories : Javascript

Column chart overlaps to one line when there's just a group of data
The problem is that each series has exactly one point, so Highcharts aren't able to calculate required space for each series. For such cases you need to use pointRange, see: http://jsfiddle.net/Fusher/EwZsS/3/ Ref: http://api.highcharts.com/highcharts#plotOptions.column.pointRange

Categories : Highcharts

Error trying to fill dropdown list with json data
This error mean that you are passing an array to your appending function. You see, version before jq1.8 can't have an array as parameter for any append function and throw this error: NotFoundError: DOM Exception 8 http://jsfiddle.net/6tW7W/ Upgrading to the newest jQuery (which would be the best move) is your solution : http://jsfiddle.net/6tW7W/1/ But if you don't want to upgrade, you have to use a loop : $.each(arr, function(i, v){ $('body').append(v) }) http://jsfiddle.net/6tW7W/2/

Categories : Jquery

d3.js can not update the chart - using json data
There are a couple of problems with your code. First, the selector var arc_group = d3.select('#'+pieId+' .sliceholder'); doesn't work because the g element with class sliceholder is a subelement of the SVG. You need var arc_group = d3.select('#'+pieId+' > .sliceholder'); Second, you can't pass in the raw data when updating, you need to process it with a pie layout first. That is, paths = arc_group.selectAll("path").data(data[0].legends); won't work, you need var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.population; }); paths = arc_group.selectAll("path").data(pie(data[0].legends)); Third, you've missed some initialisation when copying the arcTween code. You need to set the initial values for ._current: svg.selectAll(".arc")

Categories : D3 Js



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.