Hi David,

Regarding #1, it looks like I made a mistake when transcribing the "labels" 
object.  I updated the gist 
<https://gist.github.com/typpo/f7ada53b1d2a3bf2ed0f1ff7446fc6f5> and you 
can see the result here 
<https://quickchart.io/chart?w=300&height=50&devicePixelRatio=1&bkg=white&c={%0A%20
 
"type"%3A "line"%2C%0A%20 "data"%3A {%0A%20%20%20 "labels"%3A [ ""%2C ""%2C 
""%2C ""%2C ""%2C ""%2C ""%2C "" ]%2C%0A%20%20%20 "datasets"%3A 
[%0A%20%20%20%20%20 {%0A%20%20%20%20%20%20%20 "label"%3A 
"comments"%2C%0A%20%20%20%20%20%20%20 "borderColor"%3A 
"blue"%2C%0A%20%20%20%20%20%20%20 "yAxisID"%3A 
"A"%2C%0A%20%20%20%20%20%20%20 "data"%3A [ 0%2C 1%2C 1%2C 1%2C 2%2C 3%2C 
4%2C 4 ]%2C%0A%20%20%20%20%20%20%20 "fill"%3A 
false%2C%0A%20%20%20%20%20%20%20 "borderWidth"%3A 1%0A%20%20%20%20%20 
}%2C%0A%20%20%20%20%20 {%0A%20%20%20%20%20%20%20 "label"%3A 
"retweets"%2C%0A%20%20%20%20%20%20%20 "borderColor"%3A 
"green"%2C%0A%20%20%20%20%20%20%20 "backgroundColor"%3A 
"%23ff8c00"%2C%0A%20%20%20%20%20%20%20 "pointBorderColor"%3A 
"%23ff8c00"%2C%0A%20%20%20%20%20%20%20 "yAxisID"%3A 
"B"%2C%0A%20%20%20%20%20%20%20 "data"%3A [ 80%2C 261%2C 357%2C 475%2C 
501%2C 514%2C 527%2C 535 ]%2C%0A%20%20%20%20%20%20%20 "pointRadius"%3A [ 
0%2C 0%2C 5%2C 0%2C 0%2C 0%2C 0%2C 0 ]%2C%0A%20%20%20%20%20%20%20 "fill"%3A 
false%2C%0A%20%20%20%20%20%20%20 "borderWidth"%3A 1%0A%20%20%20%20%20 
}%0A%20%20%20 ]%0A%20 }%2C%0A%20 "options"%3A {%0A%20%20%20 "legend"%3A 
{%0A%20%20%20%20%20 "position"%3A "right"%2C%0A%20%20%20%20%20 "labels"%3A 
{%0A%20%20%20%20%20%20%20 "boxWidth"%3A 5%2C%0A%20%20%20%20%20%20%20 
"fontSize"%3A 8%2C%0A%20%20%20%20%20%20%20 "padding"%3A 5%0A%20%20%20%20%20 
}%0A%20%20%20 }%2C%0A%20%20%20 "layout"%3A {%0A%20%20%20%20%20 "padding"%3A 
{%0A%20%20%20%20%20%20%20 "bottom"%3A -20%0A%20%20%20%20%20 }%0A%20%20%20 
}%2C%0A%20%20%20 "elements"%3A {%0A%20%20%20%20%20 "point"%3A 
{%0A%20%20%20%20%20%20%20 "radius"%3A 0%0A%20%20%20%20%20 }%0A%20%20%20 
}%2C%0A%20%20%20 "scales"%3A {%0A%20%20%20%20%20 "xAxes"%3A 
[%0A%20%20%20%20%20%20%20 {%0A%20%20%20%20%20%20%20%20%20 "gridLines"%3A 
{%0A%20%20%20%20%20%20%20%20%20%20%20 "color"%3A 
"transparent"%0A%20%20%20%20%20%20%20%20%20 }%0A%20%20%20%20%20%20%20 
}%0A%20%20%20%20%20 ]%2C%0A%20%20%20%20%20 "yAxes"%3A 
[%0A%20%20%20%20%20%20%20 {%0A%20%20%20%20%20%20%20%20%20 "id"%3A 
"A"%2C%0A%20%20%20%20%20%20%20%20%20 "position"%3A 
"left"%2C%0A%20%20%20%20%20%20%20%20%20 "gridLines"%3A 
{%0A%20%20%20%20%20%20%20%20%20%20%20 "color"%3A 
"transparent"%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "tickMarkLength"%3A 
5%0A%20%20%20%20%20%20%20%20%20 }%2C%0A%20%20%20%20%20%20%20%20%20 
"ticks"%3A {%0A%20%20%20%20%20%20%20%20%20%20%20 "min"%3A 
0%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "max"%3A 
6%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "maxTicksLimit"%3A 
1%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "precision"%3A 
0%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "fontSize"%3A 
8%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "fontColor"%3A 
"blue"%2C%0A%20%20%20%20%20%20%20%20%20 }%0A%20%20%20%20%20%20%20 
}%2C%0A%20%20%20%20%20%20%20 {%0A%20%20%20%20%20%20%20%20%20 "id"%3A 
"B"%2C%0A%20%20%20%20%20%20%20%20%20 "position"%3A 
"right"%2C%0A%20%20%20%20%20%20%20%20%20 "gridLines"%3A 
{%0A%20%20%20%20%20%20%20%20%20%20%20 "color"%3A 
"transparent"%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "tickMarkLength"%3A 
5%0A%20%20%20%20%20%20%20%20%20 }%2C%0A%20%20%20%20%20%20%20%20%20 
"ticks"%3A {%0A%20%20%20%20%20%20%20%20%20%20%20 "min"%3A 
0%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "max"%3A 
535%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "maxTicksLimit"%3A 
1%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "fontSize"%3A 
8%2C%0A%20%20%20%20%20%20%20%20%20%20%20 "fontColor"%3A 
"green"%2C%0A%20%20%20%20%20%20%20%20%20 }%0A%20%20%20%20%20%20%20 
}%0A%20%20%20%20%20 ]%0A%20%20%20 }%2C%0A%20%20%20 "annotation"%3A 
{%0A%20%20%20%20%20 "annotations"%3A [%0A%20%20%20%20%20%20%20 
{%0A%20%20%20%20%20%20%20%20%20 "type"%3A 
"box"%2C%0A%20%20%20%20%20%20%20%20%20 "yScaleID"%3A 
"A"%2C%0A%20%20%20%20%20%20%20%20%20 "yMin"%3A 
0%2C%0A%20%20%20%20%20%20%20%20%20 "yMax"%3A 
3%2C%0A%20%20%20%20%20%20%20%20%20 "backgroundColor"%3A 
"%23E0E0FF66"%2C%0A%20%20%20%20%20%20%20%20%20 "borderColor"%3A 
"transparent"%0A%20%20%20%20%20%20%20 }%0A%20%20%20%20%20 ]%0A%20%20%20 
}%0A%20 }%0A}>:

[image: 
https://quickchart.io/chart?w=300&height=50&devicePixelRatio=1&bkg=white&c={%0A%20%20%22type%22%3A%20%22line%22%2C%0A%20%20%22data%22%3A%20{%0A%20%20%20%20%22labels%22%3A%20[%20%22%22%2C%20%22%22%2C%20%22%22%2C%20%22%22%2C%20%22%22%2C%20%22%22%2C%20%22%22%2C%20%22%22%20]%2C%0A%20%20%20%20%22datasets%22%3A%20[%0A%20%20%20%20%20%20{%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22comments%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22blue%22%2C%0A%20%20%20%20%20%20%20%20%22yAxisID%22%3A%20%22A%22%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20[%200%2C%201%2C%201%2C%201%2C%202%2C%203%2C%204%2C%204%20]%2C%0A%20%20%20%20%20%20%20%20%22fill%22%3A%20false%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%201%0A%20%20%20%20%20%20}%2C%0A%20%20%20%20%20%20{%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22retweets%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22green%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22%23ff8c00%22%2C%0A%20%20%20%20%20%20%20%20%22pointBorderColor%22%3A%20%22%23ff8c00%22%2C%0A%20%20%20%20%20%20%20%20%22yAxisID%22%3A%20%22B%22%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20[%2080%2C%20261%2C%20357%2C%20475%2C%20501%2C%20514%2C%20527%2C%20535%20]%2C%0A%20%20%20%20%20%20%20%20%22pointRadius%22%3A%20[%200%2C%200%2C%205%2C%200%2C%200%2C%200%2C%200%2C%200%20]%2C%0A%20%20%20%20%20%20%20%20%22fill%22%3A%20false%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%201%0A%20%20%20%20%20%20}%0A%20%20%20%20]%0A%20%20}%2C%0A%20%20%22options%22%3A%20{%0A%20%20%20%20%22legend%22%3A%20{%0A%20%20%20%20%20%20%22position%22%3A%20%22right%22%2C%0A%20%20%20%20%20%20%22labels%22%3A%20{%0A%20%20%20%20%20%20%20%20%22boxWidth%22%3A%205%2C%0A%20%20%20%20%20%20%20%20%22fontSize%22%3A%208%2C%0A%20%20%20%20%20%20%20%20%22padding%22%3A%205%0A%20%20%20%20%20%20}%0A%20%20%20%20}%2C%0A%20%20%20%20%22layout%22%3A%20{%0A%20%20%20%20%20%20%22padding%22%3A%20{%0A%20%20%20%20%20%20%20%20%22bottom%22%3A%20-20%0A%20%20%20%20%20%20}%0A%20%20%20%20}%2C%0A%20%20%20%20%22elements%22%3A%20{%0A%20%20%20%20%20%20%22point%22%3A%20{%0A%20%20%20%20%20%20%20%20%22radius%22%3A%200%0A%20%20%20%20%20%20}%0A%20%20%20%20}%2C%0A%20%20%20%20%22scales%22%3A%20{%0A%20%20%20%20%20%20%22xAxes%22%3A%20[%0A%20%20%20%20%20%20%20%20{%0A%20%20%20%20%20%20%20%20%20%20%22gridLines%22%3A%20{%0A%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22transparent%22%0A%20%20%20%20%20%20%20%20%20%20}%0A%20%20%20%20%20%20%20%20}%0A%20%20%20%20%20%20]%2C%0A%20%20%20%20%20%20%22yAxes%22%3A%20[%0A%20%20%20%20%20%20%20%20{%0A%20%20%20%20%20%20%20%20%20%20%22id%22%3A%20%22A%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%22left%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22gridLines%22%3A%20{%0A%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22transparent%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22tickMarkLength%22%3A%205%0A%20%20%20%20%20%20%20%20%20%20}%2C%0A%20%20%20%20%20%20%20%20%20%20%22ticks%22%3A%20{%0A%20%20%20%20%20%20%20%20%20%20%20%20%22min%22%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22max%22%3A%206%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22maxTicksLimit%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22precision%22%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22fontSize%22%3A%208%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22fontColor%22%3A%20%22blue%22%2C%0A%20%20%20%20%20%20%20%20%20%20}%0A%20%20%20%20%20%20%20%20}%2C%0A%20%20%20%20%20%20%20%20{%0A%20%20%20%20%20%20%20%20%20%20%22id%22%3A%20%22B%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%22right%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22gridLines%22%3A%20{%0A%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22transparent%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22tickMarkLength%22%3A%205%0A%20%20%20%20%20%20%20%20%20%20}%2C%0A%20%20%20%20%20%20%20%20%20%20%22ticks%22%3A%20{%0A%20%20%20%20%20%20%20%20%20%20%20%20%22min%22%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22max%22%3A%20535%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22maxTicksLimit%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22fontSize%22%3A%208%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22fontColor%22%3A%20%22green%22%2C%0A%20%20%20%20%20%20%20%20%20%20}%0A%20%20%20%20%20%20%20%20}%0A%20%20%20%20%20%20]%0A%20%20%20%20}%2C%0A%20%20%20%20%22annotation%22%3A%20{%0A%20%20%20%20%20%20%22annotations%22%3A%20[%0A%20%20%20%20%20%20%20%20{%0A%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22box%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22yScaleID%22%3A%20%22A%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22yMin%22%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%22yMax%22%3A%203%2C%0A%20%20%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22%23E0E0FF66%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22transparent%22%0A%20%20%20%20%20%20%20%20}%0A%20%20%20%20%20%20]%0A%20%20%20%20}%0A%20%20}%0A}]

Regarding #2, I've colored the yAxes by adding a "fontColor" attribute to 
the ticks - didn't notice those colors earlier.

Hope this helps!

Ian

On Monday, February 17, 2020 at 3:06:53 PM UTC-8, David Blume wrote:
>
> Hi Ian,
>
> The chart.js format looks very promising! I'm going to try it out. I hope 
> you don't mind my offering the following observations:
>
> 0. As far as I can tell, you converted the data correctly (from the gist), 
> so the next two observations relate to the presentation/rendering.
> 1. It seems like the vertical scale for comments is wrong. The last 
> comment value is 4, and the scale of the graph is 6, so the point's 
> vertical position should be closer to the 6 (at the top) than to 0, but 
> it's closer to the 0. (Compare to the original chart I posted.)
> 2. Since both y-axis tick labels were drawn in gray, one cannot tell which 
> line belongs with which y-axis set of label. Are there 535 retweets or 6 
> retweets at the last datapoint? (Compare to the original chart I posted, 
> where the tick label colors match the color of the related line, so you can 
> tell it's definitely 535 retweets.)
>
> Your site is already very useful and I'm sure fulfills the needs of most 
> cases. It's great! I hope you don't mind my offering these observations and 
> stretch goals. :)
>
> Note to self: My light-blue "waterline" doesn't have enough contrast. It's 
> practically invisible on some monitors. Need to fix that.
>
> --David
>
> On Monday, February 17, 2020 at 1:31:23 PM UTC-8, Ian Webster wrote:
>>
>> Hi David,
>>
>> The graph that you linked is in my roadmap for the project, but you are 
>> using some more advanced features so it may take some time to complete the 
>> implementation.  Google Image Charts is the product of years of work and it 
>> has some unusual bells and whistles...
>>
>> In case you're interested, I took the liberty of converting your chart to 
>> Chart.js format.  I prefer this format for complex graphs because it is 
>> easier to understand and quite well documented.  Here is a link to the 
>> equivalent Chart.js specification for your chart: 
>> https://gist.github.com/typpo/f7ada53b1d2a3bf2ed0f1ff7446fc6f5.  It 
>> produces this image, generated via QuickChart's chart.js renderer:
>>
>> [image: 
>> https://quickchart.io/chart?devicePixelRatio=1&w=300&h=50&bkg=white&c={%0A%20%20type%3A%20%27line%27%2C%0A%20%20data%3A%20{%0A%20%20%20%20labels%3A%20[%27%27%2C%27%27%2C%27%27%2C%27%27%2C%27%27]%2C%0A%20%20%20%20datasets%3A%20[{%0A%20%20%20%20%20%20label%3A%20%27comments%27%2C%0A%20%20%20%20%20%20borderColor%3A%20%27blue%27%2C%0A%20%20%20%20%20%20yAxisID%3A%20%27A%27%2C%0A%20%20%20%20%20%20data%3A%20[0%2C1%2C1%2C1%2C2%2C3%2C4%2C4]%2C%0A%20%20%20%20%20%20fill%3A%20false%2C%0A%20%20%20%20%20%20borderWidth%3A%201%2C%0A%20%20%20%20}%2C%20{%0A%20%20%20%20%20%20label%3A%20%27retweets%27%2C%0A%20%20%20%20%20%20borderColor%3A%20%27green%27%2C%0A%20%20%20%20%20%20backgroundColor%3A%20%27%23ff8c00%27%2C%0A%20%20%20%20%20%20pointBorderColor%3A%20%27%23ff8c00%27%2C%0A%20%20%20%20%20%20yAxisID%3A%20%27B%27%2C%0A%20%20%20%20%20%20data%3A%20[80%2C261%2C357%2C475%2C501%2C514%2C527%2C535]%2C%0A%20%20%20%20%20%20pointRadius%3A%20[0%2C0%2C5%2C0%2C0%2C0%2C0%2C0]%2C%0A%20%20%20%20%20%20fill%3A%20false%2C%0A%20%20%20%20%20%20borderWidth%3A%201%2C%0A%20%20%20%20}]%0A%20%20}%2C%0A%20%20options%3A%20{%0A%20%20%20%20legend%3A%20{%0A%20%20%20%20%20%20position%3A%20%27right%27%2C%0A%20%20%20%20%20%20labels%3A%20{%0A%20%20%20%20%20%20%20%20boxWidth%3A%205%2C%0A%20%20%20%20%20%20%20%20fontSize%3A%208%2C%0A%20%20%20%20%20%20%20%20padding%3A%205%2C%0A%20%20%20%20%20%20}%2C%0A%20%20%20%20}%2C%0A%20%20%20%20layout%3A%20{%0A%20%20%20%20%20%20padding%3A%20{%20%0A%20%20%20%20%20%20%20%20bottom%3A%20-20%2C%0A%20%20%20%20%20%20}%0A%20%20%20%20}%2C%0A%20%20%20%20elements%3A%20{%0A%20%20%20%20%20%20point%3A%20{%0A%20%20%20%20%20%20%20%20radius%3A%200%2C%0A%20%20%20%20%20%20}%2C%0A%20%20%20%20}%2C%0A%20%20%20%20scales%3A%20{%0A%20%20%20%20%20%20xAxes%3A%20[{%0A%20%20%20%20%20%20%20%20gridLines%3A%20{%0A%20%20%20%20%20%20%20%20%20%20color%3A%20%27transparent%27%2C%0A%20%20%20%20%20%20%20%20}%2C%0A%20%20%20%20%20%20}]%2C%0A%20%20%20%20%20%20yAxes%3A%20[{%0A%20%20%20%20%20%20%20%20id%3A%20%27A%27%2C%0A%20%20%20%20%20%20%20%20position%3A%20%27left%27%2C%0A%20%20%20%20%20%20%20%20gridLines%3A%20{%0A%20%20%20%20%20%20%20%20%20%20color%3A%20%27transparent%27%2C%0A%20%20%20%20%20%20%20%20%20%20tickMarkLength%3A%205%2C%0A%20%20%20%20%20%20%20%20}%2C%0A%20%20%20%20%20%20%20%20ticks%3A%20{%0A%20%20%20%20%20%20%20%20%09min%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%09max%3A%206%2C%0A%20%20%20%20%20%20%20%20%20%20%09maxTicksLimit%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%09precision%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%09fontSize%3A%208%2C%0A%20%20%20%20%20%20%20%20}%2C%0A%20%20%20%20%20%20}%2C%20{%0A%20%20%20%20%20%20%20%20id%3A%20%27B%27%2C%0A%20%20%20%20%20%20%20%20position%3A%20%27right%27%2C%0A%20%20%20%20%20%20%20%20gridLines%3A%20{%0A%20%20%20%20%20%20%20%20%20%20color%3A%20%27transparent%27%2C%0A%20%20%20%20%20%20%20%20%20%20tickMarkLength%3A%205%2C%0A%20%20%20%20%20%20%20%20}%2C%0A%20%20%20%20%20%20%20%20ticks%3A%20{%0A%20%20%20%20%20%20%20%20%09min%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%09max%3A%20535%2C%0A%20%20%20%20%20%20%20%20%20%20%09maxTicksLimit%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%09fontSize%3A%208%2C%0A%20%20%20%20%20%20%20%20}%2C%0A%20%20%20%20%20%20}]%0A%20%20%20%20}%2C%0A%20%20%20%20annotation%3A%20{%0A%20%20%20%20%20%20annotations%3A%20[{%0A%20%20%20%20%20%20%20%20type%3A%20%27box%27%2C%0A%20%20%20%20%20%20%20%20yScaleID%3A%20%27A%27%2C%0A%20%20%20%20%20%20%20%20yMin%3A%200%2C%0A%20%20%20%20%20%20%20%20yMax%3A%203%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%27%23E0E0FF66%27%2C%0A%20%20%20%20%20%20%20%20borderColor%3A%20%27transparent%27%2C%0A%20%20%20%20%20%20}]%0A%20%20%20%20}%2C%0A%20%20}%0A}]
>>
>> The config is on the longer side, but if you don't need an *exact* 
>> reproduction you could simplify it quite a bit.  Hope this helps - 
>> regardless, I will just let you know when I implement some of the Google 
>> Image Charts API features you included above.
>>
>> Ian
>>
>> On Friday, February 14, 2020 at 8:05:05 AM UTC-8, David Blume wrote:
>>>
>>> Very nice work. Is supporting charts like this on your roadmap? 
>>> https://chart.apis.google.com/chart?cht=lxy&chco=0000FF,00AA00&chs=300x50&chxs=0,0000FF|1,00AA00&chd=t:0,1,2,3,4,5,6,7|0,1,1,1,2,3,4,4|0,1,2,3,4,5,6,7|80,261,357,475,501,514,527,535&chm=r,E0E0FF,0,0,0.543|o,FF8C00,1,2,10&chxt=y,r&chxl=0:|0|6|1:|0|535&chds=0,7,0,6,0,7,0,535&chf=bg,s,F8F8F8&chdl=comments|retweets
>>>  
>>>
>>> --David
>>>
>>> On Thursday, February 13, 2020 at 2:22:01 PM UTC-8, Ian Webster wrote:
>>>>
>>>> Hi all,
>>>>
>>>> I've released an open-source drop-in replacement for popular parts of 
>>>> the Google Image Charts API.  You can just replace "
>>>> chart.googleapis.com" with "quickchart.io", or you can run your own 
>>>> server via the source code <https://github.com/typpo/quickchart> or 
>>>> docker.  For example, this Google Image Chart: 
>>>>
>>>> https://chart.googleapis.com
>>>> /chart?cht=bvg&chs=300x200&chd=t:5,5,5|10,10,10|15,15,15&chco=4d89f9,c6d9fd,00B88A&chds=0,20&chbh=a&chxs=0,000000,0,0,_&chxt=y&chm=N,000000,0,,10|N,000000,1,,10|N,000000,2,,10
>>>>
>>>>
>>>> Can be re-written as: https://*quickchart.io*
>>>> /chart?cht=bvg&chs=300x200&chd=t:5,5,5|10,10,10|15,15,15&chco=4d89f9,c6d9fd,00B88A&chds=0,20&chbh=a&chxs=0,000000,0,0,_&chxt=y&chm=N,000000,0,,10|N,000000,1,,10|N,000000,2,,10
>>>>  
>>>> <https://quickchart.io/chart?cht=bvg&chs=300x200&chd=t:5,5,5%7C10,10,10%7C15,15,15&chco=4d89f9,c6d9fd,00B88A&chds=0,20&chbh=a&chxs=0,000000,0,0,_&chxt=y&chm=N,000000,0,,10%7CN,000000,1,,10%7CN,000000,2,,10>
>>>>
>>>>
>>>> As you can see the outputs are quite similar.  Documentation, examples, 
>>>> and supported options are provided here 
>>>> <https://quickchart.io/documentation/migrating-from-google-image-charts>
>>>> .
>>>>
>>>> It's a work in progress - my goal is to provide a faithful 
>>>> reimplementation of the Google Image Charts API but of course the full API 
>>>> is quite complicated, so I have focused on the core features.  If you need 
>>>> help or would like to assist with the open source project please reach out 
>>>> or open an issue on Github <https://github.com/typpo/quickchart>.  
>>>> Please try it and provide feedback!
>>>>
>>>> (As an aside, if you'd like to migrate to a modern chart framework the 
>>>> service also provides a Google Image Charts -> Chart.js conversion.  
>>>> Replace the host with quickchart.io and add &format=chartjs-config in 
>>>> order to generate the equivalent Chart.js config:  https://
>>>> *quickchart.io*/chart?cht=pc&chd=s:Helo,Wrld&chs=200x100
>>>> *&format=chartjs-config* 
>>>> <https://quickchart.io/chart?cht=pc&chd=s:Helo,Wrld&chs=200x100&format=chartjs-config>
>>>> )
>>>>
>>>> Ian
>>>>
>>>> On Wednesday, October 9, 2019 at 12:43:19 PM UTC-7, Jon Orwant wrote:
>>>>>
>>>>> The service is running on fumes: as soon as the current serving jobs 
>>>>> go down, they are unlikely to come back up. I would migrate off 
>>>>> immediately.
>>>>>
>>>>> Jon
>>>>>
>>>>> On Wednesday, October 9, 2019 at 3:40:29 PM UTC-4, Madisyn Margiotta 
>>>>> wrote:
>>>>>>
>>>>>> Hi All, 
>>>>>>
>>>>>> Any updates on the timeline for this deprecation? We have numerous 
>>>>>> emails that utilize these charts as well. 
>>>>>>
>>>>>> Thanks!
>>>>>>
>>>>>> On Saturday, February 9, 2019 at 3:44:58 PM UTC-7, Jon Orwant wrote:
>>>>>>>
>>>>>>> Google Image Charts <https://developers.google.com/chart/image/> -- 
>>>>>>> not to be confused with Google Charts 
>>>>>>> <https://developers.google.com/chart/> -- is the free service at 
>>>>>>> chart.googleapis.com that creates static charts.
>>>>>>>
>>>>>>> Its deprecation was announced back in 2012 
>>>>>>> <https://developers.googleblog.com/2012/04/changes-to-deprecation-policies-and-api.html>,
>>>>>>>  
>>>>>>> so in theory nobody should be using it now that it's 2019. 
>>>>>>>
>>>>>>> Several technical dependencies have made maintaining Google Image 
>>>>>>> Charts unsustainable going forward, so it will be *turned off on 
>>>>>>> March 14, 2019*.
>>>>>>>
>>>>>>> There is no effective way to identify or contact users of the 
>>>>>>> service other than this group, so to alert them we will be creating 
>>>>>>> outages: first a short one, and then a longer one.
>>>>>>>
>>>>>>> The short outage will be for an hour on *Wednesday, February 13, at 
>>>>>>> approximately 1pm Eastern Standard Time*.
>>>>>>> The long outage will be for several hours on *Tuesday, March 5, at 
>>>>>>> approximately 10am Eastern Standard Time*.
>>>>>>>
>>>>>>> If you are still using Google Image Charts, we recommend:
>>>>>>>
>>>>>>>
>>>>>>>    - 
>>>>>>>    
>>>>>>>    Switching to Google Charts, an actively developed JavaScript 
>>>>>>>    library for interactive charts and can render many common chart 
>>>>>>> types as 
>>>>>>>    static PNGs. However, Google Image Charts provides some "charts" 
>>>>>>>    that Google Charts does not, such as QR codes, LaTeX equations, and 
>>>>>>> road 
>>>>>>>    signs. For those we have no suggested replacement. 
>>>>>>>    - 
>>>>>>>    
>>>>>>>    Using another charting library such as D3 <http://d3js.org> or 
>>>>>>>    Dygraphs <http://dygraphs.com/> (both JavaScript).
>>>>>>>    - 
>>>>>>>    
>>>>>>>    Generating all the charts you'll ever need before March 14 and 
>>>>>>>    storing them yourself. (Many users of Google Image Charts create the 
>>>>>>> same 
>>>>>>>    exact chart over and over, which is slower and more wasteful than 
>>>>>>>    generating the chart once and storing it locally.)
>>>>>>>    
>>>>>>>
>>>>>>> On a personal note, I've enjoyed maintaining the service over the 
>>>>>>> years, and I'm happy to have watched the much more powerful Google 
>>>>>>> Charts 
>>>>>>> leapfrog it in capability.
>>>>>>>
>>>>>>> Jon
>>>>>>>
>>>>>>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-chart-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-chart-api/dd74c9a3-222e-42c3-994b-65336dbdd0de%40googlegroups.com.

Reply via email to