Search the Community

I have some issue with FusionCharts timeseries with React Rendering. I passed in the data to dataSource successfully ( see the dataStore object console), but the result is `no data to show`. Why I have the dataStore data, but the graph is not displaying?

I'll start by explaining the parameters of the intended parameters of the chart. The chart is meant to cover a 24 hour period of the current day with a column for each hour. The current time format i am using is %-d/%-m/%Y %H:%M:%S. The values entered have a time range of 00:00:00->23:00:00. The table is constructed from 4 arrays each with an entry for every hour. The empty entrys which all have a value of 0 are included in the created table. So far there have been 3 issues: The time navigator is visually out of sync with the chart ie the Graph inside it is displayed as being an hour ahead of where it is. The columns are placed an hour ahead of where they should be ie 00:00:00 would be placed at 1AM. This can be corrected using the timezone offset but that doesnt correct the next point. The column pop ups display the time as being an hour ahead of where the column is ie the column from the previous point would have a pop up saying it was 2AM. These issues don't occur if the year is set in the 1900-1915 range so I am not sure if this is a bug or I'm making a mistake somewhere. Is it possible to create a chart with a 24 hour time frame and not include the dates. A secondary question I have is how do i trigger the selectionChange event in Angular? I want to retrieve current time range of the navigator and use it to filter a table. At the moment i am making use of the chartClick and chartMouseMove events to make to achieve the intended result but they dont take into account mouse scrolling. Is is possible to use or is there another event i can use?

Is there any way to switch/flip x and y-axis in timeseries chart? E.g. y-axis represents the time, and x-axis represents the values. It will be a vertical chart instead of a horizontal one. One workaround in my mind is to rotate the entire div, but the label text will rotate too. That is not what I want. Another way is to edit the data source, but I am not sure if it will work. Thank you!

I have created a timeseries class component with the following state: this.state = { timeseriesDs: { type: "timeseries", id: "myChart", renderAt: "container", series: "Type", width: "100%", height: "95%", dataSource: { chart: { multicanvas: props.multiGrid, exportEnabled: true }, caption: { text: props.caption, }, subCaption: { text: props.subCaption, }, yaxis: this.generateYaxis(), }, }, tagList: props.tagList, schema: this.generateSchema(), }; The following function is used to change the timeseries' multicanvas property: changeType() { let timeseriesCopy = this.state.timeseriesDs; timeseriesCopy.dataSource.chart = { multicanvas: this.props.multiGrid, exportEnabled: true }; this.setState({ timeseriesDs: timeseriesCopy }); } When I use this function, everything works fine, and the chart changes from having plots for each line to only having one plot with multiple lines. This also works when changing back and forth. However, after changing using the function twice, I get these errors: Everything seemingly still works fine after these errors, but they show up again every time the changeType-function is used. How do I get rid of these pesky errors? ("react-fusioncharts": "^3.1.2", "fusioncharts": "^3.16.0")

Hello I am trying to implement "formatNumberScale" option in timeseries chart but is not working. Still showing "k" for thousands. Thanks Promise.all([ fetch('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'), fetch('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json') ]).then(function(res) { Promise.all([ res[0].json(), res[1].json() ]).then(function(res) { showChart(res[0], res[1]); }); }); function showChart(dataFetch, schemaFetch) { const dataStore = new FusionCharts.DataStore(); const dataSource = { chart: { "formatNumberScale": "0" }, caption: { text: "Sales Analysis" }, subcaption: { text: "Grocery" }, yaxis: [ { plot: { value: "Grocery Sales Value" }, format: { prefix: "$" }, title: "Sale Value" } ] }; dataSource.data = dataStore.createDataTable(dataFetch, schemaFetch); new FusionCharts({ type: "timeseries", renderAt: "chart-container", width: "100%", height: "500", dataSource: dataSource }).render(); }

Hi, I am rendering my chart on back end (VB.net), i cannot make it works on back end using --> timeSeries.AddAttribute("chart", "{theme:'candy'}") Meanwhile, i do not know how to properly define on javascript using 'beforerender' event and setChartAttribute , its still stick to fusion theme and not get the candy theme to be render out, i don't know which part is wrong. Please help urgently! setTimeout(function () { FusionCharts.items["particlecounter_1k_chart"].addEventListener("beforerender", function (ev) { FusionCharts.items["particlecounter_1k_chart"].setChartAttribute("theme", "candy"); console.log(ev); }); }, 1000); Regards, Hooi Thin

hello. How to display a tooltip with daily values instead of start-end values when hovering over the chart? Is there a way to display the date unit description of photo 11.png on photo 22.png?

Im currently developing a dashboard with timeseries data, i retrieve the data from my laravel controller. But now im running into the following issue: fusioncharts.js:formatted:9100 Uncaught RangeError: Maximum call stack size exceeded at Function.isArray (<anonymous>) Its quite hard to find a awnser online so that why i came here. This is the code i use for creating the chart. Promise.all([ @json($array), @json($schema) ]).then(function(res) { const data = res[0]; const schema = res[1]; const dataStore = new FusionCharts.DataStore(); dataStore.data = dataStore.createDataTable(data, schema); new FusionCharts({ type: "timeseries", renderAt: "graph-container", width: "100%", height: "400", dataSource: { data: dataStore, chart:{ "theme": "fusion" }, caption: { text: "Products on pallet." }, subcaption: { text: "Lorem Ipsum...." }, yaxis: [ { plot: [ { value: "Products", connectnulldata: true } ], title: "Products on pallet", min: "130" } ] } }).render(); }); Can someone explain why the error occurs?

Hi everyone, I am new to fusionChart and am taking back a developpement done by one of my colleague. He previsouly used a mspline type of chart which I transformed into a timeserie chart. In his previous chart, he was using trendlines which were shown successfully on the graph. I have not changed the code of the generation of the trendlines but they do not appear in my timeserie chart anymore. Would anyone know why? Maybe trendlines are not compatible with timeseries charts? Thanks for your help.

In the following jsfiddle, why i can't zoom into the second granularity, even though my data source has a data point per second, and I've configured binning for seconds. https://jsfiddle.net/s87ytp34/

I'm using the time series plots with Vue and when the graph loads there are lines but when I zoom in to a certain magnification, the lines disappear. I'm not sure if this is a bug or a customisation trick that I'm not seeing. The following is the configuration. Please help. ``` { width: '700', height: '600', type: 'timeseries', dataFormat: 'json', dataSource: { chart: { multiCanvas: true, theme: 'gammel' }, navigator: { enabled: 0 }, data: fusionTable, caption: { text: 'MVP' }, subcaption: { text: 'Giannis' }, series: 'Player', yAxis: [{ plot: { value: 'Yes', type: 'line' }, format: { round: 0 }, // min: '0', // max: '1000', title: '', orientation: 'right', showGridband: '1', style: { line: { 'stroke-width': '3' }, // Style 'grid-band': { fill: '#f5f5ef' } } }] } } ```

After navigating in Angular, the zoom area seems to be miscalculated.

Hi community I'm using the integration angular-fusioncharts v3.0.1 with our project which is developed with angular version 4, and it presents an issue when the timeseries chart (Fusiontime) is rendered on safari browser. The line is out of the x-axis when the user handle the time navigator, and also the time navigator has a background color gray. I test in safari versions, 12, 11.1 and 10.1, MacOS versions Mojave, Sierra and High Sierra We have implemented fusioncharts latest version 3.11.4 which contains fusiontime latest version v1 For more specifics, our project is built with angular v4.3.1 I'll very glad to you could support me, Thank you Greetings