Scribd
Upload
49 views4 pages

Https

This document provides a tutorial on creating a multi-series chart using amCharts with shared tooltips and colored bullets. It includes HTML and JavaScript code to set up the chart, define data, create axes, and configure series with tooltips. The tutorial emphasizes customization options for tooltips and bullet styles in the chart.

Uploaded by

bon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
49 views4 pages

Https

This document provides a tutorial on creating a multi-series chart using amCharts with shared tooltips and colored bullets. It includes HTML and JavaScript code to set up the chart, define data, create axes, and configure series with tooltips. The tutorial emphasizes customization options for tooltips and bullet styles in the chart.

Uploaded by

bon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

[Link]

com/docs/v4/tutorials/multi-series-shared-tooltip-with-colored-bullets/

Html

<script src="//[Link]/lib/4/[Link]"></script>

<script src="//[Link]/lib/4/[Link]"></script>

<script src="//[Link]/lib/4/themes/[Link]"></script>

<div id="chartdiv"></div>

Javascript

// Create chart instance

var chart = [Link]("chartdiv", [Link]);

// Add data

[Link] = [{

"date": new Date(2018, 0, 1),

"value": 450,

"value2": 362,

"value3": 699

}, {

"date": new Date(2018, 0, 2),

"value": 269,

"value2": 450,

"value3": 841

}, {

"date": new Date(2018, 0, 3),

"value": 700,

"value2": 358,

"value3": 699
}, {

"date": new Date(2018, 0, 4),

"value": 490,

"value2": 367,

"value3": 500

}, {

"date": new Date(2018, 0, 5),

"value": 500,

"value2": 485,

"value3": 369

}, {

"date": new Date(2018, 0, 6),

"value": 550,

"value2": 354,

"value3": 250

}, {

"date": new Date(2018, 0, 7),

"value": 420,

"value2": 350,

"value3": 600

}];

// Create axes

var dateAxis = [Link](new [Link]());

[Link] = 0;

[Link] = 30;

var valueAxis = [Link](new [Link]());

// Create series

function createSeries(field, name) {


var series = [Link](new [Link]());

[Link] = field;

[Link] = "date";

[Link] = name;

[Link] = "{dateX}: [b]{valueY}[/]";

[Link] = 2;

// Set up tooltip

[Link]("tooltipText", function(ev) {

var text = "[bold]{dateX}[/]\n"

[Link](function(item) {

text += "[" + [Link] + "]●[/] " + [Link] + ": {" + [Link] + "}\n";

});

return text;

});

[Link] = false;

[Link] = [Link]("#fff");

[Link] = [Link]("#00");

var bullet = [Link](new [Link]());

[Link] = [Link]("#fff");

[Link] = 2;

return series;

createSeries("value", "Series #1");

createSeries("value2", "Series #2");

createSeries("value3", "Series #3");


[Link] = new [Link]();

[Link] = new [Link]();

[Link] = 0;

You might also like