@domoinc/multiline-chart
Version:
MultiLineChart - Domo Widget
116 lines (110 loc) • 6.35 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>D3.chart Widget Boilerplate</title>
<!--<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<style type="text/css">
body, text {
font-family: 'Open Sans';
}
</style>-->
<script src="/api.js"></script>
<script src="/AutoWidgets/AutoWidgets.js"></script>
<script src="testbuild.js"></script>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="792px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<g id="MyDomoMultiLineChart">
<g id="DomoMultiLineChart">
<g id="baseGroup">
<g id="gYAxis">
<g transform="translate(0,0)">
<g>
<g transform="translate(0,250)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="307" y2="33"/>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="font-family:'OpenSans'; font-size:11;">0</text>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">0</text>
</g>
<g transform="translate(0,218.72488105678048)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="307" y2="33"/>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="font-family:'OpenSans'; font-size:11;">1</text>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">1</text>
</g>
<g transform="translate(0,187.44976211356098)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="307" y2="33"/>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="font-family:'OpenSans'; font-size:11;">2</text>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">2</text>
</g>
<g transform="translate(0,156.17464317034148)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="307" y2="33"/>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="font-family:'OpenSans'; font-size:11;">3</text>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">3</text>
</g>
<g transform="translate(0,124.89952422712194)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="307" y2="33"/>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="font-family:'OpenSans'; font-size:11;">4</text>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">4</text>
</g>
<g transform="translate(0,93.62440528390243)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="307" y2="33"/>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="font-family:'OpenSans'; font-size:11;">5</text>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">5</text>
</g>
<g transform="translate(0,62.34928634068294)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="307" y2="33"/>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="font-family:'OpenSans'; font-size:11;">6</text>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">6</text>
</g>
<g transform="translate(0,31.074167397463412)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="307" y2="33"/>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="font-family:'OpenSans'; font-size:11;">7</text>
<text transform="matrix(1 0 0 1 47.7104 36.52)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">7</text>
</g>
<path style="fill:none;stroke:#E4E5E5;" d="M57,33L57,33v250l0,0"/>
</g>
</g>
</g>
<g id="gLine">
<g>
<path style="fill:none;stroke:#73B0D7;" d="M57,33l83.333,71.962l83.333,82.855L307,189.026"/>
<path style="fill:none;stroke:#BBE491;" d="M57,156.227l83.333-111.104l83.333,123.168L307,276.059"/>
<path style="fill:none;stroke:#FB8D34;" d="M57,122.825l83.333,19.446l83.333,22.076L307,119.459"/>
</g>
</g>
<g id="gXAxis">
<g transform="translate(0,250)">
<g>
<g transform="translate(0,0)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="57" y2="39"/>
<text transform="matrix(1 0 0 1 53.8552 49.81)" style="font-family:'OpenSans'; font-size:11;">1</text>
<text transform="matrix(1 0 0 1 53.8552 49.81)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">1</text>
</g>
<g transform="translate(83.33333333333333,0)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="57" y2="39"/>
<text transform="matrix(1 0 0 1 53.8552 49.81)" style="font-family:'OpenSans'; font-size:11;">2</text>
<text transform="matrix(1 0 0 1 53.8552 49.81)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">2</text>
</g>
<g transform="translate(166.66666666666666,0)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="57" y2="39"/>
<text transform="matrix(1 0 0 1 53.8552 49.81)" style="font-family:'OpenSans'; font-size:11;">3</text>
<text transform="matrix(1 0 0 1 53.8552 49.81)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">3</text>
</g>
<g transform="translate(250,0)">
<line style="fill:none;stroke:#E4E5E5;" x1="57" y1="33" x2="57" y2="39"/>
<text transform="matrix(1 0 0 1 53.8552 49.81)" style="font-family:'OpenSans'; font-size:11;">4</text>
<text transform="matrix(1 0 0 1 53.8552 49.81)" style="fill:none;stroke:#8A8D8E; font-family:'OpenSans'; font-size:11;">4</text>
</g>
<path style="fill:none;stroke:#E4E5E5;" d="M57,39v-6h250v6"/>
</g>
</g>
</g>
</g>
<rect id="chartBounds" x="57" y="33" style="fill:none;" width="250" height="250"/>
</g>
</g>
</svg>
<script src="/jsDomoAutoWiget.js"></script>
</body>
</html>