Graph multicolor area line [closed]

-2

i need to create graph as showed on image.

One line with color filled area,
if point value is more than zero than color of line and area is green, else red.

How can i do this? JS (some plugin?) or PHP (imagick, gd)

asked Nov 12 '18 at 8:54

Roman Huliak

closed as off-topic by ewolden, Suraj Rao, Vadim Kotov, AdrianHHH, Unheilig Nov 12 '18 at 9:53

This question appears to be off-topic. The users who voted to close gave this specific reason:

"Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – ewolden, AdrianHHH

If this question can be reworded to fit the rules in the help center, please edit the question.

Disclamer: I'm image-charts founder ( image-charts.com) . If you need to generate an image of a line graph, it's simple as a URL: image-charts.com/…

– FGRibreau
Nov 15 '18 at 12:41

add a comment |

-2

i need to create graph as showed on image.

One line with color filled area,
if point value is more than zero than color of line and area is green, else red.

How can i do this? JS (some plugin?) or PHP (imagick, gd)

asked Nov 12 '18 at 8:54

Roman Huliak

closed as off-topic by ewolden, Suraj Rao, Vadim Kotov, AdrianHHH, Unheilig Nov 12 '18 at 9:53

This question appears to be off-topic. The users who voted to close gave this specific reason:

"Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – ewolden, AdrianHHH

If this question can be reworded to fit the rules in the help center, please edit the question.

Disclamer: I'm image-charts founder ( image-charts.com) . If you need to generate an image of a line graph, it's simple as a URL: image-charts.com/…

– FGRibreau
Nov 15 '18 at 12:41

add a comment |

-2

i need to create graph as showed on image.

One line with color filled area,
if point value is more than zero than color of line and area is green, else red.

How can i do this? JS (some plugin?) or PHP (imagick, gd)

asked Nov 12 '18 at 8:54

Roman Huliak

i need to create graph as showed on image.

One line with color filled area,
if point value is more than zero than color of line and area is green, else red.

How can i do this? JS (some plugin?) or PHP (imagick, gd)

charts highcharts area

asked Nov 12 '18 at 8:54

Roman Huliak

asked Nov 12 '18 at 8:54

Roman Huliak

asked Nov 12 '18 at 8:54

Roman Huliak

asked Nov 12 '18 at 8:54

Roman Huliak

asked Nov 12 '18 at 8:54

Roman Huliak

closed as off-topic by ewolden, Suraj Rao, Vadim Kotov, AdrianHHH, Unheilig Nov 12 '18 at 9:53

This question appears to be off-topic. The users who voted to close gave this specific reason:

"Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – ewolden, AdrianHHH

If this question can be reworded to fit the rules in the help center, please edit the question.

closed as off-topic by ewolden, Suraj Rao, Vadim Kotov, AdrianHHH, Unheilig Nov 12 '18 at 9:53

This question appears to be off-topic. The users who voted to close gave this specific reason:

"Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – ewolden, AdrianHHH

If this question can be reworded to fit the rules in the help center, please edit the question.

Disclamer: I'm image-charts founder ( image-charts.com) . If you need to generate an image of a line graph, it's simple as a URL: image-charts.com/…

– FGRibreau
Nov 15 '18 at 12:41

add a comment |

Disclamer: I'm image-charts founder ( image-charts.com) . If you need to generate an image of a line graph, it's simple as a URL: image-charts.com/…

– FGRibreau
Nov 15 '18 at 12:41

Disclamer: I'm image-charts founder ( image-charts.com) . If you need to generate an image of a line graph, it's simple as a URL: image-charts.com/…

– FGRibreau
Nov 15 '18 at 12:41

add a comment |

1 Answer
1

active

oldest

votes

You can use Highcharts area series type and define negativeColor for it. Check the docs and example posted below.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', 
 chart: 
 type: 'area'
 ,
 series: [
 color: 'rgba(0, 255, 0, 0.7)',
 negativeColor: 'rgba(255, 0, 0, 0.7)',
 fillOpacity: 0.2,
 marker: 
 enabled: false
 ,
 data: [5, 3, 4, 7, 2, -3, -5, -2, -7, -4, 0, 3, 4, 2, 5, 1]
 ]
);

Demo:
https://jsfiddle.net/BlackLabel/xa91d8o7/4/

Docs:
https://www.highcharts.com/demo/area-negative
https://api.highcharts.com/highcharts/series.area

answered Nov 12 '18 at 9:36

Wojciech Chmiel

1,285129

add a comment |

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You can use Highcharts area series type and define negativeColor for it. Check the docs and example posted below.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', 
 chart: 
 type: 'area'
 ,
 series: [
 color: 'rgba(0, 255, 0, 0.7)',
 negativeColor: 'rgba(255, 0, 0, 0.7)',
 fillOpacity: 0.2,
 marker: 
 enabled: false
 ,
 data: [5, 3, 4, 7, 2, -3, -5, -2, -7, -4, 0, 3, 4, 2, 5, 1]
 ]
);

Demo:
https://jsfiddle.net/BlackLabel/xa91d8o7/4/

Docs:
https://www.highcharts.com/demo/area-negative
https://api.highcharts.com/highcharts/series.area

answered Nov 12 '18 at 9:36

Wojciech Chmiel

1,285129

add a comment |

You can use Highcharts area series type and define negativeColor for it. Check the docs and example posted below.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', 
 chart: 
 type: 'area'
 ,
 series: [
 color: 'rgba(0, 255, 0, 0.7)',
 negativeColor: 'rgba(255, 0, 0, 0.7)',
 fillOpacity: 0.2,
 marker: 
 enabled: false
 ,
 data: [5, 3, 4, 7, 2, -3, -5, -2, -7, -4, 0, 3, 4, 2, 5, 1]
 ]
);

Demo:
https://jsfiddle.net/BlackLabel/xa91d8o7/4/

Docs:
https://www.highcharts.com/demo/area-negative
https://api.highcharts.com/highcharts/series.area

answered Nov 12 '18 at 9:36

Wojciech Chmiel

1,285129

add a comment |

You can use Highcharts area series type and define negativeColor for it. Check the docs and example posted below.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', 
 chart: 
 type: 'area'
 ,
 series: [
 color: 'rgba(0, 255, 0, 0.7)',
 negativeColor: 'rgba(255, 0, 0, 0.7)',
 fillOpacity: 0.2,
 marker: 
 enabled: false
 ,
 data: [5, 3, 4, 7, 2, -3, -5, -2, -7, -4, 0, 3, 4, 2, 5, 1]
 ]
);

Demo:
https://jsfiddle.net/BlackLabel/xa91d8o7/4/

Docs:
https://www.highcharts.com/demo/area-negative
https://api.highcharts.com/highcharts/series.area

answered Nov 12 '18 at 9:36

Wojciech Chmiel

1,285129

You can use Highcharts area series type and define negativeColor for it. Check the docs and example posted below.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', 
 chart: 
 type: 'area'
 ,
 series: [
 color: 'rgba(0, 255, 0, 0.7)',
 negativeColor: 'rgba(255, 0, 0, 0.7)',
 fillOpacity: 0.2,
 marker: 
 enabled: false
 ,
 data: [5, 3, 4, 7, 2, -3, -5, -2, -7, -4, 0, 3, 4, 2, 5, 1]
 ]
);

Demo:
https://jsfiddle.net/BlackLabel/xa91d8o7/4/

Docs:
https://www.highcharts.com/demo/area-negative
https://api.highcharts.com/highcharts/series.area

answered Nov 12 '18 at 9:36

Wojciech Chmiel

1,285129

answered Nov 12 '18 at 9:36

Wojciech Chmiel

1,285129

answered Nov 12 '18 at 9:36

Wojciech Chmiel

1,285129

answered Nov 12 '18 at 9:36

Wojciech Chmiel

1,285129

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb