flapane

February 20, 2015

Thanks, it work great.

My plots are enclosed in a

function loadChart(){}
window.onload

function in order to avoid adding the onload attribute in the <body> tag, which is something I can't do it.

Now I've moved the variables right before the loadChart() function.

I didn't pay attention to the fact that the variable was inside a function, I'm not by any means a js expert.

Thanks

February 19, 2015

I'm using the last jchartfx build.

I thought that chart1 stood for the div id and not the result of cfx.Chart().

I tried using the actual chart name, from

var chartok = new cfx.Chart();

but I got a:

chartok is not defined

error.

February 19, 2015

Thanks for your fast answer.

I tried, but Firebug console throws an error:

TypeError: ChartDiv1.doUpdate is not a function

I wonder if the function is obfuscated in the most recent version of jchartfx?

February 19, 2015

My websites features jQuery and a responsive layout.

How can I make the plot automatically resize itself?

<div id="ChartDiv1" style="width:99%;height:400px"></div>

This is the only element of the website that doesn't resize dinamically whenever I change the size of the browser's window.

November 9, 2014

Thanks, it did the trick.

November 5, 2014

Hi,

I've noticed that the tooltips don't appear on single-serie line charts if I disable the shadows

series1.setGallery(cfx.Gallery.Lines);
series1.getGalleryAttributes().setTemplate("LineBasic");

This happens on both IE10 and FE33.

On the other hand, while working without tooltips on IE and FF, the code totally fails on jsfiddle.

Any hints?

Thanks

			var mychart = new cfx.Chart();
			var titles = mychart.getTitles();
			var title = new cfx.TitleDockable();
			title.setText("title");
			titles.add(title);
            mychart.getData().setSeries(1);
			mychart.getAxisY().getDataFormat().setDecimals(1);
			mychart.getLegendBox().setDock(cfx.DockArea.Bottom);
            var series1 = mychart.getSeries().getItem(0);

            var data = [
            { "Anno": "2000", "% value": 0.32 },
			{ "Anno": "2001", "% value": 5.8 },
			{ "Anno": "2002", "% value": 9.3 },
			{ "Anno": "2003", "% value": 7.1 },
			{ "Anno": "2004", "% value": 7.4 },
			{ "Anno": "2005", "% value": 7.4 },
			{ "Anno": "2006", "% value": 8.9 },
			{ "Anno": "2007", "% value": 11.5 },
			{ "Anno": "2008", "% value": 13.95 },
			{ "Anno": "2009", "% value": 18.54 },
			{ "Anno": "2010", "% value": 17.39 },
			{ "Anno": "2011", "% value": 18.05 },
			{ "Anno": "2012", "% value": 21.25 },
			{ "Anno": "2013", "% value": 20.74 },
            ];
            mychart.setDataSource(data);
            var divHolder = document.getElementById('ChartDiv1');
			//series1.setGallery(cfx.Gallery.Lines);
			//series1.getGalleryAttributes().setTemplate("LineBasic");
			mychart.create(divHolder);

April 7, 2014

Thanks. In the meanwhile, I'd better disable shadows.

Desktop.zip

April 7, 2014

Hello,

thank you so much for your answer. I appreciate the fact that you'll consider the tooltip feature request.

You're right, the shadow looks ok with IE11. It's really nice.

However, I took the screenshoot using FF28 (Win 7x64). I wonder if FF is the culprit.

Source code: http://pastebin.com/pDLKg7a2

April 7, 2014

Hi,

I've searched through examples, but I couldn't find a solution.

How do I remove the (don't get me wrong) ugly shadow that appears if I switch from coreBasic to coreVector?

How can I dinamically sort the y-axis values in the tooltip, so that they are always displayed from the smallest to the biggest value?

Thanks in advance

April 4, 2014

Fixed.

Let $arrData be the 2-dim php array, "Amgle of Attack" the x value and "Lift coefficient" the y value:

$liftcurve_plot[$i] = "{\"Angle of Attack\": \"".$arrData[$i][1]."\", \"Lift coefficient\": ".$arrData[$i][2]."}"; //plot

Then:

var data = [

                <?php echo implode($liftcurve_plot, ','); ?>

                ];

Et voil

April 3, 2014

Hi,

my PHP script generates a bi-dimensional array.

Jchartfx uses JSON as main way to populate graphs, I used json_encode php() function.

The result is:

{"-2":{"Angle of Attack":-2,"Lift coefficient":-0.092},"-1":{"Angle of

Attack":-1,"Lift coefficient":0.019},"0":{"Angle of Attack":0,"Lift

coefficient":0.131},"1":{"Angle of Attack":1,"Lift

coefficient":0.241},"2":{"Angle of Attack":2,"Lift

coefficient":0.353},"3":{"Angle of Attack":3,"Lift

coefficient":0.464},"4":{"Angle of Attack":4,"Lift

coefficient":0.574},"5":{"Angle of Attack":5,"Lift

coefficient":0.686},"6":{"Angle of Attack":6,"Lift

coefficient":0.797},"7":{"Angle of Attack":7,"Lift

coefficient":0.908},"8":{"Angle of Attack":8,"Lift

coefficient":1.019},"9":{"Angle of Attack":9,"Lift

coefficient":1.131},"10":{"Angle of Attack":10,"Lift

coefficient":1.241},"11":{"Angle of Attack":11,"Lift

coefficient":1.353},"12":{"Angle of Attack":12,"Lift

coefficient":1.464},"13":{"Angle of Attack":13,"Lift

coefficient":1.575}}

Let's put it in a more readable way:

Array

(

[-2] => Array

(

[Angle of Attack] => -2

[Lift coefficient] => -0.092

)

[-1] => Array

(

[Angle of Attack] => -1

[Lift coefficient] => 0.019

)

[0] => Array

(

[Angle of Attack] => 0

[Lift coefficient] => 0.131

)

...up to the N-th element of the array.

How do I dinamically pass the JSON bi-dimensional array to jchartfx, which uses js scripts?

var data = [

{ "Angle of Attack": "xxx", "Lift coefficient": yyy },

{ "Angle of Attack": "xxx", "Lift coefficient": yyy } ];

liftcurve.setDataSource(data);

I wonder if saving the JSON bi-dimensional array to a file and then loading the same JSON file with jchartfx would do the trick.

However, I couldn't understand how to use the jquery example described at: http://support.softwarefx.com/jChartFX/article/2601043#fb9ec7bf-1b86-e211-84a5-0019b9e6b500

$.ajax({

url

: ("/services/SamplesService.asmx/jChartFXDataSvc"),

data

: "{'year':'2011'}",

type

: "POST",

contentType

: "application/json; charset=utf-8",

dataType

: "json",

success

: function (result) {

chart1

.setDataSource(result.d);

},

error

: function (xhr, txt, err) {

alert

("error connecting to data: " + txt); }

});

Thanks in advance

March 21, 2014

Juan, than you so much for your answer.

Needless to say, it works great.

March 11, 2014

Hi, let's say I have a chart with three different series, one in the 0-100 range and two in the 10000-50000 range:

http://jsfiddle.net/YQby7/69/

           chartnaplon = new cfx.Chart();

            var titles = chartnaplon.getTitles();

            var title = new cfx.TitleDockable();

            title.setText("Title");

            titles.add(title);

            chartnaplon.getData().setSeries(3);

            chartnaplon.getAxisY().setMin(0);

            chartnaplon.getAxisY().setMax(500000);

            chartnaplon.getLegendBox().setDock(cfx.DockArea.Bottom);

            var series1 = chartnaplon.getSeries().getItem(0);

            var series2 = chartnaplon.getSeries().getItem(1);

            var series3 = chartnaplon.getSeries().getItem(2);

            series1.setGallery(cfx.Gallery.Lines);

            series2.setGallery(cfx.Gallery.Lines);

            series3.setGallery(cfx.Gallery.Lines);

            

            var data = [

          { "Year": "1983", "SeriesA": 182437, "SeriesB": 0, "SeriesC": 0 },

            { "Year": "1993", "SeriesA": 23, "SeriesB": 39971, "SeriesC": 0 },

            { "Year": "2003", "SeriesA": 45, "SeriesB": 15572, "SeriesC": 27712 },

            { "Year": "2004", "SeriesA": 54, "SeriesB": 17737, "SeriesC": 31559 },

            { "Year": "2005", "SeriesA": 48, "SeriesB": 18765, "SeriesC": 25900 },

            { "Year": "2006", "SeriesA": 4, "SeriesB": 31368, "SeriesC": 28900 },

            { "Year": "2007", "SeriesA": 44, "SeriesB": 25184, "SeriesC": 28900 },

            { "Year": "2008", "SeriesA": 42, "SeriesB": 22869, "SeriesC": 28800 },

            { "Year": "2009", "SeriesA": 45, "SeriesB": 25074, "SeriesC": 23600 },

            { "Year": "2010", "SeriesA": 5, "SeriesB": 27459, "SeriesC": 26500 },

            { "Year": "2011", "SeriesA": 51, "SeriesB": 29687, "SeriesC": 31000 },

            { "Year": "2012", "SeriesA": 5, "SeriesB": 30057, "SeriesC": 30400 },

            { "Year": "2013", "SeriesA": 49, "SeriesB": 31427, "SeriesC": 35670 }

            ];

            chartnaplon.setDataSource(data);

            var divHolder = document.getElementById('ChartDiv1');

            chartnaplon.create(divHolder);

How can I set different a scale for Serie A, and a second scale for Series B and C?

I tried to check jchartfx demos, but to be honest I haven't been able to adapt the examples to my chart.

Thanks in advance

March 3, 2014

Hi,

I've just installed jchartfx and its ease of use and learning curve are awesome.

I enclosed the charts in a few DIVs:

<div id="ChartDiv2" style="width:99%;height:400px"></div><br />

They look OK on a computer. See the demo page: http://www.flapane.com/stats_aeroporto_capodichino.php

However, I noticed that if the title is long and if you see the charts on a smartphone, a part of the title remains hidden, as shown in this screenshoot:

I tried this CSS rule, without luck:

.jchartfx .Title {

overflow:hidden;

width:19%;

}

Any hints?

Thanks

Sign In

flapane

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by flapane

Dynamic resize of the plot div

Dynamic resize of the plot div

Dynamic resize of the plot div

Dynamic resize of the plot div

Shadows disabled: tooltips not appearing on single serie line chart

Shadows disabled: tooltips not appearing on single serie line chart

Remove line shadow and sort values in the tooltips

Remove line shadow and sort values in the tooltips

Remove line shadow and sort values in the tooltips

Use json data from a dynamic PHP array

Use json data from a dynamic PHP array

Double y axis scale

Double y axis scale

Title overflow

Browse

Activity